简析极简风格设计

手机最开始出现只是为了通话,后来可以发短信,拍照片,听音乐,看视频。到现在手机完全成了我们身体的延伸,没有手机我们可能会很快的与这个社会脱节。可以预见一款产品/app所能完成任务是越来越多的,最典型的就是支付宝。支付宝里任何一个模块单拎出来就可以是一个单独的app。

极简风格

在内容越来越多的前提下,设计师应该减少无用信息的干扰让用户可以快速聚焦的到内容本身,这种“少即是多”设计思路就是我们常说的极简风格。那么设计师如何将极简风格应用到自己的产品中呢?下面我会做一个简单的分析,希望可以帮助到大家。

删减不必要的元素

极简风格最简单粗暴的实现手法就是删减与用户任务无关的非功能性元素,只保留重要的信息,减轻用户的认知负荷。

那么如何去判断一个设计元素的取舍呢?设计师应该问自己以下三个问题:

这个设计元素在当前界面中是起什么作用的?能够完成什么   样功能?

去掉以后是否会影响用户正常操作?

如果影响用户操作,可否有更简洁的设计元素来替代?

前几天有一个朋友问我,微博界面中每条动态下面的icon能否去掉。这里icon的使用主要是用于提升信息的可读性,因为相对于文本信息,具象元素可以更好的完成信息的传达。但是这只是起到一个提升作用,即使我把icon拿走,用户也会知道这三个是转发、评论和点赞。

所以这里的icon是可以去掉的吗?当然不是,我们要考虑不同的使用场景。当这条动态没有任何人点赞,评论,转发的时候,我们把icon拿走是没有问题的。但是一旦出现了互动,那么icon就完全取代了文字成为这个功能唯一的可识别性元素,后面的数目显示的是互动强度。即使我一直很推崇的“一个”应用,它的界面设计简单到不能再简单,在这里还是保留了icon,所以我倾向于保留,当然如果你有更好的方案欢迎留言交流。

多态组件的应用

删减次要元素并不是万能的,因为有的时候,你进行了删减之后发现界面中内容还是很多。那么在这种情况下,设计师应该学会应用多态组件。所谓多态组件的意思就是一个组件可以完成多个功能,这样也可以有效的减少界面中的元素。

例如,支付宝的支付界面,立即支付按钮可以跳转到付款成功的状态,这时候就没有必要再用弹框给用户提示了。这里的多态按钮除了供用户点击之外还可以完成信息传递的功能

微信最新的一次改版也很好的体现出多态组件的应用,之前用户如果想删除与一个好友的聊天记录,点击“删除”以后会从界面底部弹出actionsheet来供用户进行删除确认(不好意思,忘截图了)。但是微信最新的一次改版,对删除确认这一步骤进行了简化。整个删除流程用户的注意力会一直停留在在当前的这条聊天记录上,不会转移到界面底部的actionsheet,这种小细节的优化真的很让人眼前一亮。

多态组件的应用可以帮助设计师进一步简化界面中的信息。当然这就要求设计师对设计组件做到足够的了解,逐个分析不同的组件的优缺点和适用场景。以底部按钮为例,

这是最常见的一个底部按钮样式,能够应付大部分的使用场景。因为其一般都会采用面状按钮,大面积的色块能够达到吸引用户注意力的目的。当然有的时候,不需要按钮这么显眼,我们则可以换种样式,最典型的就是“退出登录”按钮,没有设计师希望用户可以很轻易的发现退出产品的路径。

这种按钮样式的有两个缺点,第一就是不能浮动的,当界面内容过多的时候,用户需要滑动很久才能看到界面下方的按钮,降低了产品的易用性。当然我们加一个背景框做成浮动样式固定在界面底部,这个问题也随之解决了。

它的第二缺点是只适合展示1-2个按钮的场景,3个以上的按钮就很难胜任了。而且这里的优先级区分只能通过改变(圆角)矩形的样式来实现,例如面状对线状,红色背景对蓝色背景。要解决这个问题,我们不妨看看下面这个按钮样式。

这种底部按钮现在比较火,很多主流产品都采用这种样式。突然的爆火不是没有缘由的,它的的优点就在于可以完美解决上面的第二个问题。因为icon的引入一方面释放了界面的空间,最多可以放五个按钮。而且样式更加多变,可以是“文字+色块”也可以是“文字+icon”,而且尺寸与配色可以根据优先级来进行设置,设计师可发挥的空间会大一点。

但是这种底部按钮样式也是有缺点的,iPhone X因为底部Home Indicator的存在给我们的适配带来了很多不便。有的产品在适配的时候改变了样式,破坏了用户体验的一致性。

可能会有设计师说,我只是一个UI设计师,这里面选择什么组件不是我来决定的,这是交互设计师或者产品经理的工作。我一直所提倡的UI设计师要懂交互和产品,如果他们给的交互稿原型图不合理,你可以去反向去影响他们。只是被动的去给他们的原型图上色而不去思考,这样我们很难得到提升。

重点突出

为什么极简风格设计我们还要考虑重点突出呢?因为有的设计师过于追求简单,导致整个界面看起来跟原型图一样,特别的平淡。其实真正的极简风格设计是在界面简单的基础上还要做到重点信息突出,让用户在快速浏览的模式下可以看到他们感兴趣的内容。

极简风格的设计理念提倡:一个界面只有一个焦点。我们会经常会看到一些设计师做的界面非常的繁杂,让人抓不住重点。当然这不一定全是设计师的锅,有的时候脑残的产品经理要求这个要突出,那个强调,导致整个界面都充斥着大红大紫,特别的凌乱。

但是有的设计师矫枉过正,为了凸显主要功能,过于弱化次要功能,这也是不可取的。例如,上面这个界面中“小红点”,当然这里应该说“小黄点”。因为这里把红色改成了黄色,对于这个改法我非常的理解。因为红色特别的刺眼,改成黄色的确舒服多了。但是!“小红点”的工作原理就是用户对界面和谐统一的追求,这里突然出现了一个红点,非常突兀,所以会忍不住的想去点击。如果你把红色改成了黄色,用户就无法注意到新消息提醒,小红点的作用也无法起到。这个属于过度弱化次要功能。

总结

以上就是我对极简风格设计做的一个总结,希望可以帮助到大家。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,429评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 星星仍将在夜空里 守望着比它更亮的光 阳光仍将在黑夜里离去 认识了黄昏 岁月却像翻涌的浪 激荡着不同人的欢声笑语
    梁熹光阅读 206评论 3 2
  • 当组织脑袋的成长速度跟不上屁股的成长速度时就会出现:1.累死宝宝了 2.宝宝想爆粗 3.不拒绝 不主动 不付出
    JoyceZhang阅读 152评论 0 0