UI基本名词
UI:即User Interface,用户界面。
UI设计不是一个单独的个体,它是指对设备的人机交互,操作逻辑,界面视觉的整体设计。包括图形界面设计GUI(Graphical User Interface),交互体验设计ID(Iteraction Design)和用户研究设计UE(User Experience).
GUI(Graphical User Interface):对图形用户界面的视觉设计,用户通过界面像手机发出指令并与之产生交互行为,手机接收到指令产生相应的反馈。
UE/UX(User Experience):用户体验,用户在使用产品过程中的个人主观感受,UE设计关注用户在使用前,使用过程中,使用后的整体感受,包括用户行为,情感,成就等各个方面,其目的是保证用户对产品的使用体验有正确的预期,了解他们真实的期望和目的,并以此作为产品核心功能设计进行修正,保证其与人机界面之间的协调工作。
ID(Iteraction Design):交互设计,考虑人,环境与设备的关系和行为,以及传达这种行为的元素设计。交互设计,为了让产品更快易用和高效,让用户在使用产品时感到舒适。
UCD(User Center Design):用户为中心设计,是一种设计思维模式,强调产品设计过程中,从用户的角度出发来进行设计,让用户成为第一。
UI知识体系
基础美学 ★★☆☆☆
素描、速写、色彩
平面设计 ★★★★☆
布局设计,字体设计,图标设计
设计规范 ★★★★★
界面尺寸,尺寸,系统字体,ui控件,切片输出,标注适配,手势交互,动效
交互设计 ★★★☆☆
产品结构,交互逻辑,用户研究
动效设计 ★★★☆☆
动画脚本,动画运动理论
设计心理学 ★★☆☆☆
设计工具:PS/Sketch/AI/Axure/Ae
辅助工具:ps play/ mark man/ cutter man
UI设计原则
1、清晰
1)内容展示清晰,重要操作摆放位置方便用户操作
2)可带来损害性的操作使用鲜艳醒目的颜色提醒用户,层级之间路径是否被用户感知
3)清晰的界面,让用户看上去一目了然
2、一致性
1)保持界面风格的一致性、结构清晰明朗
2)布局一致,操作流程一致,色调一致,视觉风格一致,控件尺寸一致
3)同样的图标表意相同,不同位置执行同样的操作时使用同样的反馈。符合用户预期
3、直接操作
1)支持多点触摸的界面,用户无需进入应用中就可以在手机主屏幕使用3d touch长按进行超级的操作
2)可通过捏合操作直接放大缩小图片或文本内容,通过上下滑动屏幕浏览网页内容
3)通过拖拽屏幕将一个内容移动至另一个位置上,晃动手机可撤销输入的文本内容
4、及时反馈
1)界面提醒功能,让用户了解反馈信息
2)点击列表或控件时会临时高亮,并在操作过程中持续一段时间,以展示控件被执行的过程
5、美学
1)颜色搭配和谐,图标设计精致
2)设计语言一致,布局结构清晰,视图尺寸舒适,整体视觉规范统一
3)界面质感符合产品气质。设计风格符合用户定位
APP开发过程
App团队成员:产品经理,用户研究,交互设计,ui设计,程序开发人员,测试以及运营团队
完整的开发过程
1、产品经理
采集需求构想开发产品,包括产品功能需求,产品设计需求,了解用户需求,项目期望完成时间和开发预算等,最终输出粗略的原型图。
2、交互设计
产品定位和前期需求确定,交互设计师深入产品原型图,对需求进行修订和完善,定义信息架构和优化操作流程。直接影响产品的业务目标和转化率。
组织页面元素,制作高保真原型图,参与审评,让产品,视觉,开发和测试直观的看到产品的雏形。对原型进行修正改进,做简单的用户测试继续挖掘情感需求。
3、用户研究
明确用户需求点,分析用户行为习惯和痛点,建立用户行为模型,为产品的使用及市场推广活动提供策略支持,帮助设计师制定产品设计方向。
建立产品用户体验监控指标,跟踪和监督用户满意度提升,根据调研结果,提出合理的产品改进或优化建议。
4、视觉设计
交互原型图,页面逻辑是否顺畅(是否和ios规范有冲突)、信息的重点(用户最关心什么)、用户人群,视觉风格和主色调(电商类用暖色系,社交类用冷色系)、布局是否合理(首屏是否可以容下足够的关键信息)、设计语言使用(线性图标还是面形图标)、页面情感化设计(空状态页面如何引导用户)
ui设计师制定设计规范,将视觉稿进行适配,标注,切片交付给开发人员,待程序发测试包后还要进行视觉校验和界面还原
5、程序开发
按照用户需求确定程序功能,并进行模块化设计,按照产品经理分工完成程序编写任务。
6、测试
ui设计师与开发人员密切沟通,宣讲视觉规范,协助视觉还原
7、运营
核心目的让产品占据市场和用户,通过各种推广渠道让产品的装机量,活跃用户数和市场占有率等数据获得提升。
网友评论