视觉设计不懂业务时如何着手设计?

信很多视觉设计师 会有这样经历,当接触到一个新的项目;如果是熟悉业务类型产品,设计起来轻松熟络,如果是一个陌生的业务类型,则需去摸索与尝试,找到合适的设计定位与视觉风格。当视觉对交互的业务性质、框架逻辑、层级关系不熟悉时候,视觉效果是画出来了却漏洞百出.

信很多视觉设计师会有这样经历,当接触到一个新的项目;如果是熟悉业务类型产品,设计起来轻松熟络,如果是一个陌生的业务类型,则需去摸索与尝试,找到合适的设计定位与视觉风格。当视觉对交互的业务性质、框架逻辑、层级关系不熟悉时候,视觉效果是画出来了却漏洞百出.

1、交互会问:上下两个表格为什么用线分开?两个表格均指index trend,分开都不是从属关系了..

视觉设计不懂业务时如何着手设计?

2、前端会问,以下按钮是左右无限循环吗?还是说左右只能按一个?还有它的不可用状态又是什么?

视觉设计不懂业务时如何着手设计?

3、在交互上是有翻页效果,怎么视觉效果上没有呈现?

4、下面几个折线图是属于上面对应所选中的指标,视觉上感觉不对呀?

5、上传包用圆环图方式呈现,那几十个上传包岂不是几十个圆环图,还是进度条好点吧?

如果不熟悉业务,视觉上从框架结构到细节跳转都经不起推敲;缺少业务探究过程与对每个细的深思熟虑,用户体验会好么?

作为一个视觉设计师, 在设计开始前-设计过程中-设计结束都需花心思与时间去了解产品业务,统筹性的输出。能熟悉产品的信息架构、界面逻辑、元素所指,视觉表达能直观清晰,让 用户使用产品时、体验它认同它、并产生愉悦即是成功--而懂业务是体验的基础。这一过程是需要花心思与技巧的。下面一起分享一下其过程(主要指PC类业 务)。

一、从熟悉业务系统开始

不懂业务流程视觉同学拿到交互稿一看,框架结构复杂、海量的信息内容、80%的专业术语与量词都是没听过的;怎么办?先找se/产品经理看需求文 档,看不懂没有关系,起码先对需求混个眼熟;接着独自开始熟悉交互稿流程,大概了解产品的业务逻辑与核心场景,心中有个路线;试着理顺那繁杂的流程,记录 不明白的点;再找交互设计师对稿从头到尾听讲一次,过程中不懂的即问;在大司很多时候过40页的tob类交互稿需要2小时,更复杂的可能是一个上午的时 间。

总之,在视觉设计前主动投入学习成本,看懂交互说明,做好充足准备;toc业务产品到tob业务产品系统,有时候其繁杂程度就像玩游戏通关,过一个级别难度高一点,等通关完毕游戏顺利结束,也胜利了。你们准备好了晋级吗?

二、系统且有目的学习过程

上面讲到视觉设计师熟悉交互稿过程中,将不懂的步骤和细节问题记录下来,再与交互设计师对稿拉通,讲解交互逻辑。这里需要理清的具体内容包括以下几点:

1、产品的类型(toB or toC产品)/ 定位风格/核心功能;心中有个大致的方向

2、布局方式(上导航下内容、左导航右内容等),是否看到了让用户清晰知道自己所在的信息结构中的位置,深度与广度之间合理性,能否找到页面跳转的快捷入口;每一个页面都能清晰了解位置所在则上下链接。

3、业务框架逻辑与流程,正如《用户体验要素》的框架层,整体界面设计、导航设计、信息呈现设计,因为到了这一步,需要看到真正能呈现给用户看到的东西,确定其功能范围和页面各个模块的层级关系。

4、页面承接关系(如:点击、反馈形式、链接、跳转、下钻、弹出框、tips等)

5、细节控件的状态(如:焦点/默认状态、可以/不可用状态、点击/非点击状态、默认/鼠标经过/选择状态、默认/放大状态、停止/开始状态等)

6、挑选典型页面or是否全量输出

三、有根据的理性思考

理清以上步骤后,对交互有了一个较为大概的思路,即使不是100%清晰但也有了一个可以发散的视觉设计方向。

1、理解业务,产品定位确定后;

开始视觉风格的思考,即《用户体验要素》表现层,视觉设计和内容优化。开始设计是有意思的,商业需求的了解和用户的目标的认清才能做出合理的设计, 表现是最终产品气质的体现。如toB或许是严谨的/数据的/理性的/视觉表现力应该有所收敛的/or toC的应该是感性的/色彩较为丰富的/图形化的/生动的…

2、是否有设计规范的?

如果有,是否要求根据现有的指导性设计规范来进行设计?100%遵循规范?or80%?还是细节控件?还是说不需要遵循规范,只是统一风格即可?由于每一个产品的设计定位与思考逻辑都是不一样的,基于当前的设计规范是否适用满足与支撑现业务产品的视觉设计,都需理清楚。

