设计师的自我修养---设计方法论

2018-03-31 AM 10:03.来自z-cool

(阅览)Read 2785

(调整字号)Size

16px 14px 12px


先思考一个问题——



其实不难理解,



方法论通常涉及对问题各方面的论述,包括环境、阶段、任务、目标、工具、方法、技巧等。通过一系列具体的分析研究、系统总结并最终得出较为一般性的通用原则。


再来思考下一个问题——



相信绝大多数设计师心里都有一个标准的答案——



学习方法论的目的是提升人们解决问题的能力,特别是在陌生领域尝试跨界的时候,应用方法论可以带来信心和有趣的过程。这有点像小时候老师经常说的“举一反三”,通过一件事情,然后以此类推知道其它许多事情,通过现象看本质。


形式上表现为方法论一般不能直接解决具体问题,只能提供一套找到解决方案的思路,最终是通过方法论和具体问题的结合产出解决方案。


了解了方法论这个概念之后,我们再来进阶细化去探讨「设计方法论」




设计是一项偏感性的创意性工作,对于方法论这类偏理性的理论,也许会有一些设计师存有疑惑——




对设计师来说,这是个很常见的一个场景:设计师与需求方面对有分歧的设计的时候,作为需求方不能准确描述问题所在,只有说“不好看”。设计师经常会被需求方以“不好看”理由虐待,不停的在修改设计稿,度过了一个又一个加班的夜晚。可作为设计师的你却找不到明确的理由去说服需求方,除了生气、苦恼、骂需求方傻逼,最后只能背负着设计师的称号,却憋屈干着美工的活。


所以,设计师学习方法论是很有必要——



用方法论来武装自己,助力提升设计价值。


了解了什么是方法论,也认识到设计师学习方法论的重要性,接下来开始进入干货环节了。



是不是迫不及待了,先看第一个——


菲茨定律用数学公式表示:


从一个起始位置移到一个最终目标所需时间(T),由到目标中心的距离(D)和目标的宽度(W)决定。


简单的理解,那就是——



设计师们看到这里,是不是对菲茨定律又有疑惑?



目前存在三种主流人机交互的方式:触摸式、语音识别和体感。在设计行业,无论是桌面端的键鼠操作,还是移动端的手势触屏,触摸式依然是目前主流的交互方式。


对设计师而言,研究菲茨定律,就是研究如何缩短触摸式操作流程时间,最终实现高效舒适的用户体验。



举几个菲茨定律应用的示例。

用Mac电脑的小伙伴对这个操作应该不陌生吧,就是应用了菲茨定律边角无穷大原理去设计的人机交互。



手机来电的界面,很熟悉的操作吧,解锁时来电点击接听,锁屏时避免手机在口袋的时候突然来电,掏出手机时误点击接听,应用菲茨定律反向应用,需要滑动到达目标,提高完成操作的难度,真是微妙又具备人性化的设计体验!


大家记住菲茨定律的关键字:目标越大、距离越小,越容易操作。


接下来,看看第二个方法论——



一般情况下,用户在进入一个网页、一个APP,或者阅读文章等,习惯性浏览方式基本是从左到右、从上往下的眼球Z型轨迹进行浏览。尼尔森曾对232名用户对上千个网站的浏览习惯进行观察,发现了普遍浏览者都存在的阅读习惯:极少逐行逐字阅读文字,越往下关注度越低,只寻找开头的兴趣点,如果发现喜欢的,会从当前位置水平线方向阅读,整体浏览轨迹呈现F型,这个就是尼尔森F视觉模型。


可以简单用下图来概括——



看完这个模型,设计师会不会有疑惑?



了解用户的阅读习惯,设计师在进行界面设计、信息排版的时候,结合F视觉模型,能更加有效直接传达关键信息。


我们常见的广告文案的排版,基本都遵循F视觉轨迹去做排版,关键信息往左上去排,目的是更高效去传达信息。


为了避免F浏览模式导致版面的右下角信息易忽略,设计师会通过混合排版的方式,打破固有的结构,有效避免F浏览模式导致的视觉疲劳。




总结起来,尼尔森F视觉模型的重点,一个是利用F视觉模型去有效传达信息,另一个是通过混合排版避免F浏览模式导致的视觉疲劳。


接下来,我们开始学习下一个方法论——



从字面的意思去理解:就是用直尺和圆规去画图。



理解了什么是尺规作图,接下来思考一个问题——



首先说明几点理解误区,尺规作图不是为了装逼而后期硬加上,也不是检验设计优秀与否的标准。尺规作图真正的意义,是一开始就用尺规严格规范设计,是对设计细节把控的辅助技巧,特别是对于像素级别严谨的界面设计,严格抠细节到每一个斜角、圆弧、间距、弧度都要做到统一美观。比起自己手动用钢笔工具去画和调瞄点,用几何图形去切既准确又快速,从整体到细节无一不充分体现设计师“工匠精神”。


怎样通过尺规去作图呢?



布尔运算是尺规作图的关键,做设计的都应该不陌生,就是图形的联合、相交、相减组成新的形状。


