iOS用户体验设计流程图
2018-08-19 18:01:00 66 举报
iOS用户体验设计流程图是一个详细描述iOS应用程序开发过程中各个阶段的工具。它从用户研究开始,通过了解目标用户的需求和行为来指导设计决策。接下来是信息架构,设计师需要确定应用程序的主要功能和内容,并将其组织成易于理解和导航的结构。然后是交互设计,设计师需要考虑用户如何与应用程序进行交互,包括按钮、表单和导航等元素。接下来是视觉设计,设计师需要创建应用程序的外观和感觉,包括颜色、字体和图像等。最后是用户测试,设计师需要与实际用户一起测试应用程序,以确保其满足用户需求并具有良好的用户体验。整个过程旨在创建一个直观、易用且吸引人的iOS应用程序。
作者其他创作
大纲/内容
1.市场调查(搜索各大平台,如有类似的,需要比他做的更好,具有更多的独特的优化设计)
3.可用性测试(将设计好的原型放入相册活着软件制作成可进行简单页面间跳转的动画,来尝试体验,测试应用的布局,导航和控件位置的合理性和操作的体验感,人体工程学方面的舒适度)
单手操作方式(左手,右手):滑动,点击,双击,拖动,缩放等
人机界面指南1.iOS2.Android3.Window Phone
3.交付开发人员(把高保真的个性化设计结果,保存图形或是动画,连同界,效果图,标注打包发送给开发人员,这里可能需要跟开发人员沟通进行单独的切图工作)
2.人员不同背景5-15人
1.色彩与底纹
危险的“清除完成键”和不常使用的设置键,重要的控件都避开难以点击的区域
3.纹理,装饰,特效
1.针对的移动设备2.应用类型3.针对的用户群体4.应用的使用平台5.应用设备的屏幕规格6.项目开发周期7.应用的用户体验设计方向(个性化,规划化)8.相似的同类产品
2.设置控件和界面元素(对界面上的细节元素进行细致的设计,排版和调整,不是简单的把元素拼凑在界面就算完成了,需要考虑交互方式,人体工程学以及视觉的整体协调感进行反复调整)
启动画面:1.做成动画(不建议)2.和首页背景一致(会给启动 非常迅速的错觉)帮助引导界面
4.社会角色
第一阶段(需求分析)
体验层面
界面构图
原型的中保真阶段(进行数字化处理,在电脑上进行应用的图形界面设计,不需要过多的细节修饰,从而进行不断改进和补充)
用户体验(个性(适度),降低用户的操作难度,提高用户的操作效率)
提出问题,完善并改进
人体工程学iOS,30*44点Android,48点
启动图标:1.视觉中心:图标中要有明确而响亮的主体,主体要位于画面中心,这样整个图标就有了灵魂或是凝聚力2.造型简约:尽量使用简约的图形作为视觉中心的造型3.色彩对比:强烈的色彩对比4.细节精美(不要在制作iOS启动图标的时候使用透明背景和Alpha通道,iPhone尺寸114*114,iPad140*140,1024*1024在App Store)对于Android,圆角矩形的转角,圆角的半径要明显小于iOS;还有一些往下看的透视效果,看到以下深景。一般48*48,电子市场512*512。对于WinPhone:程序列表的启动图标:62*62启动画面的小磁贴:126*126启动画面的大磁贴:210*210或(432*210)WinPhone商城:手机商品目录小磁贴:99*99手机上商品目录大磁贴:173*173电脑上商品目录磁贴:200*200
图形元素,要适合应用的功能特点和界面的视觉需要
2.问卷方式(科学,高效获取用户基本信息)
1.优化视觉结构(能够清晰流畅更加准确浏览应用界面)
移动设备优势:智能,随机,不受环境和空间的约束,便捷地处理简单任务。
3.大胆说出想法,不许批评
头脑风暴
1.种类
基于平台规范
移动平台的特点
开发人员介入
流程大概总结:1.市场定位及产品分析2.项目的用户需求分析3.确定导航方式和功能点4.绘制操作流程的原型草图5.项目的中保真原型6.项目的可用性测试及调整7.完善界面的个性化设计(确定风格,收集素材,添加个性化功能)8.图标设计及启动画面(隐喻手法)
2.图形与字体,文字排版
1.按钮2.单行文本3.多行文本4.各种栏(状态栏,菜单栏,工具栏,导航栏,标签栏,操作栏,搜索栏等)5.滑块6.选择控件7.拾取器8。对话框9.分享列表10.进度条11.列表,网格
第二阶段(概要设计)
4.绘制原型草图(通过铅笔在纸上把应用的功能点,操作流程,界面布局以及交互元素进行一次实际演习,去除不合意的因素,加强应用的核心功能)
2.图标设计(设计一款吸引眼球的图标,不管是移动,桌面还是应用商店的货架上)
6.评估结果,筛选创意
1.色彩的风格倾向深蓝色:精密和科技感淡土黄色:蕴含文化,积淀黑色:权威,高雅,低调,创意灰色:智能,成功,权威,考究白色:信任与放开海军蓝:权威,保守,中规中矩与务实褐色:典雅中蕴含平和,亲切红色:象征热情,性感,权威,自信,能量充沛的色彩粉红色:象征温柔,甜美,浪漫,没有压力橙色:富有母爱的特质,同时象征健康和亲情
突出主体功能,隐藏辅助功能,要有想象力,更要有克制力
3.使用图像而不是文字来描绘信息(慎重选择)
头脑风暴(时间:1小时左右,记录软件:mindjet mindmanager)
WinPhone(全景导航)
不断推敲和把握
Android(标签,树形)
2.应用的定位(做出自己的个性而吸引用户)
设计时候的色调,控件位置和导航模式,精美的造型,搭配可人的色彩,更具视觉冲击力的效果。
1.色彩的心理倾向红色:给人带来刺激,热情,积极和奔放,还有喜气和幸福绿色:大自然和植物的颜色,有生命,年轻,安全,新鲜以及和平,给人以清凉之感蓝色:让人感到悠远,宁静,空虚和清洁粉红色:女性最喜欢的色彩,具有放松和安抚情绪橙色:给人亲切,坦率,开朗,健康黄色:明度极高的颜色,能刺激大脑中与焦虑有关的区域,具有警告的效果浅黄色:具有天真,浪漫,娇嫩的感觉紫色:优雅,浪漫并且具有高贵气质的颜色黑色:具有低调,执着,冷漠和防御灰色:给人诚恳,沉稳,考究白色:纯洁,神圣,善良与信任,给人梦幻的感觉
屏幕的旋转(慎用)
创意和原型草图阶段
思考,检验,完善,修改
1.个性化设计(在中保真原型的基础上对应用的界面上色,图形细节,字体排版和特效上的修饰和创意)
iOS(平铺,标签,树形)
1.人口统计(年龄,教育水平,婚姻,收入等)
高保真原型以及设计的完成阶段(需要进一步的创意和修饰)
色彩构成
规范细节:具备对图形元素,色彩规律,字体样式,风格 特效等
基于平台了解
好的应用不但专一而且开发,能够和其他应用打成一片,尤其是系统原配的功能,它们的功能为我所用,也慷慨的贡献自己的功能给别人当配角,打下手。要踏下心来,脚踏实地的把应用里的关键功能做专,做精。不要太封闭,打开围墙,才能让它们更丰富,更有活力,但是自己的应用仍然是独一无二,充满个性的。
3.使用方法
4.纯个性化的用户体验设计
测试体验,防止惯性思维
iOS字体:英文字体:Helvetica系列(用于拉丁字母和西里尔字母的国家)中文字体:黑体-简(Heiti-SC)Android字体:英文字体:Roboto系列中文字体:文泉驿等宽微米黑或微软雅黑WinPhone字体:英文字体:Segoe UI系列字体中文字体:等线(Dengxian)字体(方正细等线)
3.技术需求
5.记录所有的想法
App设计流程
图形与布局之间的关系和细节处理
集思广益
功能层面
1.选择布局和导航方式(选择好界面的布局以及合理的导航方式,直接影响应用的使用和操作过程中页面的跳转和清晰,流畅和合理性)
1.用户细分
收集问题,做好界面个性化设计准备
iOS平台:搜索的时候把导航条隐藏Android平台:搜索模式WinPhone平台:搜索模式
1.确定明确方向或议题
用户需求
4.使用黄金分割和“井”字形分割
3.用户分析(通过对应用的用户及用户群体的分析和了解来确定应用的核心功能。在应用设计的前期阶段,容易出现对功能的取舍)
2.屏幕像素
第三阶段(详细设计)
界面风格:1.拟物化风格:关注实物2.扁平化风格:关注颜色,文字3.手绘体风格:个性化,随意,浪漫,幽默,手工
建立在移动产品性能的了解和用户使用习惯上(有些适合在移动端,有些则不适合,更多的在电脑端或者其他设备)
导航方式
提炼观点或可行性方案(其他观点可以保存,用于积累)
往往越是全能的工具越是用起来不顺手,完美的应用只专注一项工作或一种任务,没有必要把所有的事情都做完。越是增加应用的功能点或者是任务的覆盖面,越是搞不清楚应用到底干什么用
不断测试,观察,注意每个操作的细节
2.识别并选择比回忆并输入要容易
2.心理
第四阶段(编码)
4.不能限制思维的方向,类型,数量
0 条评论
下一页