视觉设计不懂业务时如何着手设计?

记得来大司接触的第一个设计项目是平台管理类型产品,且基于现有的设计规范——AgileUI进行设计。在设计之前需要花时间逐一去熟悉规范和理解规范,并在规范的基础上进行视觉输出。

3.运用设计规范来指导设计,存在它的两面性

设计规范一般是具有指导性意义,且设计人员进行设计时必须遵守的规定;设计规范具有统筹性作用,可用性原则和审美常识下避免犯错的方法,可保持设计印象的延续性。但运用规范同时也存在它的双面性。

优点:

视觉设计输出的效率高,出错性少;

高效率的也看输出,利于项目的快速推荐;

基于项目经验,开发难度小,技术可实现性强;

版本输出时间成本低,项目迭代次数快,项目成本相对较少;

缺点:

视觉设计师的设计水平发挥收到限制

挑战度低,一直遵循规范设计久而久之会感到枯燥,想打破这种设计模式

因此,在项目中遇到设计规范需要遵循时,请在有限的空间中尽量发挥自己的设计才华,从细节处致力用户体验的提升。

四、经过前期熟悉、了解、思考、定位后,则开始主体视觉的风格预言

1、先确定视觉的分辨率

即我上一篇文章提到的“设计启动前了解多端的适配情况(分辨率/屏幕精度),综合考虑优先出什么分辨率”。打个比方,如果是pc的话,是固定一种尺 寸大小,页面大小是否与现今门户网站一样的分辨率?还是一套响应的分辨率,自适应于 1680or1920的屏幕?

2、分辨率需与交互共同商议

分辨率问题,请不要轻视之,与交互一商议。别输出了十几个1330度分辨率页面后,交互再来告诉你业务需求固定分辨率是1440!那么十几页视觉页面需要重新调整,有卡片呈现则需要重新计算像素比例等,再调整页面元素控件之间的位置,即浪费时间也耗了精力。

3、细节问题记录下来,再跟踪,澄清

在具体深入设计的时候,肯定会遇到更多细节问题,这主要视觉设计师适时纪录,逐一找交互澄清问题。

打个比方:如卡片上的标题文字,一开始视觉效果只能放下一行中文字,那么具体数据或英文版本时会是两行吗?如果是,怎么解决?解决办法是:找交互设计对好呈现的情况,如果是确定有英文版与恁多的保持一行显示不下是省略。。还是说设计则考虑两行的方式?又或者如下图所示:

视觉设计不懂业务时如何着手设计?

视觉设计在出稿过程需要与交互针对视觉每一个细节进行考虑并商榷,因为商榷,出了视觉稿;以上页面有10都有卡片,则需要改动十个页面;所以尽量的提前关注细节、沟通解决,尽量提高输出质量。

4、初次评审

规范的遵循,组件的合理利用,可以增加视觉输出的合理性与效率。视觉典型页面出来后,组织se(产品经理)、pl、交互、视觉、开发可以进行初次评 审,目的是确定产品视觉风格,以及后续设计方案的可行性;如果第一次视觉设计风格已经敲定,那么后续沿着风格进行即可;否则,视觉设计师则再进行视觉风格 的探索-设计-评审-定稿-方能开始后面设计。

五、讲究方法让视觉设计有序进行

当视觉设计风格敲定后,后续的设计则按计划行事,推进项目的进程。

1分模块/按优先次序铺量输出,定期进行视觉评审;让交互直观指向问题,视觉跟进与迭代输出;

2、输出页面命名的规范性/与交互一一对应拉通,形成合格的交付文档,在这里可以展开为以下几点:

  • 可以建立视觉页面输出跟踪表,交互整理输出条目,并进行编号;视觉跟进表格,完成一个勾选一个,形成可预见的文档输出;
  • 视觉页面psd文件一一对应视觉页面png文件,避免一个psd对应多个png的情况;这样可避免前端或开发查找文档找不到;
  • 视觉规范指导开始时,保持视觉逻辑与开发逻辑的一致性。

六、结语

作为视觉设计师,在开始设计前也请花心思与时间去了解产品、熟悉业务性质,不要输出一些没有意义的设计,让页面中的每一个设计元素确实传达其具体含义。

 

原文来自:优设

作者:@candice_7777

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29359/

(0)
CatherineCatherine
上一篇 2017-05-23 23:24
下一篇 2017-05-24 02:27

