交互杂记

1.并发:整个网站或APP在同一时间访问的人数(并发超过服务器,则会在使用中制动关闭)

2.迭代:版本更新

3.UI(user interface):用户界面

GUI:图形界面设计

UED/UXD(user experience):用户体验设计

IXD(interaction design):交互设计(任何机器互动的过程,通过了解人的心理,目标,期望,使用有效的交互方式让整个过程好用,易用)

UID(user interface design):用户界面设计

UCD(user center design):以用户为中心的设计

4.APP:手机的第三方应用程序

5.启动图标icon按功能分:(1)启动图标 (2)应用图标

启动图标icon按设计风格分类:(1)剪影图标 (2)扁平图标 (3)拟物图标  (4)主题图标

6.图标设计的三大原则:

(1)识别性:图标的图形,要能准确表达相应的操作。

(2)一致性:设计要做一个协调统一,具有自己的风格。

(3)兼容性:要考虑不同系统,不同硬件的双重兼容(不同的使用场景兼容)

7.图标设计的步骤:

(1)确定主题:

首先明确设计的主题与客户的要求

分析内容,针对的人群,APP行业的特性、场景、习惯

搜集行业内或相关成果APP的方案

确立主题构图,以及大概的色彩方向

(2)关键词

在提炼的主题基础上将关键词写下来(头脑风暴)

考虑用户的特殊要求

(3)图形化

将提炼的关键词罗列出来之后,可以视觉化元素,将象征元素提炼出来

提炼完毕后寻找相关素材

(4)筛检

将不直观,不美观,与企业形象出入较大的素材筛除

不要刻意,直接使用所找素材,进行二次加工

(5)出图

确定色调

画草图

将草图实现,输出最终稿

8.图标设计技巧:

(1)隐喻(辨识度)

图标作为一个入口,引导用户进入应用,应简约明确,但不能让用户去猜,意思要表达明确。

一般选用一种或两种辨识度较高,能代表其概念的物体。

(2)栅格线(整体感)

能够更好的匹配,界面中的图标整体感强。

(3)色彩鲜明(跳跃感)

明亮的色彩能够带来趣味性和活力感,也易于在多种背景中脱颖而出。

(4)删繁就简(易读性)

图标本身就是一种设计语言,所以要避免信息量过载,尽量减少文字。

(5)适度立体(层次感)

多尝试加入一些投影或者渐变,使得图标更有层次感,而不能单一的纯扁平化

(6)风格一致(套系感)

要刻意去培养自身的整体感,一致的风格设计,是用户情感化的体现于需要

(7)追求完美(可读性)

追求细节做到画面不可模糊,严格控制像素,使得画面精致。

9.扁平图标的种类:

(1)纯平面:


特点:纯色,剪影

优点:简洁,清晰,清晰,舒服,色彩明朗,视觉识别高。

(2)轻折叠:


特点:纯色,折痕,轻投影

优点:比纯平面更加丰富,有轻微视觉空间感,色彩明朗,视觉统一性较好。

(3)轻质感:


特点:轻渐变,简单层次,轻投影

优点:干净,简洁,内容丰富,更有质感

(4)折纸风


特点:折叠,投影,结构

优点:层次丰富,结构明显,易于创造空间立体感,几何感明显。

(5)有明显投影(长投影)


特点:层次,投影

优点:色彩对比度大,有明显而单纯的投影,从而创造鲜明的层次感和空间感,视觉冲击力大。

(6)有厚度


特点:厚度,立体感,细节

优点:有明显的厚度,即有明显的立体感,有一定的细节描绘

缺点:相对复杂,统一性没有以上风格高。

10.黄金比例1.618(即长段为全段的0.618)


裴波那契数:0,1,1,2,3,5,8,13,21......(前面两个数之和等于第三数)

黄金比例应用:

(1)布局:将尺寸设置成黄金比例

(2)间距:使用黄金螺旋线布局;位置的布局和留白一样都可以通过黄金螺旋线布置.

(3)内容:沿着黄金螺旋线的轨道,保证视觉的平衡

(4)图形:黄金比例图形

11.MBE风格图标

特点:

(1)特粗描边线条

(2)Q版卡通形象

(3)圆滑的线条

(4)颜色鲜明

(5)没有渐变色

(6)能快速用矢量去绘制

(7)能快速创作动效

12.轻拟物图标

特点:对显示中的物体所做的模仿,不追求完全的真实感。

13.拟物化图标

特点:界面模拟真是物体的材质,质感,细节,光亮等。对于光影处理的要求高。

