• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 新手入门手册!UI视觉设计师工作流程上的总结与建议

新手入门手册!UI视觉设计师工作流程上的总结与建议

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计流程等相关知识,希望在学习及工作中可以帮助到您

@Jeanny :最近有一些刚入行的学妹来问我,如何才能成为一名合格的设计师,我想三言两语很难传达,于是准备了一篇长文,主要是根据积累的经验和对该行业的认识来叙述作为视觉设计师需要哪些能力。

  • 理解业务需求、产品定位和交互逻辑
  • 理性确立设计风格并初步评审
  • 设计过程中结合需求,合理优化设计
  • 保持有效沟通,输出并跟进设计实现

首先我们要清楚视觉设计在整个产品中的作用和目的是什么,是给用户提供舒适美好的视觉享受吗,还是为了用户使用产品的时候更顺畅,这些都包括但不仅仅如此,视觉设计还应该传达品牌差异化,让用户清晰地辨识、记忆并喜爱该产品,并以促成业务目标为结果。因此做视觉设计就不能只流于表面形式,应该全面读懂业务需求和用户群的特征,做出符合该业务需求和品牌调性的设计。

一. 理解业务需求、产品定位和交互逻辑

曾经有个同行跟我说他犯过的一个错误,拿到需求或原型后,也许是迫于时间紧迫和经验不足,就立急开始设计,最终的成品确实很高大上,获得很多同事好评,但是产品经理和老板就提出了有指导性的意见,这个网站是给内部人员使用的,应该以方便快速触达目标为主,而不是做成多屏的滚动页面。虽然老板不懂设计,但是他却懂业务,可见设计不应该是炫技,也不应该是给产品润色,应该是根据业务需求做出多方面综合考量的结果。

拿到需求之后,心里有个大概,这个产品是干什么用的,主要是吸引哪些用户群,业务逻辑和使用场景大概是什么样的,当进行了一翻思考之后,如果还觉得陌生,应该怎么办呢,那当然是找到交互设计交流啦,有的公司没有交互设计岗位,这时候可以找到产品经理,他肯定会不厌其烦为你讲解。

理解产品的定位,主要是理清产品的类型(如对内或对外、to B或to C产品)、目标人群、核心功能,以及用户群的主要特征,如年龄、性别、喜好、使用时间段和操作场景等。甚至可以参与该产品前期的调研分析,提前了解并构思产品的视觉传达,品牌定位问题。

如何理清交互逻辑,拿到原型后可以按步骤和页面分支来形成一个大致的概念,如产品分为几大模块,几大首页都有些什么内容,甚至可以结合构架图去理清思路,遇到不明晰之处则与负责人交流。大致上来讲交互逻辑主要应该搞懂以下几点:

  • 布局方式
  • 整理框架逻辑和流程
  • 页面承接关系
  • 控件的各种状态
  • 不同条件下的信息展现

二. 理性确立设计风格并初步评审

理清了之后,就可以着手确立设计风格。设计不等同于艺术,产品也不是表达自我的平台,设计应该是解决具体问题并合理论证。因此不应该天马行空,或拘泥于创意,美感和形式。然后太注重分析,也会导致结果没有新意,太重目的,无法超出用户的心理预期,因此应该在划定好的范围内,做一些创意性的延伸工作。大多数的设计师都是由学习别人开始的,如果还没有达到一定的高度,可以通过研究同行业的产品共性和设计特征,然后理性从共性+个性的角度,并结合前面理解的定位分析,从而思考自身产品的设计风格。

从把握流行的设计风格做出符合产品定位的,更符合品牌调性的设计风格(当然如果该产品不在初期0规划阶段,而且已经有一套设计规范需要遵行,那么就了解清楚需要遵行的是哪方面,多大程度的遵行规范,如控件的使用,还是图标的风格等等,因为这都将影响最终设计的结果),如果有限制,仍可在一定的范围内发散思维,从细节上创造出超过用户预期的设计。关于如何通过视觉设计提升产品的品牌调性,这个后面会通过另外的文章作以分析,这里主要阐述工作推进中的一些经验和方法。

确立风格后,参与初步的风格评审。评审的作用,在于增加视觉输出的合理性和效率,评审的过程中可以确定设计的风格,后面的设计按计划进行,沿着此风格继续即可。

三. 设计过程中结合需求,合理优化设计

