首页 > 建站资源 > 网站优化 > 界面设计总结:如何提升界面品质感?

界面设计总结:如何提升界面品质感?

时间:2018-06-21    来源:优设网

层级

界面的层级关系主要体现在主次、优先级、层数。

主次分明、避免层级混乱:清晰的层级结构,能让用户更快的获取重要内容,同一组合下其信息一定有主要展示和次要展示。可以通过位置、面积、颜色三个维度建立主次层级的对比度。

  • 位置。在中国,用户的阅读习惯为从左上至右下,所以用户对左上区域的观察最优,依次为右上,左下,而右下最差。因此,左上部和上中部被称为「最佳视域」。

  • 面积。信息内容在界面内的占比面积越大,信息越是突出。

  • 颜色。白色背景下,明度越低/饱和度越高,信息越是突出。

同一组合下,有且仅能有一个最重要的内容:当所有的内容都重要,也就等于所有内容都不重要,信息的优先级不取决于主要信息是否够大,而是主要信息和次要信息的对比度。

同一页面,信息层级不宜过多:过多的信息层级会让页面变得复杂,增加用户的理解成本。冗余的信息展示会让界面变的凌乱琐碎,一定程度上干扰用户使用体验。一般情况下界面应控制在 3 层信息以内。

主次分明、优先级明确、层级适当会让界面的信息传达更清晰明确,进而增加用户的使用中的舒适度。

分割

分割是用于区分不同信息的方法,大概可以分为距离分割、线性分割、面性分割(背景色分割)、颜色分割。

距离分割:增大两模块的距离达到内容分割内容作用,元素间的距离越远,越不易被视为同一组合。其好处是可以省去分割元素,减少视觉层级,让界面更干净、明快。

线性分割:线性分割是目前界面中最常用的分割方式,其优势是线自身「较轻」,不易干扰用户。值得注意的是线本身不重要,不宜过度强调,应点到为止,所以线的颜色不宜过重。

面性分割/背景色分割:当处理多层级、信息复杂的场景,在单个模块里已经用了线性分割的情况下。可能需要更强一点的分割方式来表明模块与模块间的关系,这时我们可能需要面性分割方式。这种方式像是灰色的背景上,罗列着多张卡片,能更明确的表达两组内容的分割感,但其缺点是会较明显的增多界面层级。

颜色分割:当信息的表现形式重复性较高,容易被看混的情况下,颜色分割是更为合适的选择。

相关推荐
新手引导如何设计?有这8种引导方式和7个设计要点
界面设计不能忽略的这些设计细节
APP设计:移动应用里的转场动画如何设计
APP设计:手把手教你如何配置一个高颜值的app
用户体验优化:如何简化操作流程?
干货:什么是用户界面和体验设计?
电商设计:优化购物车的一次产品复盘
移动APP交互设计:提示语总结
设计分享:界面情感化设计,拒绝冷冰冰的人机交流
设计分享:评论区怎么设计?哪种评论类型才是合适你?
APP设计总结:底部动作栏设计
交互设计:三种界面交互类型,四种隐喻设计方法
字体设计分享:界面视觉设计之字体篇
实例分析:创意进度条设计分享(LOADING进度条设计)
设计优化:怎样平衡好页面布局与屏幕分辨率?
案例分析:在线旅游订票网Booking 如何进行优化设计?
从认知负荷理论看界面设计,让产品更加简单易上手
分享:UI/UX设计师必须了解的用户心理学原理
有效提高网站销售转化率的16个UI设计秘诀
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
网页设计必读!125个小优化提升网页可用性(三)
国内人气最高的百度首页,原来背后的设计过程是这样的!
Axure实例:制作一个通用的移动端内容滚动区
以简书的网站改版为例,浅谈产品如何完成友好迭代
想要设计一个完美的搜索框 你需要注意这9个要素
制作完美搜索框的9个要素设计原则
探探和Linkedin都用的卡片设计 怎样才有好的体验?
2017版“我的淘宝”可能是迄今为止最懂你的设计
想让网页可读性更强?你得善用这个 F 式布局
iOS 11 设计中的几个 UI 设计细节
UI设计规范:单选按钮vs复选框要怎么用?
APP设计教程:特殊情况下如何处理加载页面?
老年用户的体验思考:如何保证界面适合阅读
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择

精彩推荐

热门教程