初级进阶必备!视觉设计不懂业务时如何着手设计? - 优设网 - UISDC

初级进阶必备!视觉设计不懂业务时如何着手设计?

2016/05/08 15976评论区

visual-design-starter-set-out-1

@candice_7777?:作为一个视觉设计师,能熟悉产品的信息架构、界面逻辑、元素所指,视觉表达能直观清晰,让用户使用产品时、体验时认同它、并产生愉悦即是成功。

相信很多视觉设计师会有这样经历,当接触到一个新的项目;如果是熟悉业务类型产品,设计起来轻松熟络,如果是一个陌生的业务类型,则需去摸索与尝试,?#19994;?#21512;适的设计定位与视觉风格。当视觉对产品业务不熟悉时,视觉效果是出来了却漏洞百出。

1、交互会问:上下两个表格为什么用线分开?两个表格均指index trend,分开后的视觉效果会更好吗?

4bc201600508

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

1bc201600508

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

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

5、上传包用?#19981;?#22270;方式呈现,那几十个上传包岂不是几十个?#19981;?#22270;,还是进度条好点吧?

不熟悉产品业务,视觉从框架结构到细节跳转都经不起推敲;缺少对业务探究过程与对每个细的深思熟虑,用户体验会好么?作为一个视觉设计师,在设计开始前-设计过程中-设计结束都需花心思与时间去?#31169;?#20135;品业务,统筹性的输出。能熟悉产品的信息架构、界面逻辑、元素所指,视觉表达能直观清晰,让用户使用产品时、体验时认同它、并产生愉悦即是成功;而这一过程是需要花心思与技巧的,下面一起分享一下其过程(主要指PC类业务)。

一、从熟悉业务系统开始

不懂业务流程视觉同学拿到交互稿一看,框架结构复杂、海量的信息内容、80%的专业术语与?#30475;?#37117;是没听过的;怎么办?

先找se/产品经理看需求文档,看不懂没有关系,起码先对需求混个眼熟;接着独自开始熟悉交互稿流程,大概?#31169;?#20135;品的业务逻辑与核心场景,心中有个路线;

试着理顺那繁杂的流程,记录不明白的点;

再找交互设计师对稿从头到尾听讲一次,过程中不懂的即问;

在大司很多时候过40页的tob类交互稿需要2小时,更复杂的可能是一个上午的时间。有时候toc业务产品到tob业务产品系统,其繁杂程度就像玩游戏通关,过一个级别难度高一点,等通关完毕游戏顺利结束;你准备好逐一晋级了吗?

二、系统且有目的?#31169;?#36807;程

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

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

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

3、?#31169;?#19994;务框架逻辑与流程,正如《用户体验要素》的框架层,整体界面设计、导航设计、信息呈现设计,因为到了这一步,需要看到真正能呈?#25351;?#29992;户看到的东西,?#33539;?#20854;功能范围和页面各个模块的层级关系;

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

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

6、理清以上内容后,则开始挑选典型页面,or是否全量输出视觉页面;

三、有根据的理性思考

以上步骤做完,则对交互有了一个较为大概的思路,即使不是100%清晰但也有了一个可以发散的视觉设计方向,接下来就是视觉设计开始的筹划。

1、产品定位后的?#33539;?#35270;觉风格方向

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

2、是否有设计规范的?

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

2bc201600508

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

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

设计规范一般是具有指导性意义,且设计人员进行设计时必须遵守规范;设计规范具有统筹性作用,?#24378;?#29992;性原则?#34581;?#32654;常识下避免?#22797;?#30340;方法,可保持设计印象的?#26377;?#24615;;但运用规范同时也存在它的双面性。

优点:

视觉设计输出的效?#30690;擼?#20986;错性少;

高效率的输出,利于项目的快速推进;

基于以往的规范经验,开发难度小,技术可实?#20013;?#24378;;

版本输出时间成本?#20572;?#39033;目迭代?#38382;?#24555;,项目成本相对较少;

缺点:

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

对设计师的挑战度?#20572;?#19968;直遵循规范进行设计久而久之会感到枯燥,想打破这种设计模式;

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

四、经过前期熟悉、?#31169;狻?#24605;考、定位后,则开始主体视觉的风格预言

1、?#28909;范?#35270;觉的分辨率

即我上一篇文章提到“设计启动前?#31169;?#22810;端的适配情况(分辨率/屏幕精度),综合考虑优先出什么分辨率”。打个比方,如果是pc的话,是固定一种尺寸大小(如设计资源分享网站酷),页面大小是否与现今门户网站一样的分辨率?还是一套响应式的设计,自?#35270;?#20110;1680or1920的屏幕?(举两个自?#35270;?#30340;例子苹果官网和腾讯的isux)。

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

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

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

在具体深入设计的时候,肯定会遇到更多之前没遇见的细节问题,这需要视觉设计的适时纪录,逐一找交互澄清问题。打个比方:如卡片上的标题文字,一开始视觉效果设计的是智能放下一行中文字,那么具体数据或英文版本时是两行怎么解决?还是需要预留两行的空间?还是显示不下用“…?#27605;?#31034;?解决办法是:不?#33539;?#30340;地方先找交互设计勾兑的真实场景;如果是?#33539;?#25991;字会有两行的情况,或是英文版标题时放不下,设计预留位置则需考虑两行的方式,最终视觉效果应改为两行文字的呈现,如下图所示:

3bc201600508

视觉设计在出稿过程需要与交互针对视觉每一个细节进行考虑并商榷,并敲定。含糊通过的话,如以上的情况在10个视觉页面都有,那么最后交付时再发现此问题,则需要改动十个页面的视觉。所以,尽量的提前关注细节、沟通解决,规避问题,提高输出质量。

4、初次评审

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

五、讲究输出细节让视觉设计?#34892;?#36827;行

当视觉设计风格敲定后,后续的设计则按计划行事,推进项目的进程,但输出过程的细节也需要?#26723;?#20851;注。

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

2、输出页面命名的规范性/与交互一一对应拉通,形成?#32454;?#30340;交付文档,在这里可以展开为以?#24405;?#28857;:

可以建立视觉页面输出跟踪表,交互整理输出条目,并进行编号;视觉跟进表格,完成一个勾选一个,形成可预见的文档输出;

视觉源文件psd文档一一对应视觉页面png文件,避免一个psd对应多个png的情况;其他设计师、前端或开发拿到文件时?#24425;?#28165;晰了然;

视觉规范指导开始时,规范输出逻辑保?#38047;?#24320;发逻辑的一致性。

六、结语

作为一名视觉设计师,?#31169;?#20135;品、熟悉业务性质,避免输出一些没有意义的设计,让页面中的每一个设计元素传达具有准确含义;在视觉设计前主动投入学习成本,看懂交互,做好充足准备--因为,懂业务是体验的基础。

candice_huang(用户体验设计师)

「?#32423;?#19981;压身的设计师才有高?#38454;剩 ?/strong>

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:?#35835;?#22522;础入门!给?#24378;?#29677;生的自学路径图之交互设计篇》

作者:@candice_7777

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:[email protected]

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.51294208.com/visual-design-starter-set-out

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

云南时时彩开奖今天
新疆25选7微信群 pk10 3尾 上海快三开奖结果快 王中王单双中特直播 高频彩的资金倍投方法 宁夏十一选五走势图文 内蒙古11选5分布走势图一定牛 22选5一等奖最低多少钱 重庆时时彩开奖结果 扑克牌女尸 排列三组六杀码技巧 辽宁11选5中奖规则 北京单场销量 浙江体彩6加1开奖查询 双色球投注规律