美文网首页
提纲挈领!UI设计师知识体系梳理

提纲挈领!UI设计师知识体系梳理

作者: 小浣熊猫 | 来源:发表于2018-08-01 22:09 被阅读0次

    写在前面

    UI设计师,这个职业发展至今已经有十几个年头了,开始逐渐走向成熟。我们获取知识的途径也越来越多。“超全面设计指南”、“学会这一点,从此不迷茫”、“快速掌握”、“干货大合集”、“BAT设计师都在用的视觉技巧”等等字眼统治了各大设计网站。乱花渐欲迷人眼,在庞大的信息碎片面前,我感觉到了无力——为什么天天看“干货”还是抓不住精髓?为什么学好了这一点,还是会迷茫?超全面到底有多全面?为什么每一篇文章标题都可以这么劲爆,而内容其实“新瓶旧酒”?

    未知的迷茫,就像黑暗对于孩子。我想,是时候整理出自己的UI知识体系,做好自己的规划,不再被碎片化的所谓“干货大合集”扰乱思维。


    分类的方法很多,这里我会根据产品开发的时间顺序梳理UI设计师在每个阶段需要掌握和运用的知识点。我对于本文的定位是一个目录,每个分类的内容点到为止,之后我会再根据目录中的内容按重要程度深入学习。


    1.需求阶段

    一个产品的出现源于用户的需求,需求对于产品来说是至关重要的。作为设计师,也需要了解需求的产生和分析,这样才能更加有理有据的做设计(怼产品)。对于这部分内容,了解即可,不需要过于深入的研究。

    1.1 用研常识

    界面的最终面向的是用户,用户研究对于界面设计来说,就像是地基对于高楼一样重要。了解用研的基本常识有助于更好的理解用户。

    常用的用研常识有:用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈和大数据分析等。

    1.2 产品常识

    了解产品是做好产品的第一步,要对于产品的需求如何确定、产品定位如何决定有一个基本的认识。

    常用的产品常识有:产品设计的五个层面、产品定位五步法、产品设计的三要素、马斯洛需求理论、KANO模型、Censydiam用户动机分析模型。

    1.3 商业常识

    常用商业常识有:竞品分析、增长模型、精益画布。

    1.4 心理学常识

    了解心理学的相关知识有助于我们把握用户的心理状态。

    常用的心理学常识:认知心理学、格式塔心理学、色彩心理学、心流状态。

    2.交互阶段

    交互设计与视觉设计密不可分,有时,在视觉设计的过程中也需要修正一些交互的问题,因此,积累一些交互设计知识是必不可少的。这部分内容需要熟知。

    2.1 产品架构

    产品的架构就是产品的骨架,就是信息架构。产品类型不同,架构的复杂度也会不同。对于不同类型的产品需要使用合适的架构。

    · 产品架构的模型主要分为层级结构、自然结构、线性结构、矩阵结构。

    · 产品结构的特性:易用性、稳定性、可扩展性

    2.2 交互设计三要素

    目标、任务、行为

    2.3 可用性原则

    尼尔森十大可用性原则:状态可见原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫视原则、容错原则、人性化帮助原则。

    2.4 可用性测试

    掌握几种常用的可用性测试方法,可以帮助我们作出较好的决策。

    常用方法:走廊测试、远程可用性测试、专家测试、纸质原型测试。

    3.视觉阶段

    对于视觉设计师来讲,视觉能力当然是所有能力的重中之重,这部分涵盖的信息非常多,需要深入的研究掌握,并在平时工作中熟练运用。

    3.1 各平台设计规范以及基础控件

    各平台规范对于实际的设计工作会有很大的帮助,目前主要需要了解Android、iOS原生系统设计规范、web设计规范等,同时也需要关注一些新平台的出现。

    系统控件也是需要熟练掌握的部分,例如:按钮、导航栏、状态栏、toast、弹窗、输入框等。同时,不要忽略页面的异常状态。

    3.2 字体

    需要了解不同平台的默认字体以及常用字号。对于不同字号的使用,要注意既要能够达到区分层级的目的,也不能使用过多过细的字号层级,以免产生凌乱感。

    此外,还要掌握字体设计的方法。

    3.3 图标设计

    图标是界面的基本元素之一,对于任何App或网站都是很重要的。好的图标需要注意:识别性、易用性、一致性、独特性、吸引力。

    3.4 配色原则

    色彩可以决定界面给用户的第一感觉,做好配色需要:

    · 熟练掌握运用配色原则;

    · 结合品牌特性选择合适的配色方案;

    · 熟练掌握主色、次色、辅助色、背景色直接的搭配比例。

    3.5 排版原则

    页面排版最重要的是要有效地组织信息。

    排版四大原则:亲密性、对比、重复、对齐。

    3.6 动效设计

    动效可以更加生动地展示系统状态,还可以为页面增加不少趣味。动效的样式非常多变,但是万变不离其宗,那就是——迪士尼动画十二原则:

    · 挤压与伸展                · 预期动作                   · 演出展示    

    · 接续动作与关键动作    · 跟随动作与重叠动作    · 渐快和渐慢    

    · 弧形                         · 附属动作                   · 时间控制质感    

    · 夸张                         · 手绘技巧                   · 吸引力

    这十二条动画法则可以帮助我们更好的做出有创意的动效。

    3.7 设计工具

    设计工具不用多说,一般PS、Sketch、AI是常用工具,另外做动效可以使用AE、principle、flinto、Framer等。除此之外,还要经常关注新工具的出现,毕竟长江后浪推前浪。

    3.8 审美水平

    审美水平直接决定页面的视觉质量。在平时,除了要多浏览相关网站学习大神们的作品关注设计趋势之外,还需要在生活中多留心,从不同的行业中汲取营养。

    4.开发阶段

    设计完成后还要关注开发实现的问题,否则再好的设计也是空中楼阁。这部分内容需要熟知,至少要能够用相同的语言与开发小哥哥们更好的沟通。

    4.1 前后端基础知识

    了解前后端的基础知识主要是为了方便与开发小哥哥沟通,节省大家的时间。主要需要了解前端布局的知识和数据埋点的基础。

    4.2 协作方法以及工具

    这部分知识主要解决协作效率问题。

    · 项目文件管理方法:可以根据自身情况按照时间、项目、版本或终端维度划分。这件事上没有绝对的正确,最重要的是要适合自己并且有一定的准则,方便查找和分类即可。

    · 标注与切图规范

    · 协作工具:现在出现了很多好用的协作工具,如:zeplin、蓝湖等,释放了大部分设计师切图标注的工作量,十分便捷,需要时常关注一下。

    4.3 设计走查

    设计走查是保证设计还原度、进一步优化用户体验的重要环节,在这一环节要注意:页面的一致性、方案的可用性、文本的可读性、不同屏幕上的易用性、屏幕对于颜色的影响、icon的可识别性、动效的使用。

    5.反馈阶段

    产品上线后要关注后续的反馈,以便进一步发现问题、迭代产品。这部分内容了解、做到心中有数即可。

    5.1 用户反馈

    获取用户反馈的渠道主要有:

    · 通过客服;

    · 通过产品论坛、QQ群、微博等社交工具;

    · 应用商店直接评论;

    · 应用内用户反馈入口。

    可以不时关注一下用户反馈,以便培养站在用户角度考虑问题的思维习惯。

    5.2 数据分析

    产品好不好,还要靠数据说话。做好数据分析可以帮助我们把握正确的设计方向。

    常见概念:SEO/SEM、访问路径、用户行为路径,浏览量、访问量、独立访客数、跳失率、转化率、页面停留时间、访问页面数、流量来源、流量来源ROI、留存、留存、平均使用时长等等

    常用方法:Link Tag的流量标记、转化漏斗、微转化、A/B测试、事件追踪、DOSS分析法等等。

    6.软实力

    做好设计工作还需要一些看不见的软实力。

    6.1 素材库管理

    素材库包括但不限于图片、图标、配色、规范、建模等,还自己需要根据个人的需求对于上述各种方面的知识进行梳理,让素材库成为灵感源泉和弹药库。

    6.2 沟通能力

    与上下游沟通、与用户沟通。

    6.3 理解能力

    对于需求的理解、对于公司品牌战略以及产品的理解。

    6.4 表达能力

    有将自己的设计主张表达出来的能力,做到能够有理有据的说服人。

    6.5 更新的态度

    随时做好准备接受的新的方法、理念,并主动学习。

    6.6 做人方面

    注意要诚实守信(真的见过两面三刀的设计师,叹为观止,具体就不吐槽了,噗~)、对人宽容,工作积极、细心,有分享的态度,最后,抗压抗挫折能力对于设计师尤为重要,要有一颗强大的心脏。


    写在后面

    《双城记》中说:“这是最好的时代,也是最坏的时代,这是智慧的时代,这是愚蠢的时代。”多种多样的信息渠道使得我们可以随时随地获取自己想了解的信息,而随之而来的问题则是如何分辨信息的质量,在这样的时代中,唯有建立起自己的知识体系,才能提纲挈领,拨开迷雾。

    相关文章

      网友评论

          本文标题:提纲挈领!UI设计师知识体系梳理

          本文链接:https://www.haomeiwen.com/subject/adrdvftx.html