网站设计：如何回归内容 “简洁大气”设计指南

aikiss

如何可以使产品设计“简洁大气”?在你没有灵感的时候，不妨看看这篇文章中的建议。　　神马是“简洁大气”?
9 x+ z; z; F) i/ W' U2 E　　现在被人们津津乐道的扁平化设计无疑成为了这四个字的代言，也让之前似乎离开了人们视野的平面设计带来了新思考，我们发现很多设计方法依旧非常经典。
　　无论是与客户的沟通还是和产品经理的 PK 中，在第 N+1 次修改依旧没有灵感的时候，不妨借鉴一下下面的小建议来救场。
) v" V# X5 Y9 A! @' @! E3 |" r　　调整图版率改变印象
　　图片的加入是最能立刻改变和更换整体印象的法宝。
4 z) Q8 H6 l( {* e' E8 @2 N: d　　图版率是杂志版式中经常提到的概念:即页面中图片所占面积的比率。图版率高的杂志页面会给人带来年轻与活跃的印象，相反地，全是文字，图版率为 0，这样的页面就显得沉稳许多。
# ]- q+ A  W1 S& f　　放大图片，增加展示空间
4 ?& d+ Z) g, W$ |& r: ~5 U　　虽然在产品上网易微博一直不温不火，但在设计上采用大图片的改版让整体拥有了简洁的潮流感，并且每次刷新变化的封面图片让每天的登录过程也变的有趣起来。
　　
# I; I; n$ M  Y

                               
登录/注册后可看大图

, b, ?- K& [( @8 O: S; w" J; f　　
: M  D. M' D( n+ k' w5 _; U0 O3 f, a

                               
登录/注册后可看大图

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

$ `! R- D) C  f1 m% n7 x                               
登录/注册后可看大图

3 S% A' Q" o9 N* w& D　　色块进行重复构成排版
% y' Q! G3 s9 I7 s　　当图片资源不充足，比如消息类信息和图片并列时，可以采用和图片相同大小的色块保持界面的统一性与简洁性。
　　

; `. ^* Y9 |% o. k4 e1 J                               
登录/注册后可看大图

　　使用图标代替文字
　　使用意图明确的图标代替文字可以帮助导航等操作区与文字阅读区分开。
+ ~$ S5 B; J( b+ [+ c  _6 u　　
( G0 F- i- h5 I( t, V( o. k; v

                               
登录/注册后可看大图

　　创造节奏感
1 a# z& p, n" N% w! J　　你知道吗?观看者和一张简单的海报设计也会产生交互过程。
　　当你在 20 米开外的时候会被它上面的人物与色彩吸引，走近至 5 米的时候会看到它的标语，而走到跟前会发现新的小字信息。海报通过观看距离的变化制造出阅读的层次感，引导你不断深入。
　　
7 ?5 P4 h3 J* H4 A/ ]

" Q5 R& I6 [  j$ ^$ }6 t, B                               
登录/注册后可看大图

& x% I6 {( m' r8 _　　同样的，在界面中除了利用明确的信息分组引导视觉，还可以考虑在交互中也加入节奏，笔者不认为在扁平化的设计时代我们就不需要打造空间关系，通过手势的变化制造出界面不同的景深效果，可以让界面充满呼吸感。
; q! }9 ]2 p$ h" p* M' Z　　比如 AppFlow 中下拉刷新时，背景图片会由远至近，就在不觉间扩展了视觉空间。
　　
! H5 ]3 u' Y' b9 w4 _) J2 C

                               
登录/注册后可看大图

* c- q5 L; o- U# D　　使用鲜明的色彩营造气场
　　穿衣服我们讲究“气场”，而设计中使用的色彩也应该明确，避免使用含混的色彩，这样界面之间的元素才是有对比的。
　　

                               
登录/注册后可看大图

7 k: Y1 W. N: c  u% t　　戒掉排满的惯性
　　格式塔心理学中提到一个删除原理，就是从构图形象中排除不重要的部分，只保留那些绝对必要的组成部分，从而达到视觉的简化。 不要排满也就是我们时常说的留白，这里的设计需要和产品一起做减法。
+ m$ K+ u8 |. X+ g' v: d% j& n　　在实际项目中，笔者经常遇到这样的对话：
! |4 n; b# e6 r2 s9 p5 ^　　“这里为什么要放这个功能?好像用户用不上诶……”
' A2 M7 @7 q2 I5 V0 \" A9 J# m　　“这里不放这个功能看起来比较空，而且万一用户用到呢?”
! e; _. z5 E. q. N. Q; b　　“……”
　　人们以往的消费观念是面对同样的价格，最终大家会选择看起来功能齐全的物品，在信息竞争和功能为上的时代，惯性会让你想要加入足够多的功能或信息去满足用户，这种情况下，堆满信息的页面如果不进行删减化处理，形成一定层次的分组和条理化处理，也将会变成让人手足无措的电视遥控器。
　　其实考虑界面空不空的问题应该交给设计师解决，通过一定程度的留白就可以达到不错的效果，我们只需要确认到底需不需要这个功能，有多需要，符不符合用户的使用场景?
　　隐藏与合并
, n7 p+ \1 R; Y+ Y　　当面对无法去掉的功能时，我们可以采用“主界面优先模式”，隐藏部分功能。
　　比如在阅读中，为了更加沉浸式的阅读体验，经常利用手势将阅读流之外的功能隐藏起来，比如随享Pro 向左滑进行评论和转发，豆瓣阅读的全屏阅读。
+ }: N- W! s" \0 q, U　　

                               
登录/注册后可看大图

  C2 P! H% \" k$ O　　

) H& T$ G  R9 G: \$ h# e; S: x% l                               
登录/注册后可看大图

! x; c% |) q& g/ }9 K; x2 `　　主界面优先还体现在减少频繁地切换界面，比如常见的查看大图功能，在以前我们常用的方式是滑到新的页面去查看图片详情，但真的需要那么麻烦吗?
　　在 AppFlow 和网易应用中心应用主页中，通过手势向下滑动可以让图片当前页放大，预览 App 界面效果，这样的体验就很简洁。
- d0 M( T  S4 I9 @' t　　

- }: }4 I: G' V) T                               
登录/注册后可看大图

9 X. s! q7 N4 S. l1 s0 d( h- f　　除了隐藏功能，我们还可以合并功能，减少 UI 控件的个数，进而节省下空间,比如下面对音乐播放进度和播放控件的整合。
# e2 e1 m' |, i" F　　

                               
登录/注册后可看大图

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