美文网首页产品工作
如何成为一名合格的App UI设计师(1)

如何成为一名合格的App UI设计师(1)

作者: 钱荣江 | 来源:发表于2016-01-05 11:26 被阅读160次

    在成为一名非常优秀,非常专业的UI设计师之前,首先你需要先成为一名合格的UI设计师。

    我先简单介绍下我的工作历程,2012年毕业,先后做过web前端工程师,网页设计师,视觉设计师,到现在的UI设计师。我做UI就2年不到,以下都是我个人理解。

    我先来描绘一个用户场景:

    假设一个真实用户点进你的app首页,她的感受可能是这样的,这个界面的字怎么怪怪的,怎么这么挤啊,颜色好花…

    从场景中我提炼了几点(文中出现的数据都是以iphone6为基准的设计)

    1.间距

    用户看app每一个界面的时候,第一感受可能就是这个app怎么这么挤,好难看,不舒服,这很有可能是你的间距出了问题。

    间距的分类:

    模块之间的距离:通常20px 30px 40px,根据实际情况调整,但我认为必须是10的倍数。

    两侧的距离:通常我用的30px

    列表页内部模块的间距:20px比较常见

    按钮之间距离:20px比较常见

    ……

    总之间距最好都是10px的倍数来调整

    2.字体大小

    我认为字体大小在app的ui设计中非常重要。

    通常最小字体保持在24px,个别如时间不需突出的元素可以用20px,22px。

    标题文字通常30px,最小不低于28px,再下一级的文字24px。

    记住很重要的一点,app所有界面的文字大小需要统一,至于哪些内容是属于同一层级,这个要慢慢积累,慢慢思考,我的做法是自己在前期做一个简单的视觉规范,规范字体的大小在各种可能的情况下的大小。

    3.颜色

    在app设计中,颜色的分类

    背景色:通常是灰色,#f4f4f4,#f3f3f3,#f1f1f1

    标题栏颜色:你的主色,比如红色

    底部tab颜色:默认状态是灰色,选中状态就是你的主色

    列表内容文字颜色:一级标题通常#000000 ,#333333二级内容通常#666666,三级辅助说明#999999

    按钮颜色:提交,确定,登录等重要按钮用主色就可以价格颜色:用得最多的就是橙色#f63

    用色小技巧:尽量选择一些饱和度和亮度偏高一点的颜色,这样看起来整个画面很丰富。

    4.对齐

    上对齐,左对齐,居中对齐,右对齐,下对齐

    尽量不要用上面五种方式之外的方式去摆放元素,那样不好把控。

    先写到这吧,第一篇自己的总结,还有很多不足,期待下一次,谢谢。

    相关文章

      网友评论

      • aJYqGp:为什么间距最好是10px的倍数呢?是方便开发吗?
        钱荣江:@philxu 这是一个参考数值,在你还不能完全把控间距的时候,可以先这样,并不是说你间距12px,14px就错,这个需要你自己去不断去尝试

      本文标题:如何成为一名合格的App UI设计师(1)

      本文链接:https://www.haomeiwen.com/subject/rqvjhttx.html