方寸指间-移动设计实战手册

《方寸指间-移动设计实战手册》读书笔记——本来字就不多,有点像全本摘录的意思了……

封面

一、设计流程design cycle

1.web app和native app的区别?

聊聊Web App、Hybrid App与Native App的设计差异

http://www.woshipm.com/pd/123646.html

Web App 和 Native App,哪个是趋势?

http://www.zhihu.com/question/19558750

native不需要前端设计师,界面实现由开发人员完成,视觉设计师配合开发做产品切图。上线前需要审核。

2.原型宽度320PX,视觉:iOS640px,Android480px。

3.原型元素尺寸,点击区域最好44px以上,不能小于30px,文字大小可以是AXURE默认的13号字。

4.iOS,元素的尺寸和间距必须为2的整数倍

Android有ldpi/mdpi/hdpi/xhdpi/xxdpi五种规格,分别对应0.75/1/1.5/2/3五种系数的单位尺寸,480对应mdpid 1.5系数,所有元素尺寸和间距必须是6的整数倍。

同时做iOS和Android版本的APP,需要8的整数倍。

5.视觉标注和输出:320px,640px除以2,480px除以1.5,得到的单位是dp。

二、设计原则design principle

6.移动设计六原则

简洁:突出重点,在小屏幕上聚焦内容,删除、隐藏、转移。

高效:避免键盘输入(减少输入,保留之前的输入内容,关键字联想匹配;转化输入方式),有效触动(点击区域比看到的大,调整恰当间距),减少跳转,任务连续性。

一致性:降低认知成本,设计的一致性(结构布局,模块化内容,文案,交互性为,视觉风格),平台的一致性(iOS左上角返回),跨平台的一致性(多平台布局,包括iOS,Android,Web app),规范。

反馈:让用户知道自己的行为正在被后台程序响应和处理

情感化:视觉愉悦,幽默,惊喜互动效果,贴心智能关怀,个性化独特气质。

移动化:跳出PC的思维逻辑

三、平台规范platform norm

7.iOS平台

Android平台

Windows Phone平台:全景视图,无限扩展空间

8.层级返回:iOS的需要返回按钮,物理home键只负责退出。返回上一级按钮和物理返回。

编辑:iOS通过导航栏的编辑按钮,可多选;Android通过长按进入编辑模式,可多选;wp平台通常没有多选。

模板组控件:标准,帮助设计师快速搭建APP高保真设计稿。

对话框按钮:iOS一直把“否定”按钮放在左边;早期Android与iOS相反,4.0以后和iOS相同;wp平台和Windows系统一样把肯定放在左边,否定放在右边。

平台移植:优先考虑iOS

四、导航设计navigation design

9.主导航:

标签式,<5个,可融合logo、相机等

抽屉式,默认隐藏,通过左上角按钮或手势呼出

桌面式,适于工具类APP,每个工具有独立体系,也可扩展更多入口,使用趋势减少

菜单式,位于顶部,点击呼出,点击导航外的区域收起菜单,位于顶部,不适合结合手势,操作上有难度,不适合频繁切换的功能,一般使用列表来展示

点聚式,来源于path,动态,趣味

10.二级导航:(和主导航相互转化)

旋转木马

走马灯,左右手势滑动聚焦到当前内容,5-7个以内,避免疲劳。视觉暗示,显示下一张部分内容,或添加分页提示器,让用户保持清晰的方向感和对数量的认知

列表,扩展,分组,大量数据,结合图标、标题、或消息数字提示

图示,适合以图片为主的内容,及时更新,增加吸引力,配置固定的栏目或标题

分段选项卡,一般位于顶部导航栏下方,<4个

五、细节设计details design

(精华部分,加载,引导,通知,控件,动画)

11.加载,有价值,有趣,连续性。

启动页加载,logo、口号、出品方,传递品牌和情感内容;和首页一样,快的错觉;闪屏,后台配置,定期更新,运营活动和节假日。

页面间跳转,当前页加载(一般用在需要判断处理的页面,也适合web app中及时反馈加载信息)和进入页加载(点击链接后直接进入下一个页面,给用户带来流畅感觉,分步加载,优先框架和默认元素,让用户尽快看到基本布局和内容)

分步加载,优先加载占用网络资源少的内容,如框架、文字和默认图案,让用户更快看到页面框架内容

懒加载,长界面,无尽列表,达到某个点或触发拉动后加载

预加载,闪屏时提前加载首页内容;对于一些表单,提前加载表单

智能加载,不同网络情况生成不一样的界面,显示和隐藏;多套资源,根据网络情况做差异处理,如图片的高质量和一般质量

缓存加载,无网络时,看到本地缓存的有用信息,解决了设计体验和观感的很多问题。(避免空白界面,减少流量,加快访问速度, 不能无限制加载,防止占用太多系统空间)

12.加载样式

loading图标加文案说明

直接覆盖页面上方,半透明toast,嵌入界面内容

状态栏加载,系统默认,或覆盖状态栏

导航栏加载,主要是文案提示

界面中加载,主要有下拉刷新、懒加载和toast加载

工具栏加载,少见,例,iOS邮件列表

情感化:旋转,特别样式,意外惊喜,乐趣

