方寸指间（笔记）

移动设计六原则：
     简   洁 ：抓住重点，敢于删除不必要的内容
                    内容优先，适时隐藏一些干扰功能，让内容最大化。多采用手势操作。
                    多了解移动端的特性（可以考虑传感等硬件设备）

     高   效 ： 避免键盘输入－－>将文字输入转化为语音、手势和传感器等方式。
                     有效触动－－>提高触动的有效性，减少用户的挫败感。

                     减少页面跳转－－>减少用户的记忆负担－－>使用抽屉，浮云，局部处理等方法 

     一致性 ： 设计上的一致性 －－ >结构布局，视觉风格
                     与平台环境的一致性－－>比如ios的返回设置
                     跨平台的一致性－－>

     反   馈 ：为用户的行为操作提供即时的反馈。比如点击后背景颜色发生变化
                    提供有价值的状态提示反馈。

     情感化 ：视觉效果  幽默风格  互动效果 智能贴心处理  个性化的设计

     移动化 ：充分了解移动设备的特征，使产品具有移动化。例如：手势， 麦克风， 摄像头，
                     震动硬件， led灯， 传感器， 重力感应。

移动平台的app有三类：
     Web app－－>通过html5实现，通过浏览器访问；
     Native app－－>通过应用市场下载，直接在本地使用。
     Hybrid app－－>也是通过应用市场下载，看起来是一个Native app，但只是一个框架壳，其中
                                的内容还是通过Web app的方式实现的。
Web app特征：
     熟悉平台自带浏览器和主流浏览器的特性。
     Web app不能锁定屏幕，需要考虑横屏竖屏
     html5虽然支持不少功能，但是有缺陷。需要考虑到。
     

《导航设计》

常见的主导航包括：标签式、抽屉式、桌面式、菜单式、点聚式等。
常见的二级导航包括：走马灯、列表、图示、选项卡

走马灯－－ > 一般适合于图片或整块内容的并列显示，通过用户的左右手势滑动来聚焦到当前内容。一般走马灯的内容不能太多，控制在5-－7个以内，避免用户操作疲劳。

主导航和二级导航可以互相转化。

《加载设计》

加载设计要考虑的原则有：让加载时间变得更加有价值；让等候变得更加有趣；保持用户感受的连续性。

界面间跳转加载

     当前页面加载－－>点击链接后，在当前页面提示正在加载或处理，成功后进入下一页。一般适合在需要处理判断的界面中。

     进入页加载－－> 点击链接后，直接进入下个页面，需要考虑分布加载，优先加载框架和默认元素，让用户能尽快看到界面的基本布局和内容。

分步加载/懒加载/预加载
分步加载 －－>优先加载占用网络资源少的内容。例如框架，文字和默认图案。
懒加载 －－>主要出现在长界面中，如手机淘宝加载宝贝列表。
预加载－－>提前加载

智能加载：考虑到网络情况。
缓存加载
加载样式
加载情感化

<引导设计>
移动设计的引导，可以让用户快速熟悉产品，在用户遇到困难前给予及时的帮助。在设计时力求简单有趣，在恰当的时间出现在恰当的地方。

引导设计的主要模式有：幻灯片引导、浮层式引导、遮罩式引导、嵌入式引导、互动式引导。

<通知设计>

应该做到及时将用户关心的信息内容传递给用户，信息要针对用户的俄需要，或者是否是紧急的内容，否则很容易引起用户的反感。同时需要注意实际的应用场景、时间点和隐私性的问题。

通知的设计原则：及时传递有效信息，要能引起用户注意，但又不打断当前任务。能做到简单预览通知内容，让用户来决断是否立即查看。如果有多条同类消息，合并处理。

常见系统通知：

1、通知中心－－>最便捷、最不干扰用户的方式。

2、顶部横幅－－>在界面顶部短暂停留，能引起用户注意，但又不打断当前界面。

3、Alert－－>打扰程度最大的通知提醒

4、Toast－－>是一种操作后的反馈，告知用户结果。可以设置时常，一般是3秒左右。

5、标志－－>告知用户有新的内容，提示查看，有部分用户习惯于消除这样的数字。

状态栏通知－－>同时可以显示更长的时间，具有全局的特性。

浮层通知－－>主要针对app内的通知提醒，一般出现在新加载的界面中，以浮层横条的方式出现。具有较强的引导性，但又不会打断当前的操作，用户可以选择是否关闭，具有临时性的特点。

标志通知－－>常见的表现方式为 红点和数字。

硬件辅助－－>例如提示声音，震动，led灯提示。

<控件设计>

字体：

在移动产品的设计上，如果没有特殊需求，字体一般都是采用系统默认的。若使用专有的字体，需要将字体打包放在app中，会额外增加app的体积，要达到与系统默认字体一致的显示效果，需要设计师在使用PhotoShop设计 IOS平台应用时，中文选择“黑体－简”或者Heiti SC

图片：

图片在移动端的应用需要注意流量和加载的问题，所以设计的时候需要根据场景来考虑图片的尺寸的大小，而不是随意使用大图。

按钮：

按钮在触屏手机只有normal 、press 、disable 三种状态。除了点击之外，按钮还有长按的属性，一般不容易被用户发现。在一些比较小的按钮上，点击区域需要比按钮本身更大，以提高用户点击的准确度。

输入框：

移动应用的输入框，一般出现在登录和表单界面。为了让输入狂更大更方便点击，可直接将输入类型的文字提示如“用户名” 、 “密码”等放置在输入框中显示。为了方便清除，在输入框中有内容的情况下，右侧可以直接显示一个清除按钮，不需要用户连续按删除键。

键盘：

选择合适的键盘类型可以让用户在输入的时候更加方便。

图形布局：

在具体设计的时候，可以根据产品的特质，以及视图要传达的具体感觉来选择使用哪种布局。

<动画设计>

动画设计原则－－>一般状态尽可能与系统默认动画模式保持一致，尊重用户习惯；效率优先，巧妙掌控时间和效果；注意降级适配，确保动画在低端机执行时也能顺利进行。

引导用户行为：当用户进入一个新的界面场景或使用一款全新的应用时，适时展示有趣味的动画或界面元素简单的位移形变，能有效引导用户进行下一步操作。

减少用户焦虑：当大量信息需要被载入或读取时，往往伴随着一段信息交换时间，可适当加入一些有趣的过渡动画。

情景融入：让简单的app带有生命力。

<适配缘由>

1、不同尺寸的屏幕：采用延伸，缩放,  调距， 截取等方法，可以很好地适配屏幕尺寸。高度考虑

2、横竖屏切换：触屏手机具有横竖屏切换的功能，在适配方案上有延伸、模式转换、增加模块、锁定几种方式。

3、硬件性能：手机的处理器性能、触控灵敏度都需要考虑。