14.交互分为人人交互和人机交互

人机交互:任何机器在互动的过程中,设计师通过了解用户的心里,目标,期望,定义的一个行为。用户使用搞这些有效的行为达到他们的目标,并使得整个过程易用。

15.交互四要素:用户,目标,行为,反馈

16.简化四策略:

(1)删除:去掉所有不必要的按钮(功能),直至减到不能再减为止

(2)组织:按照有意义的标准将按钮划分为组

(3)隐藏:把那些不是很重要的按钮隐藏起来,避免分散用户注意力

(4)转移:只保留最基本的功能按钮,其他的转移菜单或其他更深的地方

17.UED(用户体验)的五个重要部分:

(1)人机交互:设备与用户之间的信息船体与反馈

(2)状态:在写交互说明的时候总是更多的考虑正常状态,却忽略一些特殊状态,但对于开发来说,各种状态都不能丢失

(3)操作与反馈:反馈对用户动作的一种回复,向他们展示操作的结果,更新他们的任务进程

(4)工作流:让用户明白按哪里可以做什么,以及接下来会发生什么

(5)故障

18.移动端开发的流程:

愿景——背景调研——用户访谈——行为数据分析——需求和任务分析——用例分析(市场研究,用户研究)——设计定位——产品概念设计——信息架构设计——交互流程设计——核心界面设计——原型开发——细节界面设计——用户测试——控件输出——交互说明文档,视觉规范(概念设计,交互设计,视觉设计)——编程开发——测试bug——部署与发布(代码开发)——推广与运营——运营数据分析——迭代

19.用户体验要素(产品设计的五层):

战略层:用户需求、网站目标(产品定位)

范围层:功能规格、内容需求(1.功能设计,竞品分析  2.需求调研与分析)

结构层:交互设计、信息架构(业务流程梳理,操作流程梳理,信息流程梳理,数据流程梳理)

框架层:界面设计、导航设计、信息设计(页面布局,用户场景分析)

表现层:视觉设计(界面设计)

20.五导图:

21.场景故事的表达分析——六维度分析(6W)   ——   越是底层越是刚需

(1)who(什么人):产品的目标用户是谁?是一类还是几类群体?通过用户群额年龄,性别,特质,区域,习惯,兴趣,爱好,收入,消费......

(2)when(什么时间):用户在什么时候使用产品?在产品推荐时,必须选择合适的时间,同时还要考虑用户停留时间,使用高峰时间,离开时间

(3)where(什么地方):用户可能在那些条件和环境下使用产品,针对不同的操作环境,不同的地理环境,要有不同的方案

(4)why(为什么):用于了解功能的目的,有没有真正满足用户的需求

(5)what(是什么):产品功能分析,用来分析产品的基本功能和辅助功能之间的关系。用户真正需要的功能是什么

(6)which(哪些):除了此产品外,市面上还有哪些可代替的竞品

22.用户模型(用户画像):目标群体,真是的特质。是真是用户的综合原型

23.用户行为路径:做一件事,从开始到结束期间所发生的一些行为,并记录行为(包括正确和错误的行为)

24.体验者旅程:先看用户目前行为流程,在从情绪上判定体验的好坏

25.同理心地图:学会换位思考,让自己站在用户的维度去思考问题

26.调研方法:

(1)问卷调查

(2)焦点访谈

(3)现场观察

(4)二手资料调研

(5)相关人访问

(6)竞品分析

27.用户登陆注册系统分为两大类:

(1)自建用户系统:通过手机号,邮箱,用户名登陆

(2)第三方账号授权用户系统:QQ,微信,微博


28.错误反馈实例:

(1)手控类型错误:

一般在使用移动端时遇到。——可以加入新手指引或错误反馈。

(2)词语/拼音错误:

主要在使用搜索或者输入的是有遇到。

(3)内容不符合规则:

主要常见于表单填写,最常见就是登入注册。——提示要简单明了,及时给予用户反馈。

29.访问错误类型:

(1)功能不能使用:

告诉用户不能使用该功能的原因,方便用户及时修改。

告诉用户解决办法。

(2)页面不能打开:

要有情感化设计,通过设计求得用户的谅解。

给予用户解决办法。

30.低保真原型:

有限的功能和交互原型设计。

作用:

主要用于用户沟通,测试,和进一步绘制高保真效果图。

31.iOS设计三大原则:

(1)遵从内容:UI应该有助于用户更好的理解内容并与之交互。

充分利用这个屏幕

