“简洁大气”设计指南

2013/04/25 29765

大气

[核心提示] 如何可以使产品设计“简洁大气”?在你没有灵感的时候,不妨看看这篇文章中的建议。

本文作者@兔子小姐april 神马是“简洁大气”?

现在被人们津津乐道的扁平化设计无疑成为了这四个字的代言,也让之前似乎离开了人们视野的平面设计带来了新思考,我们发现很多设计方法依旧非常经典。
无论是与客户的沟通还是和产品经理的 PK 中,在第 N+1 次修改依旧没有灵感的时候,不妨借鉴一下下面的小建议来救场。

调整图版率改变印象

图片的加入是最能立刻改变和更换整体印象的法宝。
图版率是杂志版式中经常提到的概念:即页面中图片所占面积的比率。图版率高的杂志页面会给人带来年轻与活跃的印象,相反地,全是文字,图版率为 0,这样的页面就显得沉稳许多。

放大图片,增加展示空间

虽然在产品上网易微博一直不温不火,但在设计上采用大图片的改版让整体拥有了简洁的潮流感,并且每次刷新变化的封面图片让每天的登录过程也变的有趣起来。


 

改变图片比例

即使全部是图片也可以改变图版率。商品展示中经常会有这种图片罗列的形式,普通的九宫格设计虽然整齐,但是没有变化和视觉重点,将几个图片位合并成为一个进行展示可以产生更强的专题性效果。


 

色块进行重复构成排版

当图片资源不充足,比如消息类信息和图片并列时,可以采用和图片相同大小的色块保持界面的统一性与简洁性。


 

使用图标代替文字

使用意图明确的图标代替文字可以帮助导航等操作区与文字阅读区分开。


 

创造节奏感

你知道吗?观看者和一张简单的海报设计也会产生交互过程。

当你在 20 米开外的时候会被它上面的人物与色彩吸引,走近至 5 米的时候会看到它的标语,而走到跟前会发现新的小字信息。海报通过观看距离的变化制造出阅读的层次感,引导你不断深入。

同样的,在界面中除了利用明确的信息分组引导视觉,还可以考虑在交互中也加入节奏,笔者不认为在扁平化的设计时代我们就不需要打造空间关系,通过手势的变化制造出界面不同的景深效果,可以让界面充满呼吸感。

比如 AppFlow 中下拉刷新时,背景图片会由远至近,就在不觉间扩展了视觉空间。


 

使用鲜明的色彩营造气场

穿衣服我们讲究“气场”,而设计中使用的色彩也应该明确,避免使用含混的色彩,这样界面之间的元素才是有对比的。


 

戒掉排满的惯性

格式塔心理学中提到一个删除原理,就是从构图形象中排除不重要的部分,只保留那些绝对必要的组成部分,从而达到视觉的简化。 不要排满也就是我们时常说的留白,这里的设计需要和产品一起做减法。

在实际项目中,笔者经常遇到这样的对话:

“这里为什么要放这个功能?好像用户用不上诶……”

“这里不放这个功能看起来比较空,而且万一用户用到呢?”

“……”

人们以往的消费观念是面对同样的价格,最终大家会选择看起来功能齐全的物品,在信息竞争和功能为上的时代,惯性会让你想要加入足够多的功能或信息去满足用户,这种情况下,堆满信息的页面如果不进行删减化处理,形成一定层次的分组和条理化处理,也将会变成让人手足无措的电视遥控器。

其实考虑界面空不空的问题应该交给设计师解决,通过一定程度的留白就可以达到不错的效果,我们只需要确认到底需不需要这个功能,有多需要,符不符合用户的使用场景?

隐藏与合并

当面对无法去掉的功能时,我们可以采用“主界面优先模式”,隐藏部分功能。

比如在阅读中,为了更加沉浸式的阅读体验,经常利用手势将阅读流之外的功能隐藏起来,比如随享Pro 向左滑进行评论和转发,豆瓣阅读的全屏阅读。

主界面优先还体现在减少频繁地切换界面,比如常见的查看大图功能,在以前我们常用的方式是滑到新的页面去查看图片详情,但真的需要那么麻烦吗?
在 AppFlow 和网易应用中心应用主页中,通过手势向下滑动可以让图片当前页放大,预览 App 界面效果,这样的体验就很简洁。

除了隐藏功能,我们还可以合并功能,减少 UI 控件的个数,进而节省下空间,比如下面对音乐播放进度和播放控件的整合。

设计是不断创造新可能的过程,希望上面总结的这些小经验可以让设计更好的回归内容,利用最轻量、简单的设计来传递核心信息,也让设计师们早日告别苦逼加班的日子。

原文地址:http://www.geekpark.net/read/view/177328

================关于优设网================
“优设网uisdc.com”是一个分享网页设计、无线端设计以及PS教程的干货网站。

特色推荐:
设计讲座:定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音(YY频道:15335158)分享实战经验。
设计微博:我们拥有粉丝量26万的人气微博@优秀网页设计 ,欢迎大家关注及时获取设计资源。
设计导航:史上最赞最全面的设计师必备网址导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/concise-grand-design-guidelines

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里