《触动人心—设计优秀的iPhone应用》读书笔记(二)
1. 应用要给用户带来物理真实感
iPhone的操作系统常常会让用户产生现实世界的错觉,轻拂滚动一个列表,会看着它因“摩擦力”逐渐变慢;列表滚到尽头时,居然会反弹。所有一切都和我们在现实世界中熟悉的自然规则一样运作: 惯性、动量、摩擦力,处处皆是。
因此,一个iPhone应用的界面要在感觉上像个真实设备,更重要的是,它需要满足操作系统给用户带来的期望和硬件上点击带来的真实存在感。比如,“报刊杂志”应用,不仅设计成书橱的外形,向下拉动时,还会有反弹的惯性。是完全拟物进行设计的。
2. 为拇指点击做设计
iPhone是一个用手操作的玩意,而且大家很喜欢用单手操作,因此需要为这种操作方式优化设计。那么拇指点击有什么特点呢?
虽然拇指能划到整个整个屏幕,但只有三分之一的屏幕是真正容易触及的。如下图所示,对于右手拇指来说,屏幕上点击舒适的区域分布在左边和屏幕下方(右上角和右下角是最难点击的区域)
这就是为什么工具栏和标签栏一般放在iPhone屏幕的底部(传统桌面软件都习惯把菜单放在屏幕或窗口的顶部)。常用的按钮还有导航标签应该放在屏幕底部的左边,不常用的按钮还有会改变数据的按钮会被塞到右上方。比如,如下图所示,“编辑”按钮一般都放在右上角。
再比如,Twitterterrific这个应用的工具栏,将"刷新"、"写微博"两个功能的图标放到左边,而“删除”则放到了右边。就是为了让用户更加方便的点击。
3. 44像素的控件
苹果公司把手指的点击大小定义为44像素,这个尺寸在iPhone控件中随处可见。
理想状态下,所有按钮或点击目标都应该保持在44*44像素,但这并不是说你看到的点击目标一定要那么大,其实这还包括了按钮自身延伸出的整个点击区域。比如,一个29像素的按钮,如果点到它的左边右边,只要在44的范围之内,也算是点击到了。
苹果的标准控件基本都符合这个标准,除了键盘。键盘的按键只是44*30,也只有这样,才能将整个键盘都塞进去。(所以这个键盘超级难用...)
4. 别塞太多的图标
标准的标签栏和工具栏只有5个标签的位置,设计时,尽量遵循规则。否则就会显得太拥挤,容易点错。
焦点应用讲解: PCalc
(1)设计师没有将MAC版本直接搬到iPhone,而是进行了重新设计。根本原因就是iPhone屏幕太小,塞不下那么多按钮。
(3) 科学计算器通常功能比按键多,以前,一般会添加"2nd"按钮解决问题。而在iPhone上,虚拟键盘便可以解决这个问题。PCalc的虚拟键盘可以为不同的需求呈现不同的布局,从而容下所有功能。
(4)在提供不同键盘布局的基础上,它还为用户提供了不同的主题样式。(为了让这件事情更方便,他进行了一定的调整。原来的按钮是图片事先渲染好了的,后面改为了即时生成的方式)
在介绍了几条iPhone屏幕的物理特点之后,下面介绍几条iPhone应用普遍遵守的友好设计指南。
1. 将重要信息放到上面去
屏幕底部是拇指点击最舒适的区域,也是容易被挡住的区域。因此,记住一条准则: "主操作在下,主内容在上"。比如,当你点击标准文本输入框要打字时,内置的虚拟键盘从下方弹出,输入框和备选的输入内容则位于屏幕顶部。
2. 基于44像素的设计韵律
只要你的设计大致基于44像素的栅格,界面上的元素与操作手机的手指就能和谐共处。这个长度是自然得来的,因为它也是一些标准控件的大小规律。
实例,iPhone主屏上的图标排列行高为88像素,通过这种方式,iPhone主屏按着44像素设计韵律所设计。
3. 质疑滚屏
尽量不要使用滚动屏,因为滚动需要体力和脑力,而应用设计师的任务就是消灭多余的脑力和体力劳动。
很多应用都致力于单屏设计,比如内置的“天气”应用。它消减了不少关于天气的信息,对内容进行精心设计,从而实现了单屏的设计。
优秀的工具型应用,往往以大大的文字和图片为主,衬以大量空白,高速的传递简单信息。这是设计触动人心的应用的基本原则: 简洁胜过繁密。争取让应用通过速览测试吧(把应用握在一臂之远的地方,依然能轻松的获取并理解应用上的信息)比如下图中的两个应用Surf Report和Tea Round,都是能够通过速览测试的工具型应用。
4. 减少,减少,再减少
5. 秘密的面板
对于大多数人来说,基本的功能就够了。但对于某个应用的高级用户来说,还需要更多的功能。加入这些额外的功能和工具后,如何能够继续保持界面的简洁呢?
以Twitter为例,一条微博中,可能包含视频链接,可能附带地理位置信息,可能要提及某个用户,还可能包含了某个话题。如何既能保证快速发出微博,又能让用户找到这些重要功能,同时还能保持界面简洁呢?如果,我们将键盘加入了这个乱阵当中,额外界面就会将你正在打的字给挤掉,而这些字又是最为重要的内容。
《触动人心—设计优秀的iPhone应用》读书笔记(二)相关推荐
- 深入理解JVM读书笔记二: 垃圾收集器与内存分配策略
3.2对象已死吗? 3.2.1 引用计数法 给对象添加一个引用计数器,每当有一个地方引用它的地方,计数器值+1:当引用失效,计数器值就减1;任何时候计数器为0,对象就不可能再被引用了. 它很难解决对象 ...
- 《Docker 技术入门与实践》-读书笔记二
<Docker 技术入门与实践>-读书笔记一 <Docker 技术入门与实践>-读书笔记二 一.数据管理 用户在使用 Docker 的过程中,往往需要能查看容器内应用产生的数据 ...
- 《Introduction To Modern Cryptography》读书笔记二
<Introduction To Modern Cryptography>读书笔记二 本笔记纯粹个人读书习惯与相应见解,内容归纳完全出于个人需要与个人局限,如有修改意见(比如哪儿应该是值得 ...
- oracle直查和call哪个更快,让oracle跑的更快1读书笔记二
当前位置:我的异常网» 数据库 » <>读书笔记二 <>读书笔记二 www.myexceptions.net 网友分享于:2013-08-23 浏览:9次 <> ...
- 《How Tomcat Works》读书笔记(二)
<How Tomcat Works>读书笔记(二) 这是<How Tomcat Works>第一二章的读书笔记.第一张主要写了一个静态资源处理的web服务器,第二章加了对ser ...
- 3D游戏设计读书笔记二
3D游戏设计读书笔记二 一.简答题 • 解释 游戏对象(GameObjects) 和 资源(Assets)的区别与联系. GameObjects是一个具体的实例,Assets是包括诸多游戏素材的资 ...
- 《李元芳履职记》读书笔记二 IT技术管理的沟通与团队建设
<李元芳履职记>读书笔记二 接一 https://blog.csdn.net/qq_45937199/article/details/103305223 IT技术人员从技术岗走向管理岗,所 ...
- python图像处理《数字图像处理与python实现》读书笔记二:空间滤波
文章目录 重要! 第三章 空间滤波 概览 3.1 空间滤波基础 3.1.1 空间滤波的机理 3.1.2 空间滤波器模板 3.2 平滑处理 3.2.1 平滑线性空间滤波器 3.2.2 统计排序滤波器 3 ...
- 第一行代码 Android读书笔记(二)
第一行代码 Android读书笔记 第三章 软件也要拼脸蛋-UI开发的点点滴滴 常用控件的使用方法 详解4种基本布局 自定义控件 最常用和最难用的控件-ListView 更加强大的滚动控件-Recyc ...
- 《淘宝技术这十年》读书笔记 (二).Java时代的脱胎换骨和坚若磐石
马云说过"一个好的东西往往是是说不清楚的",姑且不论这句话的对与错.但我真的很佩服<淘宝技术这十年>这本书的作者子柳,能够通过淘宝的一些故事,按照时间顺序和IT发展的各 ...
最新文章
- jquery 取消 radio checked 属性,重新选中的问题解决
- 图像窗口方面 window
- /usr/bin/ld: cannot find -lfontconfig解决方法
- EXT.NET复杂布局(四)——系统首页设计(上)
- 状态管理之cookie使用及其限制、session会话
- PHP 发送HTTP post请求发送和获取
- Luogu P4478 [BJWC2018]上学路线 卢卡斯+组合+CRT
- 借贷记账法下的账户对应关系_会计实操借贷记账法记账规则——会计干货来了快记啊!...
- Grad-CAM在语义分割中的pytorch实现
- matlab临界比例度发确定pi,PID控制器参数整定的MATLAB/Simulink仿真
- 【人物志】美团技术委员会前端通道主席洪磊:爱折腾的斜杠青年
- 监督学习算法的发展史和它们之间的关系:从文氏图到回归、决策树、支持向量机和人工神经网络...
- 如何打造企业短视频账号的人设?
- 有得必有失,你该把技术做多细?
- 2017-2018-1 20162316刘诚昊 实验二 树
- CSS的Flex布局的学习
- PaddleDetection进行路标检测
- 计算机科学与技术专业的大学学习内容
- 打字会覆盖后面原有的字解决方案
- JavaScript入门,js基础教学