当前位置: 首页 > news >正文

App 的界面设计流程

完整的流程,分层次设计,自下而上去完成
1.策略层,定义产品使命、价值、目标人群
2.愿景/功能层:定义核心场景、功能列表
3.结构层:做流程图、信息架构,确定主导航、主菜单
4.框架层:梳理每一个主界面的内容、布局
5.表现层:视觉设计,涉及图标、配色、切图。

产品经理主要关注1~2,在去找设计师之前,请先问自己以下几个问题,以保证需求明确:
  • 产品给用户带来的价值是什么?
  • 竞品有什么?我们做这个有什么优势?
  • 为什么样的用户而做?
  • 用户会在什么样的场景下使用这个产品?
  • 要完成这个产品,最大的瓶颈是什么?是技术攻关?体验出彩?还是运营资源?
交互设计师主要关注3~4,在交付方案之前请先不断问自己以下几个问题,以保证体验质量:
  • 该界面要求用户完成的最重要的任务是什么?
  • 这是最简单的解决方案吗?
  • 信息是否组织得当?
  • 设计是否易用且一目了然?
  • 标准是否一致?
  • 能否减少用户点击次数?
视觉设计师主要关注5,在与产品经理PK之前请先不断问自己以下几个问题,以保证减少返工:
  • 界面上需要突出的重点是什么?是否进行了有效的突出?
  • 界面上一共有几个层级,是否用清晰的视觉语言予以展现?
  • 同样层级、同样性质的元素是否用了一致的设计语言?
  • 主色调、材质,是否符合整体品牌感?
  • 细节有无丢失?按钮点击态、反馈、缺省状态、字数超出、加载中、未加载态、加载失败态,是否都提供了?
另外,合作不易,三个角色分别需要注意的问题:

对于产品经理:
1.APP的设计, 不要只看竞争对手确定自己的定位 ,不要“因为竞品A和B没有做到,所以我们要做比A和B更牛B的XX功能”,而是要 以用户为导向,思考自己为客户提供的价值 。在向其他人描述你的想法时,请用这样的句式来描述和思考: XXX这一类型的人在XXX的时候、XXX的环境下,想要做XXX事情,遇到了XXX问题。而我们这个APP能够通过XXXX方式巧妙的帮助他解决了这个问题。
2. 不要直接拿线框图给交互设计师看 ,直接描述你的需求即可, 描述清楚 。让设计师知道你的目标是什么,接下来让交互去画原型,让更专业的人做专业的事。
3.不要 太纠缠视觉,对于一些无关紧要的细节,该放手就放手 ,尽量减少提出主观意见。
4. 别太迷信用户反馈 ,能提反馈的,大部分都是粉丝、深度用户、高级用户,他们代表不了全部用户的心声。
5. 让开发主管 去评估工作量,如果对某一部分工作量的评估觉得时间太长,就把它拆分成子任务。
6.每周对一到两次开发成果, 别频繁的去打扰人家
7.bug不断发现,不断修复, 发现/修复率小于1 ,才开始变得可控了,才能确定bug的具体规模并精准预测发布日期
8. 少做少错 ,新版本尽量别加太多锦上添花的功能,满足最核心的就行了。

对于交互设计师:
1.不要一提商业化就头疼,谁不想做一个干干净净没广告的APP ? 别老想着高大上,目标最重要。通过你的设计,让用户消无声息的贡献点击, 让商业化变得人性化 ,这才是你的本事。
2.别太窝囊,别产品说怎么改,就怎么改,要跟他争, 把自己当成产品的owner ,产品的数据、规划,你全都要知道,这样信息对等了,才有话语权,才能有机会站在用户角度提供人性化的设计建议,否则只能是个画线框图的。

对于视觉设计师:
1. 简洁不等于好 (在业界大谈特谈简约至上的风气下,一定有人对这句有疑问,不细解释,请自行先翻一下诺曼的《如何管理复杂》这本书)。 符合用户的心智模型,让人一目了然,才是好
2.别做一大堆方案,ABC方案抛出去让人选,这样累不累?自己 先判断哪一个方案最好,把它做到自己满意、可行、拿得出手 ,就行了,不要沦为美工。
3.给开发的视觉稿,先自己想一下, 布局如何实现 ,不同屏幕尺寸如何适配。如果有动画效果,别天马行空的描述,能做出动画示意最好,做不出来,也找一个靠谱的示意。别让开发gg太上火。