慎重使用拟物设计(减少渐变、阴影)

尝试使用半透明底板,来暗示背后的内容(毛玻璃效果)

(2)清晰:文字、图标应该清晰易读,去除多余的修饰,突出重点

使用大量留白

让颜色简化UI

通过使用系统字体确保易读性

使用无边框的按钮

(3)深度:视觉的一个层次感和生动的交互动画会赋予UI新的活力

32.iOS的四种类型:

(1)栏(Bar   导航栏,标签栏,状态栏):

包含了上下文信息来指引用户他们所在的位置,以及控件来帮助用户导航或者执行操作

(2)内容视图(content views):

包含了应用的具体内容以及某些操作(比如:content views  删除,插入,排序)

(3)控件(controls):

用户执行操作或展示信息

(4)临时视图(temporary views  弹窗):

短暂出现给予用户重要信息或提供更多的选择和功能。

33.在页面布局上考虑以下几点:

(1)强调重要内容或功能:让用户容易集中注意力在主要任务上

(2)主次关系:使用不同的视觉化重量和平衡来告诉用户当前屏幕元素的主次关系

(3)对齐:使用对齐来让阅读更舒服

(4)默认尺寸:确保用户在内容出于默认尺寸时可以清楚明白它的主要内容和含义

(5)字体大小:根据需求制定字体大小

(6)尽量避免UI上不一致的表现:建议类似的功能外观都保持一致

(7)给每个互动的元素充足的空间:让用户容易操作这些内容和控件(常用的点类控件的大小是44px*44px)

34.iOS尺寸规范:

Iphone1.2.3(IpodTouch1.2.3)——320px*480px

Iphone4.4s——640px*960px

Iphone5.5c.5s——640px*1136px

Iphone6.6s.7——750px*1334px

Iphone6P.6sP.7P物理尺寸——1080px*1920px

设计尺寸:1242px*2208px

(物理尺寸就是实际屏幕像素、设计尺寸就是截图6P界面拖入PS中所量出来的尺寸)

Iphone1.2.3(@1X)

状态栏:20px         导航栏:44px         标签栏:49px

Iphone4.4s

/Iphone5.5c.5s.SE /Iphone6.6s.7(@2X)

状态栏:40px         导航栏:88px          标签栏:98px

Iphone6P.6sP.7P(@3X)

状态栏:60px         导航栏:132px         标签栏:146px

以@2X为前提:字体大小20——38px

顶部操作栏文字:34——38px

标题文字:28——34px

正文文字:26——30px

辅助性文字大小:20——24px

Tab bar 文字:20px

内容列表页:最低高度为80px

卡片外边距:16px ,10——20px

搜索框高度:58——66px

搜索框模块高度:88,90px

按钮大小:76——96px 

分段控件min高度:44px

Tab切换:76——150px

分割块:16px

头部位置:128px

35.常见标签栏汇总:

(1)标签式导航(微信,QQ)


优点:

清楚当前所在入口位置

能频繁跳转且不会迷失方向

直接展示重要入口的内容信息

缺点:

功能入口过多时,该模式显示笨重不实用

占用一定的高度空间

(2)顶部导航(QQ音乐,酷狗音乐)

优点:


腾出下方位置提供更重要的操作

可以提供沉浸式体验

缺点:

单手操作,在大屏幕上难以点击

(3)舵式导航(微博)

中间功能为核心功能

优点:

迅速引导至核心功能

缺点:

开发比较复杂

(4)列表式导航(网易,设置)信息类

优点:

可以展示内容较长的标题

可以展示标题的次级内容

层次展示清晰(有先后级)

缺点:

排版灵活性不高

同级内容过多时,用户浏览时容易产生疲惫

(5)跳板式导航(支付宝,淘宝)

优点:

清晰展示多个各个入口

容易记住各个入口的位置,方便快速找到

缺点:

各个入口之间切换不灵活(点击进入后,要返回功能跳板式界面,才能点击进入下一个入口)

容易形成更深的路径

(6)抽屉式导航(知乎,QQ,亚马逊)

优点:

扩展性好

兼容多种模式

缺点:

对功能入口隐藏较深

单手操作时存在盲区

(7)陈列馆式导航(bilibili)

优点:

直观展示各项内容

方便阅览经常要更新的内容

缺点:

容易形成界面内容过多,显得杂乱

(8)轮播式导航(探探,读书类用   其余很少用)

优点:

专题性强

易于阅读(单页内容整体性强)

缺点:

不适合展示过多的页面

