关于UI设计的基本原则思考

所属分类: 平面设计 / 平面其它 阅读数: 1626
收藏 0 赞 0 分享

图形设计大师Paul Rand(保罗·兰德)曾经说过:

"设计绝不是简单的排列组合与简单地再编辑,它应当充满着价值和意义,去说明道理,去删繁就简,去阐明演绎,去修饰美化,去赞美褒扬,使其有戏剧意味,让人们信服你所言……"

上面这段话现在看来有点啰嗦,毕竟是老外写的嘛~·~但其实说得非常有道理嘀。设想下如果一个设计师只是凭感觉(而不是理性)的去排列组合你的设计元素,或许你永远无法变成一个NB的设计师,更多的是别人眼里的"美工"。

2c0757551c1b32f875a4294ff43b.jpg

图片来自 Illustrations for Fatatrac 2015 calendar

事实上很多时候这样状态做出的设计,是很容易被推翻的。(特别是UI界面设计)

或许当你很满意的做完某个设计给别人看的时候,经常有PM(产品经理)或者其它搅屎棍这样问:

搅屎棍:"你为什么用这个颜色?这个按钮为什么那么小?这个配图好像并没有表达我们想要的意思......"

设计师:"......"

其实很多设计师的内心的回答是这样的:

因为这个颜色好看啊,竞品也用这个颜色啊~

按钮做太大好难看,太土鳖啊·~不够高大上~不懂别BB~

卧槽~怎么没有想要的意思啊·~你行你上啊~~

哈哈哈哈哈~~~

很多时候这些搅屎棍其实并不是觉得你设计得不好看,而是你的设计并不适用于当下这个产品~~

这就暴露出很多设计师并不是理性在做设计,而是相当的感性啊~~

f99b57551c506ac72525ae93508e.jpg

图片来自 Creative Studio, UNA

So·~为了能够更好的阐述如何正确的进行设计。思前想后,发现其实在做一个设计之前,需要你对将要进行的设计有一个清晰的认识。然后为了不至于犯一些低级的错误,了解和遵守设计原则显得尤为重要。

脑袋里带着这些原则去进行思考和设计,那样至少确保你是走在一个正确的道路上的。严格来说,遵守这些设计原则只是做出棒棒的设计的第一步而已。

901d57551c6532f875a42959eaff.jpg

图片来自花瓣网

什么是设计原则?都有哪些?哪个更加重要呢?

简单点说就是设计时要遵守的必要准则。而这些基本设计原则其实你我心里都知道,也在很多网页上或者同事口中说起到。然后很多时候,就是做着做着尼玛就忘了·~( ̄工 ̄lll)

4df057551c9032f875a429c5bb94.jpg

图片来自花瓣网

按照过往的经验,笔者将主要有以下四条基本设计原则,并按照优先级来给她们做了排序:

1.清晰明了的设计

首先我们必须明白的一点,设计是服务于产品的。或者说是为了解决产品上碰到的问题而发挥作用的。因此,你所要设计的产品需要在某个界面或者节点上完成某个目标。这个时候用户在足够清晰的界面环境中轻易完成任务显得重中之重啊~~

如果你打开一个页面或者app,无从下手,不知点哪里。或者找个想要的功能按钮找个半天~卧槽,那恭喜你,你的产品可以去屎了·~~这个时候你的设计再漂亮也是白搭~(其实这类设计还真的蛮多的~其实你会发现那些牛逼的产品经理不会整天和设计师过不去~只要设计的图形或流程是能够满足产品需要的,他们都会通过,他们喜欢把主要精力放在产品逻辑和用户体验上~而不是设计得好看不好看的细节...当然那些矮穷矬的产品经理没事就喜欢和设计抬杠~不吐槽下设计,他们一般都浑身上下都不舒服~~我只想说~~ヾ(。`Д´。) 滚(ノ`Д)ノ......原谅我又没忍住~~~)

so,消灭歧义,帮助人们更准确的理解和使用产品应该是排在首位的。

1d6d57551cb832f875a429b40383.jpg

图片来自花瓣网

2.高效的操作

其实单就高效而言,似乎与清晰明了差不多。但试想下,高效是不是就意味着清晰正确的处理目标任务呢?答案是不一定的。高效无障碍不代表不会出错。很顺畅的出错才叫尼玛惨·~这个成本相当的大的~~

另外一个极端就是交互层级太复杂,本来两步就可以完成的东西,硬是饶了一圈,搞个4-5步才完成。这尼玛就是作孽~~一般这类产品不是被吐槽的很惨就是直接弃之~

能一步完成的东西不要设计成两步。知道为什么iPhone为什么那么火吗?除开品牌和乔布斯的个人魅力,iPhone的手机用起来是真的爽~~因为用起来真的很简单,笔者没玩过任何智能设备的老爸一拿上手就知道怎么点~~所以说苹果的设计叫什么?叫做功力!

所以优化功能逻辑,减少层级,同时预判结果,让流程更顺畅。让人们使用的更加轻松快捷的完成设计目标,才是王道啊·~

758457551cde6ac72525aef5540d.jpg

图片来自花瓣网

3.设计的一致性

人是个很敏锐的动物,你会发现,你特别容易发现一堆同类物品中的异类~~

例如windows的关闭窗口按钮是在右上角,而mac的关闭窗口按钮是在左上角,无论是你之前是在用这两个中间的哪个系统,突然跳到另一个系统你肯定会特别特别不习惯~~。因为你已经熟悉了那个操作方式,直觉告诉你那样才是关闭按钮的正确姿势~~

