小小的项目总结

原创文章 分类: 经验/观点 版权:
323 1 0 0
2018-11-06
1.2
普通推荐

公司App新增课程培训功能入口,需要进行一系列相关设计,完成设计后来回顾整个项目以及进行一些相关总结,该功能现已上线。


了解业务


项目名称:课程培训(H5)

目标用户:企业管理员、企业或外部课程讲师、企业员工

体验场景:管理员后台管进行课程及讲师管理,员工通过最福利入口查看、购买、学习、评论、收藏课程等

同类产品:网易公开课、网易云课堂、知乎大学等


说在前面


按照以往工作习惯,我在设计的时候往往会从主页入手,通常的设计流程是大致过一遍交互,在脑海中有一个印象,然后在网上搜集相关优秀设计素材,这时往往会找一些想要尝试和突破的风格。而在主页里,一般会更先摸索和确定icon 的风格。

接下来,我将从三个方面来分析和总结这次项目。

Image title

1.颜色


在最初设计时对需要使用的颜色进行思考,并尝试用代表商务的蓝色或是友好的绿色来对首页入口icon的设计(此区域为最大面积使用主色的部分),但经过几次尝试后,发现效果并不理想。

虽然项目定义为课程培训,真正的目的却是希望用户去购买课程,从而产生利益。鉴于此项目的入口在公司的主品牌”最福利APP“里,于是考虑到品牌色——红色。


主色


品牌色的红色为了突显品牌的调性,在众多产品中更为突出和显眼,采用的红色更为鲜艳和活泼。显而易见,在此次项目中并不适用。于是,对颜色进行了调整,使得更为柔和。

Image title


辅助色


辅助色一般用于主色外的所有场景,包括但不限于背景、文字、icon、分割线等等。在此次项目中,文字的颜色并不在我的考虑范围内,我采用的是目前设计一贯用的#333333# 、#666666#、#999999#。


这次的项目用色特殊在于首页入口icon,我采用了2-3种颜色,且包含了渐变。另外对于一些个别按钮也进行了渐变的设计。

Image title


我把项目中用到的颜色进行了整理(如上图),不整理不知道,一整理才发现我竟然使用了如此多种深浅不一的灰色,使用范围从文字、按钮、icon、分割线到标签等


问题随着整理渐渐浮出了水面,颜色的滥用以及不严谨使得设计会出现不统一,不协调。虽然这些问题用户在使用的过程中并不太注意到,亦或者这些问题在开发人员实现的过程中进行调整。但避免这种侥幸心理是设计人员应该学会的。


2.风格


如前文提到的,我在接到交互需求的时候,会先把需求过一遍,再着手首页的设计。找优秀的参考素材,从icon风格到排版布局、信息的展示,甚至到页面中的小元素。


图标


图标作为界面设计中重要的组成部分,不仅需要辨识度,美观和友好也必不可少。icon 的风格发展到现在也是多种多样,从早期的拟物、插画、实心到轻质感、线条、强烈的色彩对比。无一例外,都是为了在辨识度的基础上,增加强烈的品牌风格。


在这个项目中,我收集和查询了一些样式和风格不同的icon。往往在开始新项目时,我都尽力尝试创新和改变。

Image title

参考有了,开始设计,于是有了version 1.0:

Image title由上可见,效果并不理想,甚至不理想到我都没有勇气完成它。于是,有了接下来的版本:

Image title

在这过程中,描边尝试了从一像素到两像素到三像素,图形一再推敲和思考,除了红色外,颜色也是一换再换,最终效果如下:

Image title

遇到的问题以及解决办法:


鉴于图标的不规则,容易出现视觉上的大小不统一,尽管我花了很多时间去调整,使他们看上去一致,但在前端实现的过程中,这一问题还是暴露出来。在前端实现的过程中,无法做到icon同等比例的放大和缩小,较规则的图形放大缩小的比例会更明显,而不规则的则会显得比别的icon大很多。


对于这种情况,我对几个在适配过程中出现比例失衡的icon进行的再次调整,真机测试,最后才接近理想状态。


规范


设计中规范的重要性不言而喻,在项目开始的时候,就应该有意识的去对自己的设计进行规范,包括间距,大小,颜色等。


在团队人数较多,项目集中的情况下,可制定一些设计规范和组件库,不仅方便设计师的使用,更便于整个设计团队和开发团队的沟通。开发也能直接调用组件库,高效便捷。


这是我在公司与前端人员合作实现的规范组件库,尽可能的考虑到多种使用场景和方式,设计和开发人员都可以借鉴和使用,保持项目的一致性。


众安保险组件库——https://zarm.design/#/


关于规范和组件,我就不多说了,网上很多相关的文章。最主要的是做到设计的一致性和统一性,同时兼具可用性。


3.情感化设计


顾名思义,就是引发一系列用户情绪的设计,从苦恼,愤怒,紧张到愉快,快乐,放松。当然,我们在设计的过程中更多想要出发的是用户的正面情绪;反之,要避免的是用户的负面情绪。

Image title

情感化设计作为一种工具,最大化的发挥了设计师的创新和思考能力,我们常常在设计的时候会受限于很多因素,而无法实现我们想要的视觉效果,但情感化设计在一定程度上缓解了这一问题。


在这里,我并不想具体分析情感化设计,感兴趣的朋友可以阅读:


《情感化设计》——https://book.douban.com/subject/1314262/

 

情感化设计的目标是要起到传递情感、勾起回忆,通过与用户间的互动,来影响满意度,形成对品牌的认知。在UI设计的过程中,我们往往希望达到使用户对产品产生兴趣甚至是忠诚,在某些特定场景减少用户的焦虑感,增加趣味性。


情景化运用的场景很多,也很普遍,诸如引导页、空态页、加载动效等。不幸的是,此次项目除了几张空态页以外,并没有设计到别的。


那么,既然情感化设计这么重要,为什么我们还是常常会忽视它


1.项目时间有限,功能及业务优先原则;

2.虽然情感化设计会带来好评,但并无数据表明情感化设计起到明显作用;

3.开发对于与用户之间进行微交互的方式不重视,常常只是设计人员的自我狂欢;


正因为很多情况下情感化设计的可有可无,我们常常会忽视甚至省略,这也是设计人员在项目进行中需要依据情况来平衡的一点。


总结


我常常会在设计的过程中陷入自嗨中,但当回过头来看设计的时候,总觉得这里可以更好,那里可以更好。当然,这其中不免有一些外在的因素,如周期太短,或是需求一再修改。但有没有一些方法可以避免或减少这些情况的发生,还需努力...


最后

衷心鸣谢 我叫小梦婷——https://www.ui.cn/detail/414900.html 文章给予的帮助,在我进行项目梳理和总结的时候,起到了很多的帮助和作用。




锖青瓷

看什么,还不去工作~~

0粉丝/1关注

宣传漫画

锖青瓷

锖青瓷

看什么,还不去工作~~

扫描二维码
去手机端查看海报

锖青瓷

TA已经获得0枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN