在线咨询
QQ咨询
服务热线
服务热线:159-9846-4607
TOP

UI界面设计技巧总结

发布时间:2021-01-03 浏览:
UI界面的设计目标,轻松、快速地吸引用户眼球,在实现目标方面,它通常被称为“用户中心设计”。
一个好的用户界面设计,便于帮助设计师专注于网站的建设,而图表设计通常用来增强可用性。设计过程中必须平衡技术功能和视觉元素,来创造一个可操作、实用、易于上手的系统。   
为了能更好的帮助UI设计师们获得设计灵感,提供设计技巧、原则。
目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话,向上适配或者向下适配误差会比较小。
设计前最好沟通下需求,是否有特殊需要,比如是否需要设计出极端情况(宽度为 1280 以及宽度为 1920)的效果图等等,力求前端实现效果和高保真设计图误差最小。

二、页面框架
常见的布局有3种
1、上下布局:适用于功能入口较少(导航条目≤9)的产品,导航栏在上面,内容区域两边留白,两边留白区域进行最小值设定。开发在适配时,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
2、左右布局:适用于功能入口较多的产品,菜单栏在左侧可收缩展开,内容区域在右侧,适配时常见的做法是将左边的导航栏固定,对右边的工作区域进行动态缩放,到达限定值后,左侧菜单可收缩,收缩状态下固定宽度。此种布局用户操作方便、灵活度高、可扩展性强、应用范围广;即使功能少的产品考虑到后期便于增加新功能,也比较推荐使用。
3、全屏布局:适用于产品种类和每个产品的功能非常多,且Dashboard(概览)需要展示很多信息的复杂控制台,菜单栏收缩在左上角,鼠标移入展开。

三、栅格
1、什么时栅格?
做过平面设计的同学应该对栅格很熟悉,栅格设计又称网格设计,是将设计版面网格化,然后以网格的最小单位为基础划分出Column(列)和Gutter(水槽:列与列的间距)并且设计的内容元素必须位于若干Column上。
2、栅格的作用
栅格的使用不仅可以让信息的呈现更加美观易读,而且为前期的规划、后续的设计以及开发的实现带来更多的灵活与规范。
3、栅格的规范(以下数值仅为推荐参考,具体根据实际需求定制)
网格单位:8px(8可被多数屏幕分辨率整除,也可根据实际需要设定6/10/12等)
Gutter宽度:16px(2个网格)或24px(3个网格)等
栅格数量:常用12或24 (1栅格=1Column+1Gutter)
Column单位:根据内容宽度、网格单位和栅格数量进行计算