V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
baiyun888
V2EX  ›  设计

APP 设计如何显得清晰,用什么字体

  •  
  •   baiyun888 · 2018-01-26 14:15:31 +08:00 · 7377 次点击
    这是一个创建于 2253 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自己用 PS 设计出来的 APP 样式,总是觉得很粗糙,看着不清晰,没有美感,所以 2 个问题 1、如何让演示图看起来有型 2、你们都用什么字体(我钟爱 12&14px 宋体,但为什么设计出来的跟 html 设置的宋体看起来差别那么大呢)

    26 条回复    2018-05-25 16:29:18 +08:00
    baiyun888
        1
    baiyun888  
    OP
       2018-01-26 14:17:39 +08:00   ❤️ 1

    这是什么字体
    QAPTEAWH
        2
    QAPTEAWH  
       2018-01-26 14:25:33 +08:00
    宋体适合高 PPI(300ppi 都算低了,印刷品级的才好)下作为正文字体使用。普通界面用黑体。
    baiyun888
        3
    baiyun888  
    OP
       2018-01-26 14:26:20 +08:00


    这张网易云的图截的不好,他的设计图做的也很棒哦,是我用 PS 的问题吗?
    baiyun888
        4
    baiyun888  
    OP
       2018-01-26 14:29:42 +08:00
    EmbraceZ
        5
    EmbraceZ  
       2018-01-26 14:30:35 +08:00 via Android
    可以先搜一下指南比如
    https://juejin.im/entry/5715ad822e958a007c4e5154
    我个人的观点是,除非为了设计需要,尽量使用原生字体,尽量不用 light 字重
    EmbraceZ
        6
    EmbraceZ  
       2018-01-26 14:33:07 +08:00 via Android
    @QAPTEAWH 同意,衬线字体除非是为了模仿书刊效果,否则在显示屏上的显示效果大概是不如无衬线的,在低 PPI 的情况下更是如此
    magicolor
        7
    magicolor  
       2018-01-26 14:33:24 +08:00
    一般都用雅黑。图上应该是苹方的细体,要想 12px,14px 的宋体在 ps 里好看,要取消字体的抗锯齿选项
    baiyun888
        8
    baiyun888  
    OP
       2018-01-26 14:35:04 +08:00
    @QAPTEAWH #2 上面的图片也用的黑体吗?
    baiyun888
        9
    baiyun888  
    OP
       2018-01-26 14:41:58 +08:00
    @magicolor #7 选的是无哦,但是怎么看怎么不像宋体
    Macbooker
        10
    Macbooker  
       2018-01-26 15:08:24 +08:00
    @EmbraceZ 现在显示屏都挺好的,尤其是移动设备。我觉得用非默认字体的主要问题是设备不一定安装相应字体。我在 app 里打包了衬线体,在 iPhone 效果挺好。

    @QAPTEAWH 对于电子显示屏 ppi 没有意义。

    图片模糊要看一下设计分辨率和屏幕分辨率。一张 100*100 的图放到 200*200 的设备还平铺,那肯定要模糊的。你设计的是 iOS app,那就拿你手里的 iOS 设备分辨率来做,1:1 显示肯定不会模糊。当然要注意 ps 转图片有没有压缩,压缩也会模糊。

    不知什么字体,肯定不是宋体。
    QAPTEAWH
        11
    QAPTEAWH  
       2018-01-26 15:22:42 +08:00
    @baiyun888 你这是宋体内嵌的点阵宋体。小字号时用,比矢量字体清晰。

    不过现在都是高分时代了。
    wu67
        12
    wu67  
       2018-01-26 15:22:52 +08:00
    苹方 思源 冬青黑
    rookie603
        13
    rookie603  
       2018-01-26 15:32:30 +08:00
    老哥,你用平方就好了
    icyalala
        14
    icyalala  
       2018-01-26 15:50:27 +08:00   ❤️ 1
    UI 就选一款非衬线字体,思源、平方 /兰亭 /冬青、微软雅黑。
    另外,在 App 内打包字体会很大增加 App 体积。。
    loshine1992
        15
    loshine1992  
       2018-01-26 15:59:27 +08:00
    Android 思源黑体
    iOS 苹方

    按自带的字体来
    baiyun888
        16
    baiyun888  
    OP
       2018-01-26 16:26:52 +08:00
    @loshine1992 #15 好的,谢谢
    op7418
        17
    op7418  
       2018-01-26 16:52:05 +08:00
    优先使用系统自带的字体啊,思源和苹方。移动平台的 UI 不要随便换字体
    SeptimusX
        18
    SeptimusX  
       2018-01-26 16:56:03 +08:00
    @baiyun888 从数字判断是 Hiragino Sans 系
    minamike
        19
    minamike  
       2018-01-26 18:29:37 +08:00
    苹方
    San Fransisco
    nicevar
        20
    nicevar  
       2018-01-26 18:42:37 +08:00
    手机软件使用系统字体就行了,第三方字体会出现很多适配问题, 一些机型上显示不全,过大或者过小、被剃头、重叠
    POPOEVER
        21
    POPOEVER  
       2018-01-26 19:52:58 +08:00
    @EmbraceZ font-weight 叫字体磅数
    13036101641
        22
    13036101641  
       2018-01-29 14:24:10 +08:00
    用 sketch 设计吧
    RyougiShiki
        23
    RyougiShiki  
       2018-01-30 08:39:42 +08:00
    思源和 robot 可以做做安卓,但思源其实不好看,最推荐各种苹果字体如俪黑,其它文泉驿米黑,方正兰亭超细黑可以没事试试。另外除了字体,界面布局平衡,图片统一感需要专业的 UI 才能感觉出来,普通人做不了那么整齐漂亮的。
    fghjghf
        24
    fghjghf  
       2018-01-30 12:21:09 +08:00
    很多字体都是要收费的。别乱用,有规模了会被人告的。 我一般用默认字体
    GuangTsang
        25
    GuangTsang  
       2018-01-30 12:48:21 +08:00
    这个要基于你设计时候画板分辨率大小,还有导出图片时候的分辨率大小,如果你设计的时候使用的工具是 PS,那么你的画板可以设置为 iphone8 分辨率( 750*1334 ),导出设计稿的时候直接导出 1 倍大小就 OK 了;这个尺寸基本上目前的 retina 屏幕都不会有粗糙的感觉,当然这个得建立在你的设计稿在设计的时候尽可能不要出现小数点。
    18889242351
        26
    18889242351  
       2018-05-25 16:29:18 +08:00
    Android 思源黑体 iOS 苹方 最小号字体是 20px 我设计的时候一般是 22px
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   992 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:51 · PVG 03:51 · LAX 12:51 · JFK 15:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.