13.引导,快速熟悉产品,遇到困难及时帮助,简单有趣,恰当时间和地方。

幻灯片引导,一般用于首页启动,聚焦,精简,创新。很容易被用户直接划过,追求核心和简单。故事型,功能型,游戏型,左右上下滑动翻页,自动翻页。3-5个。

浮层式引导,半透明,轻量级,目标性强,结合文案。非模态浮层,三秒左右消失;模态浮层,需用户点击确认。

遮罩式引导,强势的引导方式,半透明,通过各种图形结合盖住界面内容,需要确认或退出

嵌入式引导,状态栏,导航栏,工具栏,内容区。局部嵌入(温和,保留当前内容,增加引导提示)和整体嵌入(代替,一般用于“空状态”)空状态包括初始状态,清空状态和出错状态。

互动式引导,比较隐蔽,手势互动(加载),语音操作(告知用户正在接收)

多媒体引导,动画,音视频

14.通知设计,信息的传递,引起注意而不打断当前任务,针对性,不引起反感。

通知中心,系统,最便捷最不影响用户

顶部横幅,顶部短暂停留,引起注意,而不打断当前界面

alert,打扰程度最大,打断所有操作

toast,操作后反馈,一般3秒左右

标志,告知用户有新内容,提示查看,用户习惯消除这样的数字角标

15.状态栏

Android,电话、短信等

iOS,本身不带状态栏通知,但设计APP时可以覆盖状态栏

16.浮层通知,用于APP内的通知提醒,以浮层横条形式出现,较强引导性,不打断当前操作

标志通知,红点和数字,数字过大时容易被忽略。分为点击后消失和查看后消失

硬件提示,借助提示音,LED灯等

17.细节设计

文字

Photoshop,iOS平台,中文用黑体-简或Heiti SC,英文Helvetica(Neue)

Android平台,中文用Droid Serif,英文用Roboto

22,18,14,12,9dp,状态有:常态、选中、强调、辅助说明、链接等

图片(尺寸和质量)260×260,220,180,145,90,60×60

按钮,没有hover划过状态,有normal,press和disable等,长按属性,小按钮的点击区域要比本身大提高点击的准确度

输入框,默认显示提示文字,光标插入提示文字不消失,输入文字显示清除按钮

18.键盘,不同场景不同的键盘面板。

19.图形布局,细节的丰富程度,图片裁切方式,空间利用,信息缺乏与过载,趣味性与新鲜感,大小对比

20.卡片信息集中化,整体感,易操作,更大的点击区域。翻转,折叠展开,堆叠,自适应。

21.动画设计:告知用户来往,引导用户行为,减少用户焦虑,情景融入。

六、适配方案adaptation plan

22.不同尺寸的屏幕(延伸,缩放,调距,截取),横竖屏切换(延伸,模式转换,增加模块,锁定),硬件性能(降级处理)。

23.延伸,文字、背景、文本框、按钮、下拉框等

缩放,图片

调距,不适合拉伸的图标和图片

截取,上下截取、左右截取,保留需要的部分,大图

闪屏,启动页,纯色背景(延伸),大图背景(截取)

满屏设计,防止长屏幕手机底部出现空白,优先考虑宽高比(0.56-0.67)最小的屏幕开始。

24.横竖屏切换

宽高的变化

模式转换

增加模块

锁定转向

七、移动特征mobile feature

25.用户:年龄,性别,学历,职业,收入,平台差异,隐私安全,持机方式,拇指

26.常用手势

tap点击,

double tap双击,智能放大或缩小

drag拖拽,移动

flick滑动,切换内容,滚屏

shake晃动,

pinch/spread放大/缩小

press长按

twist双指旋转

27.环境:

碎片化时间,内容突出,快速获取信息;记忆上次操作,让打断的操作继续进行;清晰显示当前位置

应用时间段,娱乐、咨询、社交,注意时间高峰,对营销的好处

环境光,自动调节屏幕亮度,夜间和白天模式

噪声,识别环境声调整系统音量;语音即时聊天工具,扬声器和听筒播放

用户姿势

不稳定的网络,切换场景,缓存和预加载

流量,包月,月底谷底

电量,不足20%会忧心忡忡,寻找电源或放弃不必要的使用手机的情况

28.硬件:

硬件按钮

iPhone,一个home键,单击返回主屏幕,双击可以切换任务或关闭后台程序

Android,菜单,返回主界面,返回按钮;新版虚拟化到界面

Windows Phone,返回,返回主界面,搜索

29.屏幕:电容屏,多点触控

屏幕尺寸,物理尺寸,对角线

屏幕分辨率,屏幕上像素的个数

屏幕密度,每平方英寸的像素点的数量

存储空间,清除机制,自动清理

摄像头,前置和后置;扫描二维码,屏幕操控,截屏,脸部识别,认字翻译,镜子,测距离……留给开发者和设计者

麦克风和扬声器

距离传感器,靠近耳朵,屏幕熄灭,防止脸部误操作,节省电量

加速传感器,加速度大小和方向

GPS和方位传感器,位置和朝向

三轴陀螺仪,重力感应只是单维度;射击类游戏,街景浏览

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

推荐阅读更多精彩内容