最近发现自己必须增长一些业务方面的知识,就看了一些关于app的ui设计流程博客或是资料书籍。主要是为了我以后的就业做准备。不多说,先介绍下关于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太上火。

最后,90%的问题本质上都是沟通问题!90%的争论本质上都是名词之争!

开发实例

最后贴一张,一个大神的流程PDF吧:

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.
配合开发,以保证视觉效果还原度及小细节修改

参考:http://www.zhihu.com/question/27088793

UI设计理念-app的界面设计流程相关推荐

  1. 如何优雅的定义 App 的界面设计

    2014年初,移动端上网的流量第一次超越了PC端,从此确定了移动端取代桌面PC端成为一般大众接受信息的主流终端.也正是因为如此越来越多的移动互联网创业者将自己的产品重心放在了APP上面,然而随着移动端 ...

  2. APP时间界面设计模板,可临摹学习的好素材

    关于时间管理的APP设计.或者你的APP项目当中,有几个是关于时间主题的APP界面. 无法下手去设计的时候,不妨到搜UI (SOOUI) 看看APP时间界面设计灵感.绝对让你有一定的APP设计收获. ...

  3. Android Studio 开发–微信APP门户界面设计

    Android Studio 开发–微信APP门户界面设计 本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计 前 ...

  4. Android开发——APP门户界面设计

    AS开发--APP门户界面设计01 内容简介 需求分析 UI设计 top content bottom 后端功能设计 top content bottom 代码模块讲解 layout activity ...

  5. 老年人智能手机APP开发界面设计具体策略

    智能手机老年人用户同于年轻人用户,他们的感知力.运用能力以及认知能力都普遍弱于年轻人,随着年龄的不断增长,在应用软件操作上需要花费更多的时间精力.因此,APP开发企业要加强设计上的优化,为老年人的AP ...

  6. 老年人智能手机APP开发界面设计因素

    当前是一个互联网技术时代,智能手机APP开发的发展要与时俱进,跟上时代前进的脚步.社会企业要想在竞争日益激烈的智能手机APP开发市场脱颖而出,始终占有一席之地,就必须不断加强智能手机APP开发界面用户 ...

  7. 前端界面设计流程与原则

    界面设计流程 界面设计先徒手画,再在使用软件开发工具(如:axcure.墨刀)实现可以运行的原型,邀请同行进行评审,反复迭代直到满意为止.一般要经历"原型创作->原型评估->细化 ...

  8. 手机移动端APP引导界面设计模板素材,分层可临摹

    手机app引导设计一:引导语句必须简短,聚焦在最重要的任务上 因为在移动情境中,人机会话时间更加有限,注意力更容易分散.而人类的短期记忆难以保存太多的内容,信息在20秒左右的时间内就会开始被遗忘.因此 ...

  9. APP动态界面设计使用的利与弊

    在界面设计中融入独特的动画的效果会是怎样?是否会让用户看起来更加愉悦?是否会增加整个APP的趣味性?等等 而这种界面设计的动画目前在市面上的APP软件中最多的是应用中界面的启动页中,用来宣传企业文化或 ...

最新文章

  1. UVa489 - Hangman Judge
  2. Netbeans8下 Weblogic EJB案例
  3. USING HAVING
  4. spring elasticsearch 按条件删除_SpringBoot2 高级案例(08):整合 ElasticSearch框架,实现高性能搜索引擎...
  5. 20120530, BGP3
  6. vscode linux新建c语言,Ubuntu16.04下配置VScode的C/C++开发环境
  7. 实战-动手开发第一个区块链投票DAPP
  8. node.js(五)项目创建管理
  9. 素数筛(快速筛)-爱拉托斯特尼筛法+欧拉筛
  10. zend studio12配置php,Zend Studio 12.0调试php代码
  11. 完美池宇峰畅谈创业点滴 男怕入错行
  12. 看Unity网页游戏《蒸汽之城》如何成为行业标杆
  13. ‘xxx‘ is missing in props validation
  14. Antd Vue 表单生成快速开发指南,内附强大的表单设计器
  15. KDD2022推荐系统论文集锦
  16. Java——Map集合
  17. webpack、npm 相关错误汇总
  18. 最新短信平台推荐一览
  19. 云南新开普一脸通解决方案、医院智慧餐饮一卡通、高校一脸通解决方案
  20. vuejs集成simditor

热门文章

  1. 麦肯锡思考和解决问题的方法
  2. Parameter 0 of method errorPageCustomizer in ErrorMvcAutoConfiguration 异常解决
  3. 1-条件概率,联合概率,边缘概率三者关系以及贝叶斯公式
  4. Gartner:2021年第二季度全球智能手机销售量增长10.8%
  5. 利用庖丁解牛工具进行中文分词
  6. 怎么制作gif图?在线一键生成GIF工具轻松解决
  7. idea下编译mybatis源码
  8. java8之读取txt文件转ListString
  9. 大数据监测:肯德基中国正在悄悄涨价
  10. 打印机打印,扫描小白教程(无需另装驱动)