附上知名设计公司的UI设计流程:
把我们公司的设计流程在这里分享给各位同仁,主要适用于从一个idea开始的项目

OUR PROCESS

Step 1.

了解客户需求,听取客户对行业、对产品、对商业模式的思考,此阶段一般需要两个工作日

Step 2.

初步了解产品的基础上制定用户需求调研问卷,粗略了解用户对该产品的功能需求

Step 3.

制定正式问卷,以下为某银行客户制定的用户需求调研问理财经理App需求调研

Step 4.

对问卷进行定量化分析,输出问卷分析报告(采样为300份有效问卷)

Step 5.

根据问卷分析报告以及客户需求进行用户需求的制定,输出用户需求报告



Step 6.

根据用户需求报告制定信息架构(information architecture)



Step7.

根据信息结构,结合用户样本(Persona)、竞品分析、双维度表等方法确立交互设计目标,并输出主页面交互设计提案

(本人添加:绘制手稿绘制出交互流程图,一般按需求方功能要求设计



Step 8.

所有页面的交互设计,同时 以交互说明的形式配合甲方PM或开发人员输出PRD





Step 9.

用户视觉风格喜好调研



Step 10.

视觉风格分析与提案



Step 11.

选定一个方案进行深化后对剩下的页面进行视觉设计



Step 12.

视觉规范手册(pdf 20P起)的制定


Step 13.

交互动效的制定(demo+文字描述),并配合开发制作实际效果


Step 14.

切图



Step 15.

配合开发,以保证视觉效果还原度及小细节修改

最后,附几张我们的工作照


中间需要关注的点:
(1)原型的精确程度会影响到界面设计的准确性;
(2)移动端必须要考虑到复杂的规范以及多终端适配问题;
(3)颜色在不同配置的设备上视觉效果会差别非常大,多测试;
(4)APP如果需要动效设计,界面需要和临时插一脚的动效设计师紧密配合下;
(5)界面设计之后如果不出个规范,成品会让设计师哭晕在厕所。(android和IOS各有各自的实际规范)



http://www.taodudu.cc/news/show-8457238.html

相关文章:

  • Allegro16.6添加标注的方法
  • 老SDRAM和DDR SDRAM时序图与信号完整性仿真结合运用(2) -版本博客图片丢失,增加图片后又不能上传,shit.
  • 实战:内容营销如何吸引顾客 试试五个切入点
  • 关于外场测试的一点儿介绍
  • 笔记本用gpu运行tensorflow-gpu,keras写的老程序,结果与原来不一样,一脸懵逼。
  • 腾讯一面!说说ArrayList的遍历foreach与iterator时remove的区别,我一脸懵逼
  • 信心满满去面美团,结果被JVM9连问怼的一脸懵逼
  • 字节跳动面到这道题,有的读者一脸懵逼,有的读者笑嘻嘻
  • 初学网络安全一脸懵逼?看懂直接跪下!
  • 微信小程序app.json全局配置
  • 计算机毕业设计PHP+安卓美食菜谱App(源码+程序+lw+远程调试)
  • 同城厨师上门做饭系统源码做菜预约做饭家宴代厨轰趴app源码厨师入住+厨师傅端/前端语言uniapp
  • 历书中的哥伦布
  • GPS历书(Almanac)和星历(Ephemeris)有什么区别?
  • SSM之一点一滴:Object对象使用Field反射遍历书输出
  • how many days c语言,万年历书-C精粹的万年历C语言实例解析精粹这本书的万年历程序实在是看不懂, 爱问知识人...
  • GPS星历与历书的区别
  • GPS卫星 星历与历书的区别
  • GPS星历与历书
  • Java小白——三元运算符比较两个数获得大值
  • 小程序的三元表达式
  • 三元表达式多个判断条件
  • 三元运算符 比较三个数大小 三元操作符的类型务必一致
  • 【题解】【AcWing】3874. 三元组的最小距离
  • java 三元运算符比大小
  • 三元组的最小距离问题|数据结构常见小题05
  • 三元运算符完成三个数的大小顺序排列
  • 最小三元组距离
  • 【算法】三元组求最小距离
  • 小程序三元参数判断