记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 23823|回复: 0
收起左侧

[设计经验] 如何提升产品设计的外观品质[含9P]

[复制链接]
发表于 2018-7-11 09:13:58 | 显示全部楼层 |阅读模式
产品界面中的布局、结构、视觉及配色等

                                                        1. 什么是产品的外观品质?说白了就是一个产品的界面长的样子决定了它自身的品质设计感。不论是服装还是产品设计,追踪溯源都讲究是否有视觉冲击感,是否可以调动用户的情感从而更好地吸引用户的眼球。
2. 界面中的布局结构属于产品整体的骨架,更重要的是细节方面会决定一个产品的优劣,那么我们应该从哪几方面入手产品的布局结构?首先是图文的排版,其次是文字的类型和大小,最后是整体的排版样式(二者统一或二者关联)。


1. 先说图文的排版:
1) 辅助信息为主体内容的延续说明或补充操作,作用为服务于主体内容。同一组内容中,信息间需有明确的关系与合理的顺序,并且辅助信息不能抢镜。
2) 版式不变的基础上,元素之间的距离越近,越易被视为同一组合。距离相同时,横向排列的内容接近度相对更高。

3) 在中国,用户的阅读习惯为从左上至右下,所以用户对左上区域的观察最优,依次为右上、左下,而右下最差。因此,左上部和上中部被称为“最佳视域”。信息内容在界面内的占比面积越大,信息越是突出。白色背景下,明度越低/饱和度越高,信息越是突出。
4) 同一组内容中,总是有一个至关重要的元素信息,其余的次要信息与其作对比。

5) 同时,同一页面中,信息内容也不宜过多,否则会导致用户的视觉疲劳,冗余繁杂的信息会导致用户对产品内容产生一定的距离感。

2. 再说文字的类型和大小:
1) 由于场景需要,我们一定情况下会选择自定义字体。同时我们需要考虑字体在产品内不同模块下是否易于阅读。
2) 众所周知,在Android中,英文字体使用Roboto,中文字体使用Noto(思源黑体),我一般用的是方正兰亭黑系列的。
3)过于随意和抢镜的字体长时间情况下会给用户视觉疲劳。
4)为了用户能方便快捷的获取相关的信息,因此不同层级的字体需有一定的优先级顺序。
5) 在这个人强调下,对于移动端而言,小于22px的字号应慎用,会影响用户的正常阅读。但它可用于弱化的文字链、标签等字数少的场景。字号也是用偶数。

6) 当两信息区分度不大、界面层级过多需要减少层级的场景下,可以选择加粗部分内容建立轻度对比
7) 在界面设计中,字间距和行间距会直接影响用户阅读效率,同时字体颜色的饱和度应该保持不变,切记不能给字体加透明度。


3. 最后说整体的排版样式:
1) 增大两个组合的距离达到内容分割,元素间的距离越远,越不易被视为同一组合。好处是可以减少视觉层级,让界面更干净、明快。

2) 线性分割是目前界面中最常用的分割方式,其优势是线自身“较轻”,不易干扰用户。但是对于线而言,不宜过度强调,应点到为止,因此线的颜色不宜过重。
3) 当处理层级较多并已经使用线性分割的情况下,可能需要更强的分割方式来表明组合与组合间的关系,这时我们就需要面性分割方式。
4) 当元素的表现形式重复性较高,尤其针对布局内容一致的列表信息,很容易被看混淆的情况下,颜色分割是更为合适的选择。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x




上一篇:9个不为人知的AI小技巧
下一篇:潘焰荣:坚持自己的热爱 节奏慢一点
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】

QQ|QQ群:133515734|站长博客|百度网盘|许进龙|手机触屏版|国际动画教程网 ( ICP13037175 )