所以对于相同的问题,提供相同的解决方案,减轻用户的认知及记忆负荷,一旦确定一个设计模式,打造更符合直觉的产品体验显得相当重要~~

当然在某些时候,为了能够突出某个功能,或者让人加深印象,故意设计成不一致的情况也不是没有~~所以说到底还是为了产品的目标~灵活运用此原则就对了·~

2ebf57551cf532f875a4291b97cb.jpg图片来自dribbble Goutham

4.美观大方的设计

很遗憾~尽管笔者也是GUI出身~但当仔细分析过之后,你会发现,一个产品漂不漂亮确确实实是排在前三个原则之后的~~因为它并不是用户体验的核心所在~  ╮(╯_╰)╭  

举个最最简单的栗子。我想大家对微信都了解得不能再了解。但其实作为设计师的你真的觉得微信设计得漂亮么?笔者的答案是,微信设计得中规中矩,与很多"漂亮的app"比,他显得普通。但是,微信设计得让你挑不出太多的毛病,甚至有些细节让人觉得很棒~。对于一个过亿级的产品,不出错,且用户能够很清晰快速的完成他的目标,那它就妥妥的成功啦·~

不是有句话说的好么~~"最好的设计就是没有设计~"。换句话说就是,好的设计让你感觉不出来它是经过设计的。一切都是那么的自然和顺理成章~

所以,漂亮和美观只是提升体验和激发共鸣或者说愉悦的一个重要手段。对于一个产品而言,特别是那种大的产品,完成目标任务永远是第一位。设计师所要做的是细节耐心的打磨界面,让别人更加愿意花费时间和精力去使用你的产品。

9fbd57551d1b32f875a4290bd63d.jpg

图片来自 Illustrations for Fatatrac 2015 calendar

总结

看到结尾,其实你会发现其实本文并不是针对视觉设计师而写的。笔者的个人想法在于,要想成为一名优秀的设计师,需要从多个角度去给自己施肥。技能只是成为一名优秀设计师的其中一个必备条件。

如果你在开展设计时,考虑的不仅仅是作为一个视觉设计师的那块内容,或许你的高度已经不一样了。当你足够的清楚这些原则,足够了解你的产品的时候,或许你与产品经理已经在同一高度去考虑问题。那样你设计的东西也就不再那么经不起推敲了~

更多精彩内容其他人还在看

UI设计师必看:详解最全面的组件化开发与设计指南

作为一个UI设计师,设计最重要的一点就是要符合产品功能逻辑,绝不是所谓的“好看”。而组件化的设计理念恰恰是最能帮助设计符合产品功能逻辑的,下面为大家带来详解最全面的组件化开发与设计指南,来看看吧
收藏 0 赞 0 分享

平面设计中相近性的应用技巧

相近性原则也取决于元素在背景上不同位置的放置,从而使人们获得各种不同的信息组合,而最清晰的效果就是利用白色背景来区分这些组合,今天为大家分享平面设计中相近性的应用技巧,来看看吧
收藏 0 赞 0 分享

相似的形状、颜色等其他特性在平面设计中的应用

在设计中相似的特性可以成为我们有力的工具,利用相似性,我们可以使两个相隔较远的元素在信息上联系起来,下面为大家详细介绍相似的形状、颜色等其他特性在平面设计中的应用,来看看吧
收藏 0 赞 0 分享

看看近30年奥斯卡最佳影片海报都长什么样子

今天为大家带来近30年奥斯卡最佳影片海报,看看都长什么样子,统计是从第59届奥斯卡开始的,因为之前的海报都太具有年代感了,对于设计朋友真的很值得过来学习,一起来学习吧
收藏 0 赞 0 分享

SVG格式的图片编辑修改方法

做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
收藏 0 赞 0 分享

如何创造出好设计?教你利用坏图创造出好设计

虽然说一图胜千言,一张好图会说话。但在设计师的实际工作中,甲方不少,好图难得,碰到客户给的是烂图怎么办?还想不想要高端大气了?如果你的回答是肯定的,那就来看一下今天分享的这篇好文,实例分析,不纸上谈兵,文中涉及很多实用技巧,非常值得新手设计师阅读呢。
收藏 0 赞 0 分享

设计师必须知道的17个行业规则

设计这行摸爬滚打十几年,林林总总各行各业的客户接触不少,由于中国应试教育的不足,导致不少人对这一行业工作流程缺乏了解。本文就为设计师总结了17个行业规则,希望作为设计朋友认真阅读,这样在以后的工作中可以少走点弯路
收藏 0 赞 0 分享

如何才能做出有创意的作品 什么是好的创意

作为一名设计师,常常面对各种创意需求,但创意这种东西,在有限的时间之内,常常是没有创意的、没有灵感的,这让许多设计师苦恼抓狂。本文就向设计师朋友介绍如何快速打造有创意的作品的一些方法和发散思维的办法,希望能帮助到大家
收藏 0 赞 0 分享

图文搭配技巧:给照片配上文字的十个方法

图文搭配是是平面设计的基本功。给照片配上文字,与平面排版有相通之处,但因为偏重不一样,所以处理方式截然不同。本教程就为大家介绍十个图文搭配的技巧,教程比较实用,推荐过来与大家一起分享学习,希望大家喜欢
收藏 0 赞 0 分享

UI界面中首字母大写和小写有哪些优缺点呢?

UI界面中首字母大写和小写有哪些优缺点呢?对于很多朋友并不是很清楚,所以下面小编就为大家详细介绍一下,不会的朋友可以参考本文,一起来看看吧
收藏 0 赞 0 分享
查看更多