不能跳跃式的查看阅读页面只能按顺序查看相邻的页面

36.引导页:

当用户安装后,第一次打开应用,App一般会呈现连续3-4张页面,这些页面会提前告知用户App的主要功能和特点,这类似迎宾引导的作用,这些页面我们称之为引导页

37.引导页一般只出现一次。除非清除应用程序(仅限安卓用户)相当于初始化的APP,或卸载后重装才会再次看到引导页。有跳过按钮。

38.引导页按目的分类:

(1)功能介绍类:

对产品的主要功能进行展示,大多采用文字配合界面,插图的方式来展现

(2)使用说明类:

用户在使用产品过程中可能会遇到困难,不清楚的操作,进行提前告知,这一类大多结合手绘风格居多

(3)推广类:
这一类引导页,更多是想传达产品的态度,让用户知道这个产品的情怀,这一类需啊哟制作精良有趣。现在市面APP的引导页最长使用的类型

(4)问题解决类:

描述实际生活中所遇到的问题,直击用户的通点,最好通过解决方案让用户情感上产生练习增强用户黏度

39.引导页从表现形式上分类:

(1)文字与界面类:(多用于功能介绍类或使用说明类)

这是最为常见的,简短的文字界面

缺点:过于模式化

(2)文字与插图组合:(推广类,问题解决类)

插图多为具象,以使用场景,照片为主,来表现文字内容

(3)动态效果与音乐:

除了静态页面外,开始流行具有动效的页面,可以加入一些音乐与动效节奏相符合。(常见唱吧,全民k歌)

(4)视频类展示:

这种方式多用于偏向于生活记录类应用,如拍照,运动类应用。

缺点:应用较大,视频播放的时候可能会出现卡顿的情况。(常见网易云音乐,虾米,keep)

40.安卓尺寸规范

屏幕                                            尺寸                                          比例                                  程序启动图标

MDPI                                        320*480                                        1                                        48*48px

HDPI                                        480*800                                        1:1.5                                  72*72px

XHDPI                                    720*1280                                       1:2                                      96*96px

XXHDPI                                  1080*1920                                    1:3                                      144*144px

XXXHDPI                                1440*2560                                    1:4                                      192*192px

41.Android组件换算代为——DP

1DP在HDPI尺寸下=1.5PX

1DP在XHDPI尺寸下=2PX

1DP在XXHDPI尺寸下=3PX

1DP在XXXHDPI尺寸下=4PX

42.Android设计以720*1280px为前提:

状态栏:50px=25DP

导航栏:96px=48DP

选项卡:96px=48DP

标签栏:96px=48DP

按钮:80px=40DP

文本信息框高度:112PX=56DP

Android的字体:Droid sans fallback(Google自己的字体,像微软雅黑),字体12sp-28sp(SP换算跟DP一样)

在设计安卓是间距,尺寸都要以8DP,16px的倍数来设计

43.iOS与Android的区别:

(1)状态栏:

IOS的状态栏提供3种样式,分别为浅色、深色、深色半透明,高度固定

Android会因各个手机厂商自定Rom不同,会有多种样式(如MIUI中根据不同主题会有变化)

(2)导航栏:

IOS导航栏高度固定,放置在顶部,标题放置于中间,左右两侧放置按钮

Android会因不同情况去承担导航栏和选项卡,标题一般放置于左侧

(3)标签栏:

IOS高度固定,放置在底部,界面一般放置图标或者按钮

Android当顶部操作栏空间不够放置更多按钮时,会出现在底部,底部操作栏是在Android 4.0中引入的

(4)开关

IOS的开关只有一种样式

Android的开关类似IOS、复选、单选等开关

(5)对话框:

这个主要是风格不同,作用类似(Android 4.0之前,确定一般在左侧;4.0之后确定变到右侧)

(6)排版:

IOS居中排版

Android左对齐,越左对齐越Android

(7)文字:

IOS为苹方,Android为Droid sans fallback,字体大小区间也不同

(8)浮窗

Android里可以看到各种浮窗(流量、清理内存..)

IOS暂不支持这样的浮窗

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,047评论 25 707
  • iOS 9设计规范 中文版 完整版译者注:本文译自苹果官方人机界面指南 iOS Human Interface G...
    海宁Hennie阅读 13,246评论 2 60
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,550评论 1 48
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 周末,带爸妈还有儿子回老家,因为爸妈要年检,所以周五下午给儿子请了半天假,我们赶在下午上班回到县城,用了一分钟就办...
    梨雪阅读 335评论 0 0