相关推荐

  • 美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • [交互设计]2015最有趣的动效!(请在wifi下观看)

    以下优选Medium部分交互设计素材,拿去不谢! 切记wifi下观看! Kick Push by Markus Magnusson Wizard Clap by Markus Magnusson Rambow by James Curran Depressed Slurp Cycle by Jona Dinges A rabbit flying i…

    2015-12-02
  • 译文|优秀用户体验设计师该具备的8个习惯

    用户体验设计 界有个流传甚广的段子:美国太空计划和其对于反重力笔的需求。据报道,美国人花了几百万美元用于研制一种使用固态墨水写字的高科技笔,这种笔的墨水平时固态的,但写字时的压力会让它变为液态从笔尖流出,所以这种笔倒着也能写出字。然而俄罗斯的航空员则直接使用铅笔。

    2017-05-26
  • 铃木说马云的双11是错的

    铃木敏文:“判断项目是否可行,应该由用户立场出发,以用户视点深入考察是否符合需求。一旦决定开拓,就一定要坚持到底。”“海星有一种特殊的能力——再生。它的腕、体盘和管足受损或自切后,都能够重新生成一个新的海星。因此,它对环境的适应能力和生存能力都特别强。”铃木敏文:“冬天,北海道地区的店准备了大量空间贩卖冰淇淋。“
    当地生意人纷纷嘲笑说:“谁会大冬天里吃冰淇淋呀!”
    但是,铃木说:“家里暖气开得很足,如果能吃上冰淇淋,客人应该会很开心吧!”铃木敏文:“红豆糯米的美味之处在软糯口感,但在它刚被研发成型时,试吃过后并没有尝到糯糯的口感,于是找到研发告诉我制作红豆糯米的方法和普通米饭一样是用锅煮熟的,因而导致口感上有所差异。铃木训斥他说,红豆糯米本身应该以蒸笼蒸制,为什么不采用正确的方法呢? 原来,当时的 生产工厂并没有以蒸制大量糯米的工艺和设备,因此选择了和普通米饭相同的做法。 我要求他们改变制作方法,引进新设备,力争做出原汁原味的糯米饭团。开发团队对糯米的种类、 淘洗方法、浸泡时间、红豆的选择、煮法等所有的要素都重新研究,克服了好几个难关,终于让这一 产品 获得了极大的成功。”铃木敏文:“如今已最新的第六版的投资高达500亿日元,这些年IT的总投资金额已达到3000亿日元。商品库存数据、POS数据、缺货数据、报废数据,在第六版系统中,7-Eleven开始为各家加盟门店订货提供三项数据,以作为协助成立假设的参考,分别是立地数据、设施数据和长期数据。“立地数据”是指调查各门店周边(半径350米,徒步5分钟以内的)的家庭数;如果有商户的话,就调查其员工人数。“设施数据”主要了解自家门店周边是否有学校或医院之类的设施,这对于日常订货作业的假设设定都能提供一定的帮助。他们还根据过去的数据呈现出有关趋势及动向的数据,提供“长期数据”。”

    2017-05-02
  • 3步帮你搞定PRD文档

    很多新同学问道写PRD文档时不知如何下手,在这小编整理了一下如何搞定PRD文档的思路,还望对大家有帮助,这样也就值了。 一、理解什么是PRD? PRD:Product Requirement Document,产品需求文档,可以看出它是用来…

    2015-06-05
  • 从9个方面聊聊用户体验设计的发展

    今天饿了么UED的小满同学给大家翻译了一篇国外的用户体验 设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很有可能成为未来优秀设计师必备的硬能力。在甲方的阴沟里待久了,来仰头展望下真正「以人为本」的设计思考。

    2017-05-29
  • 圈圈的Visio星球大战-交互设计那些事儿 阿西UED 交互设计实用指南方法与提升秘诀解读 交互设计工作思路与设计技巧书籍

    交互设计那些事儿 阿西UED 交互设计实用指南方法与提升秘诀解读 交互设计工作思路与设计技巧书籍

    2016-06-18
  • 设计高效好用表单的10个技巧

    让问题保持直观的顺序。你应当站在用户的角度按照逻辑提问题,而非按照程序或者数据库的逻辑。如果问题之间没有逻辑存在,那么可以按照字母顺序来排布。
    以直觉的顺序组织选项。比如选项为日期的时候,按照周一周二周三这样的顺序来排布,而非乱序。
    时刻反思从用户那里获得的信息是否必要,如何使用。这样做是为了消除不必要的选项,提升完成率。

    一旦用户点击输入框,标签会消失,用户容易忘记谈需要输入的内容以及形式
    当用户看到输入框中有内容填充的时候,会误解为这个字段已经被填写而无需输入了

    2017-05-21
  • Big Than Big ,在移动设备屏幕变大的时代,交互师!你的交互该怎么进行设计?

    这是一个大屏手机的时代。强调这件事情的意义在于,这已经成为事实。这是一个大屏手机的时代。

    2015-01-06
  • 如何量化用户体验并有效执行

    很多人都把用户体验看作是网站或应用成功与否的一个总体衡量标准。分析一个网站或应用在提供好的用户体验方面的效果如何,往往会变成一项很主观的事情,仅停留在观点层面,缺乏客观依据。本文描述了为何量化用户体验这么难,并提供了一个量化用户体验方法,对于网站和应用的过去开发所作努力的快速、客

    微信热点 2018-03-22