首页 > 网页教程 > 设计分享 > 浅谈界面设计中的结构设计

浅谈界面设计中的结构设计

时间:2012-07-03    来源:阿里UED

构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构。

结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程。

好的结构设计能使界面信息传达更加清晰、快捷。那么,如果进行结构设计呢?

结构设计———内容的分组

使用线、框、背景色来分组

这是最常见的分组方式,在UI设计中历史悠久。

使用线来分组

使用框来分组

使用背景色分组

不管是线、框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉元素的加入也在一定程度上增加了界面的凌乱感。所以,现在越来越多的会利用空间的远近来对界面内容进行分组。

利用空间的远近来对界面内容进行分组

从XP到win7,变化很明显。

网页设计中也是一样,越来越多的新界面采用极简主义的思路,只保留了极少的线和背景色,更多时候是通过拉大区块之间的距离来分组。

喜欢深究的人也许会问,为何没有可见边界,我们也能清楚的根据距离的远近来对信息进行分组呢?

关于这一现象,在20世纪早期,一个德国的心理学家研究小组就进行过研究,试图解释人类视觉的工作原理。他们观察了许多视觉现象,并提出了格式塔(Gestalt)原理。针对这一现象,是其中的"接近性"原理。

相关推荐
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴
移动终端全新界面设计语言“Metro”简析
20个精致漂亮的视频播放器界面设计欣赏及点评
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
分享:360安全桌面主题设计过程及思路总结
移动应用设计的横竖屏切换中的界面设计与体验提升
国外精彩网页界面设计案例赏析
成功的视觉设计需要给用户传达四个要点
富有灵感和创意的web布局及交互设计赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
在网页设计中如何应用黄金分割比例?
优秀网页/平面设计师是怎样炼成的
符合用户操作习惯的网站界面设计分享
21个带斜线排版设计的网站设计创意欣赏
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
平面设计中关于控制视觉层次的设计方法
10个漂亮实用并附带源码的Web设计教程分享
创造视觉冲击力的网页设计配色技巧
在视觉设计中对像素的深度解析
网页设计中关于透明效果的小技巧分享
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
APP浏览体验设计的思考:如何理解用户的眼?
高效UI设计秘笈 Photoshop CC使用技巧图文教程
25个创意独特的Web表单设计案例欣赏
2014年Web网页设计的10大发展趋势前瞻
20个创意漂亮的手机应用程序登陆页面设计欣赏
界面设计教程:如何做好扁平化设计之交互篇
美工做推广?我的工资是如何从3.5K涨到9K的
移动应用图标配色诀窍 APP界面配色设计教程
网页设计教程:首屏图文混排10大技巧分享
Android应用开发教程:最常见的十大导航设计错误!
扁平化:回归真实的设计

精彩推荐

热门教程