网易UI微专业课笔记——提升用户体验
2019-01-02 本文已影响410人
噗二爷
一、用户体验概述
1、什么是用户体验
就是用户在使用产品和服务过程中建立起来的所有主观感受
【影响用户体验的主要元素】
有用性是用户体验的基础，通常以用户经理完成
易用性由UI设计师负责
符合用户心智模型才能让用户容易上手
操作方便就是产品的流程有没有提升效率
比如你刚保存的图，会出现在右下角，减去你打开相册的动作
网易云音乐的歌单会标明有多少首歌，减少记忆负担
增加更细腻的动效效果，可以提升UI的视觉感官
二、用户体验分析方法
问题一：用户是谁？状态怎样？
问题二：要从哪些方向开始评估？
UI设计相关例子
一个账号管理软件，每一布置给用户封闭的操作，不需要用户过多的思考
密码的安全级别会跟随滑动条改变，越安全越绿
微信发红包需要记忆零钱余额，而下面加上余额后就不需要用户再记忆了
用户操作频率，熟悉程度，而淘宝用户已经熟悉操作，更侧重效率，所以没有一步一步拉长步骤
体验之间要有取舍
为了强调美观品牌个性而牺牲了可用性（icon不加文字介绍）
为了强调美观
三、打造优秀用户体验的UI设计
1、如何展开工作
【问题一】为什么要找不合理的交互设计？
1、每个交互设计都不可能是完美的，有提升空间，特别是没时间做可用性测试
2、保持批判的精神，习惯提出质疑，提升设计思路和眼光
【问题二】为什么要UI设计师来找交互问题？
交互图是半成品，中间有很多信息不全，靠UI设计师添加（调整配色、大小）
设计流程：
【1】
[例子]易信众筹红包
好的交互原型是完整的，并且每个流程都可以走通
【2】
【3】
【4】
2、让你的设计容易理解
UI设计的核心价值是什么？
是传达信息
UI设计的核心价值就是传达产品与用户之间沟通的信息
1、逻辑问题
【格式塔】什么是格式塔？
格式塔心理学
1912年由几位德国心理学家创建的一套心理理论，它总结了人们的经验和视觉对感知影响的规律
人在观看物体时，一开始会把所有内容组成看
在一定界限内，眼睛的能力只能接收少数几个不关联的视觉单位，这种能力的强弱取决于视觉单位相似程度
1.一个界面包含过多不相关单位——眼睛和大脑就会自动简化，组合
如果办不到，整体形象将继续无序的状态，无法识别
让人们容易理解的视觉表达，由格式塔创始人提出五项基本法则
【1】简单
j
如摄影中的格式塔案例就会将照片处理成大脑在看到的一瞬间能够转换成简单几何图形的构图
【几种排版方式】
【2】相似
形状不同用以区分
不同大小用来区分信息重要程度
色彩不同也用一分类，突出某种类型环境
【3】接近
比如下图，人会自动识别为四组元素，把圆形组合成块来看
接近
【4】闭合
人们在观察熟悉的视觉形象时，会把不完整的局部形象当作一个整体的形象来感知
既为图标增加缺口的个性效果同时又不影响本身传达的信息
通常在logo、海报、广告上
用更少的视觉元素来传达信息，让界面更简单美观
【5】连续
连续可以控制用户的视线
视觉元素的逻辑关系
区域设计
注意：创意可以从很多方面下手，但不要修改信息架构
2、时间问题
考虑到用户是否有时间读完
3、呈现问题
是否能让用户看清楚
背景始终是背景，不要太突出
4、控件问题
一个颜色，但是一个可以操作一个不可以
5、表达问题
写作技巧
【1】倒三角
要传达复杂的信息要把目的和总结明确出来
【2】无序列表
序的方式把文字排列
【3】 有序列表
给列表加上数字序号
【4】文不如表、表不如图
3、舒适顺畅的界面设计
【1】什么是视觉流？
传达信息的顺序
设计方法
引导用户注目度
信息有条理，过程顺畅合理
比如淘宝首页
视线会按照注目度强弱以这个顺序移动
【2】视觉元素
在界面中所有能影响用户知觉感官的元素都是视觉元素（显性/隐性）
右侧色彩元素极简
【3】一致性
面包屑样式不统一（视觉）
确认支付位置不统一（交互）
注意：哪里不同用户可以对比出来，相同的又不需要再学习，这是最好的用户体验（QQ日志和说说）
上下文关联较强的名词不统一（文案）
四四分组原则——长串数字分为四个四个一组更有助记忆
【Icon的语义】——如不能做到让用户容易识别，可以借鉴目前主流APP的Icon设计
4、引爆设计中的惊喜
1、视觉层的突破
以上为四个常见的风格
【1】时尚风格
素材：靴子里的花平衡了服饰头重脚轻的效果
排版：上下的白色中和了大片绿色腻的感觉，背景的气球既丰富了版面又集中了用户视线
配色：背景的绿色饱和度刚刚好，既时尚又不闷骚
【注意】文字排版要有节奏有大有小
【注意】背景加机理可提升可看性
【提升方法】
【2】文艺风格
排版
排版是左右均衡排版，字体上的拼音有文艺感
字体配色带有那个时代的照片的质感
【注意】设计元素的属性要匹配
排版符合一般美感规律
【3】商务风格
两个相差较大的颜色可以用过渡色搭配
配色——沉稳
板式结构——规则
【4】可爱风格
2、交互层的突破
【转场】
转场效果是兴奋型需求
未来的突破口就是动效，之前不做动效是因为
1、之前的硬件条件限制，低端机型不支持太多效果
2、软件不成熟，平台代码不支持高端需求
【情感化】
向上拉动页面时机头会拉长还有表情变化，通过幽默的方式把产品变得有趣
【效率】
高频操作才需要提升效率