举几个经典的尺规作图的案例——


最常见的一个场景:商标设计。



另一个也很常见的场景:图标设计。



总结下尺规作图的关键点:从设计应用的角度去看,尺规作图是一种象征严谨的辅助性技巧。


接下来,我们来学习第四个方法论——



设计师对这个理论应该一点都不陌生。


关键字是0.618。


黄金分割比例还衍生两个新的视觉模型——



怎么理解黄金分割比例的实际应用?



跟前面提到的尺规作图很相似,黄金分割比例不是为了装逼而后期硬加上,更不是检验设计优秀与否的唯一标准,更多是作为辅助参考的线性模型。事实上,我们的大脑似乎本能地更喜欢使用黄金比例的对象和图像,是被公认为最具美感的比例。这几乎是一个潜意识的力量,以至于哪怕为图像作更接近黄金比例的微妙调整,对我们的视觉美感也有很大正面影响。


怎么去使用呢?



举几个例子,黄金分割比例模型一般常用于非轴对称的广告设计。




界面设计也会参考黄金分割比例去制定尺寸,让整体视觉更协调、更具美感。





通过以上案例分析,能深刻学习到黄金分割比例的应用意义,它更多是一种辅助参考的模型,通过更接近黄金比例的调整,哪怕是微妙的,也能对我们的视觉美感有很大提升。


打铁趁热,我们继续学习下一个方法论——



跟黄金分割比例很相似,但又有所区别。



在上面展示的模型的基础上,把关键信息的重心分布在四个交点上,或者黄金分割线上,这样更符合人的审美习惯,达到突出主题并让画面更协调的目的。



跟前面提到的尺规作图和黄金分割比例一样,三等分构图更多是作为辅助参考的线性模型。该模型应用在摄影或轴对称的排版比较多,目的是为了突出主体,让版面平衡感更强。



我们来看几个案例加深理解——



也可以应用在非轴对称的信息排版设计中。



界面设计工作中,我们也常常借助三等分模型去辅助排版,让版面更加平衡,突出主体,视觉感更符合主流审美。


举个空状态页面的例子,一般情况下,绝大多数设计师都是凭感觉去做排版——



是不是感觉总有那么一丢丢画面的重心往下掉?



套入三等分模型优化后,只需要往上移动空状态图标那么点高度到黄金分割线上,是不是就感觉整体视觉平衡感更加协调了呢!


到这里已经分享了5个方法论,个个都是信息量满满的,小伙伴们一定要好好吸收,并能应用到我们设计中哦。


接下来继续下一个——



从字面的意思去理解,就是人的眼睛可观察到角度和视野清晰度的关系。看下水平视线和垂直视线的模型。



从上面图例可以了解到一个关键信息——


比如桌面端大屏幕、大尺寸画布印刷品等可视范围大、人眼无法一目了然的设计,要想保证最优视觉传达体验,浏览者一眼关注到关键信息,就需要综合考虑人眼视度的应用。


人眼平视最佳转动区在30-60°,垂直视线最佳转动区为30°,超过30°的区域就看不清楚了,需要转动脖子才能看清。所以,要想快速抓住用户视线,就要保证设计焦点在精准区内,从而锁定用户视线,达到最优视觉体验。


怎么去计算30°人眼精准识别区呢?



我们可以把这公式应用到很多场景,比如网页设计,我们设计的显示区域要设置多大的尺寸,用户浏览网页的视觉体验比较好?



还可以应用在一些线下物料的设计,比如X展架,我们了解了人眼精准识别区间,可以在进行设计过程中,把关键信息集中在精准识别区内,快速抓住用户视线。



目前无论是屏幕尺寸,还是分辨率都越做越大,但是依然有很多知名的网站,为保证最优的阅读体验,最大板块展示宽度依然设置在人眼识别区内。




以上案例说明,学习人眼视度的理论,可以辅助设计师更加有效进行信息排版布局。


接下来我们继续来学习下一个理论——



大家看这个理论的名称,可能感觉比较陌生,但实际上却是一个很常见的一个方法论,相信看到下面模型就豁然开朗了。



也叫做四象限(十字)模型,最初建立该模型是用于做时间管理计划,把自己要做的事都放进去,然后先做紧急重要那一象限中的事,用来提升工作效率。


实际上,我们也可以通过四象限(十字)模型用来处理时间管理以外的事,比如界面设计。


当设计师面对一个元素较多的界面的时候,可以通过该模型,有效快速化繁为简,分清主次,同时结合其他设计原理,最终使界面的设计表现更符合用户操作体验。


关键字就是——



举个应用实例,我们尝试去优化下支付宝的蚂蚁庄园。


个人觉得目前的蚂蚁庄园操作按钮布局层面上存在几个明显的问题:可操作的按钮越来越多,可玩性越来越高,相对操作就越来越复杂,对新手友好度越来越低,甚至有些重要且高频的操作放在了不易点击的区域,比如加速喂食速度的道具按钮等等。新人第一次进去游戏,可能最大的感觉,我是在哪里?我要干什么?得花不少时间点击操作去熟悉,甚至要仔细阅读操作说明才能弄懂规则。这次优化的方向,是做到“奶奶都会玩”的用户体验程度。