在具体做设计的时候,遇到不明确的描述,或是考虑到更多流程图以外的想法时,可以与交互沟通,加快进程。举个例子:在做APP公告弹窗的时候,根据业务模式有可能会出现比较长的公告,也有可能出现两条公告,而流程上没有考虑到这么全面,这时候可以和交互沟通,延伸出更细化的体验,并做出更符合逻辑的视觉设计。比如公告一屏展示多少字,超出的文字是点击按钮显示下一页呢,还是用滚动的方式展示剩余的部分,第二条公告通常是在第一条之后展示,那么如果两条公告的长度不一致怎么处理呢,视觉上不应该出现时长时短的弹窗,显示不专业不规范,这时候比较好的方法是折中选择一个高度居中的弹窗设计,并且提醒产品在公告字数上做限制。

所以作为一名视觉设计师,多了解产品体验,熟悉业务性质,可以提升产品的设计,平常除了做好视觉设计提升的基础上,可以阅读一些用户体验和交互设计相关的书籍,比如《用户体验方法论》,对于产品设计都有很多值得思考的观点,比如书中提到的超预期的用户体验的基本要素“Lemers”,即“易学、高效、易记、纠错、满意度”。

设计并不是自己埋头琢磨,把设计做得高大上能够使用就行了,还要学会解释自己的设计,获得大家的认同。这就需要做设计的过程中参与体验的思考,做到任何一个细节都经过自己的理解和认同,否则无法完成后期评判设计时的解说。

曾经招聘人员时就有发现,有的设计师作品很高大上,也符合产品需求,但是向他提问为什么这样设计却难以解释清楚,后来了解到,他在设计过程中照搬原型,自己没有加入思考,只是负责美化工作,当然如果是和经验足够成熟的产品合作,也不会出现什么大的问题而且还能推进工作流程,但长期下来会导致他没有参与感和认同感,久而久之就会对工作产生懈怠的心理,甚至对于他职业发展也是不利,毕竟只做好美化的视觉工作是远远不够的,即使有足够的创意也应该是为产品和业务需求服务。

四. 保持有效沟通,输出并跟进设计实现

设计过程中很可能遇到产品需求有调整的情况,应该保持有效沟通,随时准备设计修改。那么设计完成以后,事情还没有完,输出的过程也尤为重要,输出设计应按优先级输出关键模块,并分模块有序输出;输出内容统一规范命名,方便开发使用,形成合格的交付物。同时,设计过程中就应该规范命名,这直接关系着后期输出的流畅,图层分层和文件夹的归类也应该按页面逻辑,以便其它设计师使用时也清晰了然,减少磨合过程。设计还应定期检查开发的设计实现,遇到问题罗列并跟进修改。

总结

视觉设计师平常可以做些绘画练习,多浏览优秀的设计,保持基本的审美水平,同时提升用户体验知识,分析不同的产品设计背后的动机,毕竟视觉设计不只是把产品做好看就行了。

「不想成为美工?你可能还缺这些能力」

  • 《怎样成为真正意义上的设计师?》
  • 《从菜鸟到总监!成为优秀设计师的10个必备技能》
  • 《设计师进阶教程!成为优秀设计师必备的11种职场能力》
  • 《超赞!优秀用户体验设计师该具备的8个习惯》
  • 《进阶四部曲!没有师傅教如何成为一个优秀的设计师?》


【优设网 原创文章 投稿邮箱:yuan@.com】

================明星栏目推荐================

优优教程网: UiiiUiii.com?是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2018-08-23进阶学习!如何做好产品界面中的内容设计?
  • 2018-08-23系统学习!服务设计的常用理论、流程和方法总结
  • 2017-08-06新手建站入门教程⑧:轻松打造一个文章站
  • 2017-08-06如何将页脚固定在页面底部(多种方法实现)
  • 2018-08-23过去十年,我每年都至少失败一次——专访阿里产品经理苏杰
  • 2018-08-23未来的趋势!好的 AI 对话体验应该是怎样的?
  • 2018-08-23语音交互智能产品该如何做设计?这篇可能是最全面的总结了!
  • 2018-08-23如果你正在设计原型,这4个图片占位符工具别错过
  • 2018-08-23用超多案例,帮你避免交互设计中的「刻板印象 」
  • 2018-08-23熟知用户行为的这7个层面,你的设计才会走进人心

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 只要关注这6个点,交互设计师也能做好竞品分析!
    • 像做产品一样对Design System进行前期规划
    • 那些很熟悉但又叫不出名字的设计法则:冯·雷斯托夫效应
    • 豆瓣9.4!Netflix这部汇集顶级设计师的纪录片,简直拍成了美剧的级别
    • IE环境规定div高度必须大于字体高度的问题
    • 网易设计师:图表设计,远不止“好看”这么简单
    • 让你的网站IE8浏览自动用IE7兼容模式
    • 书写CSS的5个小技巧让你的样式更规范
    • 90%的文案根本不会沟通,4大实用技巧提升文案的沟通力
    • 辣眼睛?这种粗粝但有趣的设计风格正悄然流行

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有