首先分解布局层元素。



然后建立十字模型,分为重要和操作频率两个维度,把界面功能操作进行分组,再排优先级分布放在四个先后等级象限内。



结合前面学习的菲茨定律,按优先级先后把操作按钮放进去操作热区模型,重要且高频的操作放在易操作的区域内,最后优化完的布局层,视觉上更具备游戏易操作的特性,对新手友好度提升,奶奶都不用看说明就知道怎样玩了吧。



这是个典型的结合多个方法论去解决问题的案例。


接下来继续学习下一个方法论——



怎么去理解配色黄金法则呢?




氛围色


可以理解为背景色,一般选用中性(黑白灰)或带灰调的色彩,不会抢占过多视线,起到烘托氛围效果。



辅助色


可以理解为配角色,相当于催化剂,在背景色中有存在感,但又能加强主强调色的视觉效果。可以不保留,配色比例可以调整成80%氛围色、20%强调色,即82法则。



强调色


可以理解为主角色,简单来说,它就是万绿丛中一点红,人群中你最爱的那个墙头!大胆用那些妖艳贱货色彩吧,大红大绿大紫,想用就用!当然了,设计一般以品牌色为主,可以单色,也可以双色组合或渐变色。



该理论不仅仅是广告界的宠儿,实际上——



色彩除了表达情绪、承载品牌信息外,更多是在构成版面设计的同时,形成对比,突出关键信息。不同色彩比例的组合,特别是在需要展示的信息较多的应用界面,需要考虑如何在有限的版面更直观、更高效传达重点信息,并能给浏览者留下深刻的记忆。


越来越多的APP也逐渐参考6/3/1配色黄金法则进行配色,以60%灰调背景、30%信息传达、10%强调色的黄金比例组合。在有效传达关键信息的前提下,10%的强调色更是承载了品牌信息的同时又不破坏整体视觉重心,起到画龙点睛的作用。


举一些应用实例——




我们再来对比下,同一个界面,但是不同的色彩比例,按照6/3/1法则配色的方案是不是最佳的选择?



很明显的,左侧配色方案过重的强调色有点画蛇添足,甚至是喧宾夺主的感觉;右侧方案比例的强调色,起到画龙点睛的作用,保证了界面信息高效传达的同时,又不破坏整体视觉重心。这也证明了配色黄金比例的实用性是经得起考验的!


已经分享完8个方法论了,接下来这个方法论,除了排序是第9个,内容其实跟“9”也有关系的,继续往下看——



什么是米勒7±2法则呀?



为了更加深刻去理解这个理论,先来思考回答下面几个问题——




以上两个问题的目的,是做个小实验证明大家记忆手机号码或身份证号码的方式,实际上都是大同小异的——


在生活中,我们经常会把一长串的数字分割成7个左右的数组来记忆。


这样会使记忆难度降低很多,米勒称这种单位为“组块”。我们学英文时由字母到单词,由单词到短句,有短句到长句的记忆方式也是利用7±2法则,将零碎信息变成组块记下来的。



米勒法则怎样应用到设计中?



举几个例子——






以上案例可以看出来,米勒7±2法则,几乎是业界不成文的定律,应用在设计的各个领域。我们设计师在设计过程中,也要尽量去遵守,才能更加有效传达信息。


到这里,全部9个理论已经分享完了,回应上面提到的米勒7±2法则,事不过“9”嘛!


最后,再跟大家啰嗦一下方法论之外的话题——



作为设计师,我们首先要清楚,我们的职业和职责是什么?



也许会有人疑惑:“前面提到那么多方法论,似乎很多都是偏向交互岗位的,跟界面设计或视觉设计关系不大呀!”。如果从事设计的同学也有这样的感想的话,这说明一点,对自身工作的认识还不够深。界面设计师除了加强本身表现层设计水平外,更应该在交互结构层的基础上,最大化优化布局层,最终目的是达到最优视觉体验效果,而不是仅仅停留在表现层面。



除了学习设计方法论,还有一些知名设计心理学,比如尼尔森原则、格式塔原则等等也应该熟读掌握。在工作中我们应当把这些定律巧妙运用到设计中,结合设计方法论,贯穿在我们的UI设计中,最终设计出用户体验好的作品。


那么,问题又来了——



我们可以参考以下的金字塔模型来考核自己——



记住关键的点,我们是做商业设计的设计师,商业价值是结果,是建立在设计师专业认可、普遍用户认可的基础上实现的。


设计方法论,让你的设计有理论支持,让你设计思维更专业,助力提升设计商业价值。


0371/8622 0001

weekdays :   -am. 09:00-11:30
-pm.14:00-18:30 Open Hours

中国郑州 郑东新区金水东路与中兴路交汇处楷林IFC /A座 -17F-1713

Room1713 Building A,Kineer IFC,JinShui East Rd.
Zhengdong New Area,Henan,China