在&b&&u&交互细节&/u&&/b&上有哪些区别，这问题回答起来估计就有难度了！&br&&blockquote&&b&事先声明，文长...... -_-'&/b&&/blockquote&首先从&b&导航模式&/b&开始，iOS 应用大多数情况,只提供单一的路径。无论什么样的程序，都只有一个窗口，这个窗口用于放置程序的内容和功能，用户不会意识到这个窗口。在
iOS 设备中,用户觉得程序就是依次呈现的一屏又一屏图像。&br&&br&可以把一屏图像想象成一个离散的视觉状态或者模态。一个程序拥有的屏数或多或少,每一屏都是各种素材和控件的组合，由此而衍生了iOS 应用内的多种导航模式，如：平铺、列表及树状等。涉及到层级导航通过应用内左上角back键进行返回操作（图1）。&img src=&/575bb06b4dc78c4b1849aaf78e87c4c7_b.jpg& data-rawwidth=&320& data-rawheight=&45& class=&content_image& width=&320&&&i&图1&/i&&br&&br&应用内的导航与系统导航分隔开，iOS应用内一般无「退出」选项，通过实体home按键返回主屏界面及退出应用（手势支持）。&br&&br&Android 2.3和更早的系统依赖于手机硬件的返回键来支持应用程序的导航。Android
3.0 中引入了操作栏,于是出现了第二种导航机制:
“向上”按钮（图2）。&img src=&/dbcc7485f22dabcf43bd7ea43ad7d7bb_b.jpg& data-rawwidth=&680& data-rawheight=&93& class=&origin_image zh-lightbox-thumb& width=&680& data-original=&/dbcc7485f22dabcf43bd7ea43ad7d7bb_r.jpg&&&i&图2 &/i&&br&&br&向上按钮被用于基于层级关系的应用程序中的界面切换。系统的“返回”按键是基于用户最近查看，以时间倒叙的方式连接的界面历史的导航（但有时候又不遵循这条逻辑）。&br&&br&Android应用导航主要分为以下三类：&br&1.应用程序内的导航&ul&&li&
通过多个入口进入到界面&br&&/li&&li&
界面内的视图间导航&br&&/li&&li&
同一层级的界面间导航&br&&/li&&/ul&2.应用程序外的导航（通过主屏Widgets和通知）&ul&&li&
间接通知（通知栏内的消息、mail内的日历等）&br&&/li&&li&
弹出通知&br&&/li&&/ul&3.应用程序间的导航
&br&&br&当上一个查看的界面是当前界面的父层级时,点击“返回”按键和点击“向上”按键的结果是一样的。然而,与“向上”按键不同的是,
“向上”按键可以确保用户停留在应用程序中,而“返回”按键可以让用户回到系统首页,甚至会回到另一个应用户程序。&br&&img src=&/8f71f1905dcdc1d2699eed606e65d35e_b.jpg& data-rawwidth=&701& data-rawheight=&805& class=&origin_image zh-lightbox-thumb& width=&701& data-original=&/8f71f1905dcdc1d2699eed606e65d35e_r.jpg&&&i&图3&/i&&br&&br&Android 4.x后采用将四大天王实体键修改为三个虚拟按键（返回、Home、多任务），意在解决Android设备碎片化的问题，并希望能够解决Android一直以为存在的导航问题，但在实际当中该问题依然存在（魅族的Smart bar同样在尝试解决这个问题，通过有效的设计形成与其它手机的差异化）。&br&&img src=&/bd8fe7c8273eac9f0a74237_b.jpg& data-rawwidth=&331& data-rawheight=&90& class=&content_image& width=&331&&&i&图4&/i&&br&&br&在为Android应用进行设计时，请充分考虑导航问题，避免用户在使用过程中迷失，并且在考虑按钮位置及操作方式时注意Android虚拟键的误操作问题。&br&&br&&b&2. 操作栏（工具栏）&/b&&br&iOS工具栏一般处于屏幕的底部，但iPad端也可能出现在顶部。工具栏上的控件等宽放置。控件会随着屏上内容的切换而改变,因为内容与用来操纵它的控件是匹配起来的。在工具栏上放置当前情景下用户最常用的功能。每个工具栏上的控件至少要保持
44×44 points的面积（Retina屏宽高均提高2倍
one point equals two pixels ），方便用户操作。&br&&img src=&/1af2ca85df590faa071d8b_b.jpg& data-rawwidth=&320& data-rawheight=&44& class=&content_image& width=&320&&&i&图5&/i&&br&&br&Android操作栏是 Android
应用程序的最重要的结构元素。它几乎在应用程序的每个界面的顶部都有一块专用的区域（图6）。 &br&&img src=&/393325cca5b15fc70892c35_b.jpg& data-rawwidth=&724& data-rawheight=&114& class=&origin_image zh-lightbox-thumb& width=&724& data-original=&/393325cca5b15fc70892c35_r.jpg&&&i&图6&/i&&br&&br&大多数应用程序的操作栏被划分为四个不同的功能区域 ：&br&1.应用程序的图标：图标能够帮助用户对应用进行识别，如果当前显示的不是应用程序的最高层界面,保证在图标左边显示“向上”符号。
&br&2.视图控件 ：如果你的应用程序在不同的视图展示内容,操作栏的这个部分可以允许用户切换视图
&br&3.操作按钮
：操作栏里的操作按钮会展示你的应用程序的最重要的操作。&br&4.更多操作 ：把不常用的操作放到更多操作里。 &br&&br&Android 3.0在某些应用界面引入了长按进入选择模式，4.x后对选择模式进行了改良引入了情境操作栏（CAB，contextual action bar），与操作栏出现在同一个位置（图7），后面会与iOS的编辑模式进行比较。&img src=&/dd441cc268bcd5b978664ca_b.jpg& data-rawwidth=&740& data-rawheight=&98& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/dd441cc268bcd5b978664ca_r.jpg&&&i&图7&/i&&br&&br&Ps. Android里也有底部操作栏，但仅为顶部操作栏的扩展，官方称为「Split Action Bar」（图7）。&img src=&/08abfd07eb16d1e821a7e1_b.jpg& data-rawwidth=&277& data-rawheight=&164& class=&content_image& width=&277&&&i&图8&/i&&br&&br&在进行设计的时候需要考虑操作栏如何适应不同的屏幕方向和屏幕尺寸，进行动态的调整以达到最优的效果。&br&&br&&b&3. 多任务&/b&&br&iOS通过双击Home键及四指手势激活多任务选择器（图6）。大多数程序在转移到后台的时候,会被挂起。被挂起的程序会展示在“多任务选择器
(multitasking
bar)”中，帮助用户快速找到近期使用的程序。当用户重启挂起的程序时,它能够从退出时所在的那个点迅速恢复,无需重新渲染界面。 &br&&br&当用户激活多任务选择器后：&br&1.向左滑动，查看更多其它任务。&br&2.向右滑动（首屏任务界面），
进入侧快捷面板区域。&br&3.长按任务，进入删除模式。&br&&img src=&/fcb8f35aadcd2f5_b.jpg& data-rawwidth=&1339& data-rawheight=&205& class=&origin_image zh-lightbox-thumb& width=&1339& data-original=&/fcb8f35aadcd2f5_r.jpg&&&i&图9&/i&&br&&br&为iOS 应用进行设计时，请考虑iOS双层状态栏（&strong&double-high status bar&/strong&），显示当前正在进行的任务：通话中、录音中等，应用布局不会因高度的变化而出现问题。&br&&br&Android的多任务界面提供了一个最近使用的应用程序之间切换的有效方式。并被赋予一个独立的虚拟按键，位于导航栏的最右侧,用以显示用户最近使用的应用程序及任务,它们通过时间顺序进行组织排列,最近使用的应用程序放置在近期任务界面的最底部。 &br&&br&近期任务管理，当用户点击近期任务按键后：&br&1.选中任务左/右滑动，删除任务。&br&2.长按任务，将弹出任务弹窗，「从列表中删除」、「应用信息」&br&&img src=&/7dd4e9bfea404aaa90976e_b.jpg& data-rawwidth=&220& data-rawheight=&266& class=&content_image& width=&220&&&i&图10&/i&&br&&br&&b&4. 通知中心&/b&&br&早期iOS系统并没有通知中心，后引入Android系统中通知中心设计，这是一种能够使用户更为简单、方便的查看各种通知信息的方案。用户通过手指从顶部边缘下滑激活通知中心（与Android一样），在应用全屏时用户需要两次操作才可激活通知中心（防止误操作）。用户在通知中心内可实现应用间的调用或跳转，需要通过iOS的多任务才可返回之前应用（Android采用系统的back键，导致应用与应用之前的逻辑复杂性的增加）。&br&&br&通知中心一般承载以下类型信息：&br&1.消息。&br&2.事件。&br&3.更新。&br&4.状态&br&&img src=&/769f173ab4f1d7c8ddefc3e_b.jpg& data-rawwidth=&320& data-rawheight=&460& class=&content_image& width=&320&&&i&图11&/i&&br&&br&通知中心是早期Android系统中的优秀设计，在之后的更新中也不断被赋予新的意义。Android的通知系统被设计为当用户聚焦某个任务时能快速告知用户一些事件，但还是应该谨慎决定创建一个通知。&br&用户在通知中心内实现应用间的调用或跳转，但需要详尽考虑Android系统导航「back」、「up」对跳转逻辑的影响。&br&&br&因Android的开放性，导致通知中心所显示的信息可进行相应的设计，但需注意以下几条：&br&1.使其私有化
。&br&2.导航到正确的地方 &br&3.对时间敏感事件请增加时间戳
&br&4.对通知进行合并&br&5.自我清理，如某个事件在具体时间发生，过期后该通知可能对用户来说并不重要。&br&6.使用不同的图标或提示。&img src=&/0b6c4f63c4d65b45fb8f2e703d0a2ae5_b.jpg& data-rawwidth=&758& data-rawheight=&526& class=&origin_image zh-lightbox-thumb& width=&758& data-original=&/0b6c4f63c4d65b45fb8f2e703d0a2ae5_r.jpg&&&i&图12&/i&&br&&br&写到这插个题外话，微软的Win8木有通知中心的设计，不知道是因为赶工还是设计理念的原因，导致Surface平台的通知有点像早期iOS的情况，Win8主要依靠三种通知方式进行提示：1.屏幕右上角通知。 2.锁屏界面的更新和详细状态。 3.「开始」屏幕上的磁贴。&br&&br&&b&5. 通知方式&/b&&br&目前iOS中的通知具体有四种方式：&br&1.条幅式通知。&br&2.弹出式通知。&br&3.Icon右上角消息式通知。&br&4.声音通知。&br&&br&每种通知方式给用户的通知强度及心理影响均不同，在设计时考虑希望给用户呈现的消息级别及相对应的通知强度。应用的通知及是否显示在通知中心，用户均可在设置中进行设置，请谨慎使用通知，不要让用户感到困扰及厌烦。&br&&img src=&/25d6e6a8db2cebfacacdbb_b.jpg& data-rawwidth=&457& data-rawheight=&290& class=&origin_image zh-lightbox-thumb& width=&457& data-original=&/25d6e6a8db2cebfacacdbb_r.jpg&&&i&图13&/i&&br&&br&Android中的通知具体有以下四种方式&br&1.通知区域提醒。&br&2.进行中的通知&br&3.弹出式通知。&br&4.提示条通知。&br&&br&其中弹出式及提示条通知仅在当前运行的应用中出现，显示需要用户立即处理的任务或提醒。进行中的通知可让用户了解正在后台运行的进程。例如音乐播放器会在通知系统里一直显示
当前正在播放的曲目直到用户手动停止播放。在顶部状态栏通知区域以图标表示最近的通知，打开通知中心即可查看这些通知，平板电脑通知区域被集成到屏幕底部的系统栏中。&br&&img src=&/762b5c9c5f0a6d42c9943_b.jpg& data-rawwidth=&733& data-rawheight=&262& class=&origin_image zh-lightbox-thumb& width=&733& data-original=&/762b5c9c5f0a6d42c9943_r.jpg&&&i&图14&/i&&br&&b&&br&&/b&&br&&b&6. 编辑模式（选择模式）&/b&&br&iOS应用在可供用户编辑的界面一般通过Table view的「编辑」键进入编辑模式，进入编辑后顶部导航栏发生变化，根据内容的不同出现不同的编辑选项，允许对内容进行多项，执行操作时将应用到多项所选内容，在编辑项过多时，可采用底部操作栏的设计。用户在编辑模式下执行完编辑后点击「完成」退出当前模式。&img src=&/e6138576bcecb93fabf0d_b.jpg& data-rawwidth=&740& data-rawheight=&346& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/e6138576bcecb93fabf0d_r.jpg&&&i&图15&/i&&br&&br&Android通过长按进入选择模式，选择内容后出现的情境操作栏（CAB）是一个覆盖在你的应用程序当前操作栏上的临时操作栏，它在用户长按某个可被选择的内容项后出现（图7，往上找哦）。 进入选择模式后，通过点击可选择多个内容项，在情境操作栏触发一个操作会应用到所有被选中的内容，执行操作后将退出选择模式，情景操作栏也随着消失。&br&&br&应用程序需要支持同时选择多个内容项时，Android官方建议使用情境操作栏，并对长按手势进行预留。&br&&img src=&/b7cea9dff8da9e6225299d_b.jpg& data-rawwidth=&400& data-rawheight=&340& class=&content_image& width=&400&&&i&图16&/i&&br&&br&iOS在文本视图、web 视图和图片视图里调出编辑菜单,来执行剪切、粘贴和选择等操作，菜单出现在需要进行处理的内容附近，与内容产生关联，轻量的悬浮式设计避免了模式化的状态（用户可点击任何区域取消悬浮菜单）。应用程序可调整菜单的行为，给用户更多控制内容的操作。&br&&img src=&/04d18aa1f4cd5cc597b010b5a03b5244_b.jpg& data-rawwidth=&200& data-rawheight=&72& class=&content_image& width=&200&&&i&图17&/i&&br&&br&Android可以在文本框及其它文本视图中长按选择任何文字，这个操作会触发一个文本选择模式，便于扩展选择或对选定文本进行操作。同样，该选择模式会激活情境操作栏。Android 4.x对选择滑块的处理很优秀，便于用户选择，能够精确进行定位，单滑块进行光标定位时尤为管用。&br&&img src=&/bdc28e0615d9_b.jpg& data-rawwidth=&508& data-rawheight=&286& class=&origin_image zh-lightbox-thumb& width=&508& data-original=&/bdc28e0615d9_r.jpg&&&i&图18&/i&&br&&br&&b&7. Widgets（小部件）&/b&&br&这个应该先从Android谈起，Widgets一直是Android系统的亮点（个人不太喜欢，可能是因为Android系统的复杂性），Android系统导航层级就分为了主屏幕和应用列表，主屏幕是一个可定制的区域，用以放置应用程序的快捷方式、文件夹、及Widgets，通过用户左右划动屏幕切换到不同的主屏幕面板。 应用列表内区分为App区域及Widgets区域，随着用户安装的应用越来越多，相应的Widgets也越来越多... -_-'
一个应用可以弄多个不同size的Widgets，&i&好像又有点扯远了！&/i&&br&&br&Android系统的Widgets分为以下四种类型：&br&1. 信息型Widgets&br&2. 聚合型Widgets&br&3. 控制型Widgets&br&4. 混合型Widgets&br&&br&&img src=&/d605a42c03b67f14ce1c2d3e7227b10b_b.jpg& data-rawwidth=&643& data-rawheight=&402& class=&origin_image zh-lightbox-thumb& width=&643& data-original=&/d605a42c03b67f14ce1c2d3e7227b10b_r.jpg&&&i&图19&/i&&br&&br&iOS平台可能大多数人觉得并没有Widgets的概念，通知中心内的天气及股票可以算是iOS对Widgets的试水（个人感受），虽然简单，但相信应该会在未来看到iOS对这一方面更深入的尝试吧。 ^_^&br&&br&&b&8. Tab栏&/b&&br&iOS的Tab栏用于切换子任务、视图和模式。Tab栏位于屏幕的底部,并且始终可见。Tab 栏上展示图标和文字，当用户选中某个tab时，这个tab处于高亮状态。&br&&br&在 iPhone 上，tab 栏一次只能显示 5 个以内的页签。如果程序需要更多的tab，tab栏可以展示前四个，第五个放置「更多」，用列表的方式呈现其余的项目。 &br&&br&&img src=&/aefc11adb938cc34762c1e_b.jpg& data-rawwidth=&691& data-rawheight=&164& class=&origin_image zh-lightbox-thumb& width=&691& data-original=&/aefc11adb938cc34762c1e_r.jpg&&&br&&i&图20&/i&&br&&br&Android的Tab栏用于探索和切换不同视图或功能,也可用于浏览不同分类的内容集合。主要有三种tab类型：&br&1. 滚动tab&br&2. 固定tab&br&3. 堆叠tab&br&&img src=&/de55ba8b69b986b5e451836_b.jpg& data-rawwidth=&1440& data-rawheight=&414& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/de55ba8b69b986b5e451836_r.jpg&&&i&图21&/i&&br&&br&&br&头又开始痛了，不想写了，就到这吧... T_T&br&&br&两个系统还有很多细节上的不同，像Android的边界反馈效果与iOS的回拉效果、Activity Indicator的对比、dialog上确认键两个系统分别在不同的位置等，以及iOS特有功能上的一些交互特性Passbook、iCloud、iAd等等......&br&&br&&i&Ps.以上每个点均能单独拿出来写个长文&/i&
在交互细节上有哪些区别，这问题回答起来估计就有难度了！ 事先声明，文长...... -_-'首先从导航模式开始，iOS 应用大多数情况,只提供单一的路径。无论什么样的程序，都只有一个窗口，这个窗口用于放置程序的内容和功能，用户不会意识到这个窗口。在
&p&带 Touch Bar 的 MacBook Pro 测评渐渐出来了，我之前在「Pro」这篇通讯中的观点得到了证实。伦敦的视频剪辑师 Thomas Grove Carter 说&a href=&/?target=http%3A//www.huffingtonpost.co.uk/thomas-grove-carter/one-professionals-look-at_b_.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&新机器的性能对他完全足够&i class=&icon-external&&&/i&&/a&：&/p&&blockquote&&p&整整一周，我都在用 Final Cut Pro X 在它上面剪 5k ProRes 视频，体验如黄油般顺滑……我用的这台电脑的配置足以驱动两台 5k 显示器……最初我对于 Touch Bar 十分怀疑……但开始用了之后妳就明白了。妳冰冷的心会软下来。&/p&&/blockquote&&p&很多视频剪辑师怀疑 Touch Bar 怎么可以用来做真正的剪辑工作。Carter 的态度则进步得多：&/p&&blockquote&&p&多年来我们在图形介面上都只用单一的鼠标输入，然后逐渐加入了更多按钮、滚轮、以及带手势的触摸板。Touch Bar 更进一步，让我们可以同时进行几项输入，还能和触摸板配合使用。我用得越多，越不想再用键盘快捷键。如果按钮就在我面前，为什么要用两只手或多根手指操作快捷键？而且它是随语境变化的。&/p&&/blockquote&&p&如我之前所说，&a href=&/?target=https%3A//ipn.li/yitianshijie/28/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&「用十年时间干掉快捷键，这才是苹果弥足珍贵的地方」&i class=&icon-external&&&/i&&/a&。我很享受使用快捷键的快感。但触屏的出现是一条 Bruce Sterling 所说的「不归线」。「水手可以变成农夫，但如果由铁和蒸汽机构成的机器时代的水手回到之前的木质手工时代，数百万人就会饿死，」他说。[1]虽然十分遗憾，但我已经无法回到手写字的时代了。而完全由触屏构成的输入方式一定会让实体键盘成为一种 vintage 趣味。Steven Levy &a href=&/?target=https%3A///apple-goes-part-time-on-touch-8e7b0a4d371c%23.jgq6vr6u7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&说&i class=&icon-external&&&/i&&/a&：&/p&&blockquote&&p&（Touch Bar）首先很好看，像一条色彩斑斓的意大利宽麵。它的高分辨率在显示彩色内容时尤其令人心旷神怡，和实体键盘那带有蒸汽朋克感的顽固存在形成了鲜明对比。&/p&&/blockquote&&p&心旷神怡并不仅仅来自高分辨率和缤纷的色彩，更来自于 Touch Bar 上的各种动画效果。在我看来，苹果在各类软件系统中对于动画的高度重视并没有得到足够的承认。这属于那种所有人都为之赞叹的细节，但很多人不愿给它太高的地位，以免自己显得「肤浅」或流于「玄学」。不过她们的身体都是老实的。在最初阶段，Touch Bar 的成败完全取决于观感和手感，只有官能上的冲击才能让人悬置对新技术的怀疑以及保持现状的本能，尝试跨过那条不归线。这里的逻辑很简单：Touch Bar 任何功能上的「无意义」与「鸡肋感」都可以通过软件更新在日后调整，第三方开发者也会在未来几年逐渐摸索出利用 Touch Bar 的最佳实践。但如果一开始的体验无法诱人入局，所有这些事都不会发生。&/p&&p&所有认为这次的 MacBook Pro 不够 pro 的人，请设想一下那个妳们愿望成真的平行宇宙。如果新 MacBook Pro 搭载了更新一代的 Intel CPU（或是换了 ARM），内存 32 GB 起跳，键盘沿用旧款而非十二寸 MacBook 的浅键程，接口不变，难道不恰恰才是坐实了「苹果已丧失创新能力」的认知？现在抱怨 Touch Bar 无聊的人，难道不会抱怨「苹果终于也走上了跑分的道路」？当 The Verge 的测评者&a href=&/?target=https%3A///watch%3Fv%3DT-59XHKt9xU& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&说&i class=&icon-external&&&/i&&/a& Touch Bar 不会令 Mac 发生革命性的变化时，他误解了革命的意思。革命是要改变既有。革命者关心的不是已经拥有的人（例如会去写测评的人），而是尚未拥有的人。如果妳恰好属于已经先人一步享受着那&a href=&/?target=http%3A///quotes/681-the-future-is-already-here-it-s-just-not-evenly& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&分布不均的「未来」&i class=&icon-external&&&/i&&/a&的人，革命者最关心的就不再是妳。Walt Mossberg 几十年前第一次给《华尔街日报》写科技专栏的第一句话：「电脑太难用了，这不是妳们的错。」革命者是为「妳们」设计电脑的。&/p&&p&我为什么要反复谈 Touch Bar？川普的当选令我担心的并不是具体政策和治国方面的问题，甚至也不是少数族裔或弱势群体的境遇问题，而是细腻、微妙、暧昧、新奇、和难以言说的 sensibilities 在世界中的地位进一步下降的问题。这些东西是每个人都能感知的，但粗鄙和浅陋所自带的某种变态快感不断扭曲着人们对它们的认知。Touch Bar 是一个反例，一种对抗的姿态。和去掉耳机口相比，在地球人膜拜数据的时代顽固地推进那不可量化的「感觉」，才是真正体现勇气之处。&/p&&p&—&/p&&p&1. &em&Shaping Things&/em&, MIT Press, 2005&/p&&p&?&/p&&p&本文系二零一六年十一月十五日《一天世界》会员通讯。会员通讯是&a href=&/?target=https%3A//blog.yitianshijie.net/membership/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《一天世界》会员&i class=&icon-external&&&/i&&/a&专享的福利之一，若您喜欢这篇文章，请考虑&a href=&/?target=http%3A//yitianshijie.net/member& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&成为会员&i class=&icon-external&&&/i&&/a&（每周五篇会员通讯，这里是&a href=&/?target=https%3A//blog.yitianshijie.net//newsletter-roundup-/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&往期通讯摘要之一&i class=&icon-external&&&/i&&/a&）。&/p&&p&（本文&a href=&/?target=https%3A//blog.yitianshijie.net//yitianshijie-newsletter-61/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&原载《一天世界》博客&i class=&icon-external&&&/i&&/a&）&/p&
带 Touch Bar 的 MacBook Pro 测评渐渐出来了，我之前在「Pro」这篇通讯中的观点得到了证实。伦敦的视频剪辑师 Thomas Grove Carter 说：整整一周，我都在用 Final Cut Pro X 在它上面剪 5k ProRes 视频，体验如黄油般顺滑……我用…
产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计8原则：&br&&br&&b&原&/b&&b&则&/b&&b&1&/b&&b&：用&/b&&b&户&/b&&b&界面&/b&&b&应该&/b&&b&是基于用&/b&&b&户&/b&&b&的心里模型，而不是基于工程&/b&&b&实现&/b&&b&模型&/b&&br&就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。&br&&img src=&/046d04d28b50ad048c031be_b.jpg& data-rawwidth=&663& data-rawheight=&505& class=&origin_image zh-lightbox-thumb& width=&663& data-original=&/046d04d28b50ad048c031be_r.jpg&&#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。&br&&br&&b&原&/b&&b&则&/b&&b&2&/b&&b&：培养用&/b&&b&户&/b&&b&使用情景的思&/b&&b&维&/b&&b&方式做&/b&&b&设计&/b&&br&要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。&br&那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。&br&&br&对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：&br&&img src=&/2d90db87e187b25e6a0c7af0cf42dee5_b.jpg& data-rawwidth=&674& data-rawheight=&511& class=&origin_image zh-lightbox-thumb& width=&674& data-original=&/2d90db87e187b25e6a0c7af0cf42dee5_r.jpg&& 微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友&br&&img src=&/f5d14cb1e_b.jpg& data-rawwidth=&710& data-rawheight=&536& class=&origin_image zh-lightbox-thumb& width=&710& data-original=&/f5d14cb1e_r.jpg&&米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现 &br&&br&&br&&b&原&/b&&b&则&/b&&b&3&/b&&b&：尽量少的&/b&&b&让&/b&&b&用&/b&&b&户输&/b&&b&入，&/b&&b&输&/b&&b&入&/b&&b&时&/b&&b&尽量多&/b&&b&给&/b&&b&出参考&/b&&br&移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。&br&&img src=&/8ab605f1db5edba16b2d7b27_b.jpg& data-rawwidth=&588& data-rawheight=&441& class=&origin_image zh-lightbox-thumb& width=&588& data-original=&/8ab605f1db5edba16b2d7b27_r.jpg&&
百度音乐的搜索先是把近期最热门的歌曲依次排列在列表中，当有字输入时，会出现歌手的候选词，这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。 &br&&img src=&/342dc3e8b2d446c8ebee65ffc8e7dee8_b.jpg& data-rawwidth=&589& data-rawheight=&431& class=&origin_image zh-lightbox-thumb& width=&589& data-original=&/342dc3e8b2d446c8ebee65ffc8e7dee8_r.jpg&&百度地图也是我用得比较顺手的一个地图导航应用，在减少输入方面也做的比较出色，百度地图拥有cookies功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜，在用户输入到一半的时候，下面的候选列表就出现了目标地址，用户直接停止输入点击列表即可。&b&&br&&/b&&br&&b&原&/b&&b&则&/b&&b&4&/b&&b&：&/b&&b&全局&/b&&b&导&/b&&b&航需要一直存在，&/b&&b&最好还能预览&/b&&b&其他模&/b&&b&块&/b&&b&的&/b&&b&动态&/b&&br&全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。&br&全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。&br&&img src=&/cae0a8defaad83fef2074aff5d80b6f3_b.jpg& data-rawwidth=&814& data-rawheight=&412& class=&origin_image zh-lightbox-thumb& width=&814& data-original=&/cae0a8defaad83fef2074aff5d80b6f3_r.jpg&&
Facebook 的朋友请求，消息，通知都是采用全局导航的方式，就是面板设计的丑了些~ &br&&img src=&/bdbd43920edf6e649ab90b7ba8b05359_b.jpg& data-rawwidth=&685& data-rawheight=&502& class=&origin_image zh-lightbox-thumb& width=&685& data-original=&/bdbd43920edf6e649ab90b7ba8b05359_r.jpg&&米聊的通知中心，里面包含的通知类型蛮多的，显得有点凌乱，希望下面的版本会筛选归类&br&&br&&br&&b&原则&/b&5：&b&提供非模&/b&&b&态&/b&&b&的反&/b&&b&馈&/b&，&b&不打断任务流&br&&/b&模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS中称：Pop-up box, 我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。&br&&br&模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, Toast list等方式来提醒用户。&br&&img src=&/a86cdd490b5a5d18ca654cbed5d3308c_b.jpg& data-rawwidth=&842& data-rawheight=&308& class=&origin_image zh-lightbox-thumb& width=&842& data-original=&/a86cdd490b5a5d18ca654cbed5d3308c_r.jpg&&Gmail是第一个把删除的模态弹框设计成List
Notification这种方式的，提醒用户撤销刚才的删除操作，这种非模态的处理，让删除的流程更加顺畅和轻松自如。&br&&img src=&/db7e8d8a3cbfe6f432e928bfdcdafd12_b.jpg& data-rawwidth=&894& data-rawheight=&451& class=&origin_image zh-lightbox-thumb& width=&894& data-original=&/db7e8d8a3cbfe6f432e928bfdcdafd12_r.jpg&&K歌达人第二版的弹框就是模态处理，界面很不友好，用户在K歌过程中要被打断三次才能发表一首自己唱的歌曲，所以降低了用户的参与度。&br&&br&&b&原则&/b&6：&b&不要让用户等待任务完成，用户还要发现更多有意思的地方&/b&&br&移动互联的核心就是给用户带来移动体验的方便和高效，这是 移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间，
所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意，特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他apps。&br&&b&&img src=&/d3dd53afcb35159bf24fdcd_b.jpg& data-rawwidth=&843& data-rawheight=&419& class=&origin_image zh-lightbox-thumb& width=&843& data-original=&/d3dd53afcb35159bf24fdcd_r.jpg&&&/b&在Instagram 拍完照片后，点击上传后，它的处理方式是回到首页的位置，告诉你的照片正在提交，并不是显示一个上传进度的界面，让用户看那上传百分比。因此，我们在设计米吧上传歌曲文件时也只是告知用户后台正在帮你上传，叫用户放心，用户自然就会去玩其他的功能，没有让用户焦虑的等待，等上传完毕时，我们再用Toast list通知用户已经上传成功，这样把查看上传结果的主动权交给用户。&br&&br&&b&原则&/b&7：&b&自动保存用户的输入成果&/b&&br&在移动端，由于输入面板的复杂性，而且触摸输入没有物理按键的反馈自然，特别是手机上去输入一段文字或者信息，对用户而言本身就是一件很痛苦的事情；对产品而言，用户的在你的产品中输入是一个很值得庆幸的事情，所以设计人员需要让你的apps自动保存用户的输入成果。&br&&b&&img src=&/2e5ccad5b85e1aeb6bf8a704c55438c2_b.jpg& data-rawwidth=&862& data-rawheight=&429& class=&origin_image zh-lightbox-thumb& width=&862& data-original=&/2e5ccad5b85e1aeb6bf8a704c55438c2_r.jpg&&&/b&微博官方的手机客户端在用户输入信息后，点击左上角的叉时会弹出Action sheet来询问，确认是否要放弃，或者保存为草稿；path的处理则更为人性化，在处于断网的情景下，用户依然可以发布照片和文字，当然后面联网成功后，系统会自动上传，只是发表时间是连网后发布的时间点；Instagram的评论也很友好，在断网或者网络情况不稳定的情景，用户输入的评论依然可以发布，后面会有一个叹号提醒用户稍后发布或者重试，提升了用户参与的积极行，同时活跃了社区。&b&&br&&/b&&br&&b&原则&/b&8：&b&为了程序响应的速度，设计有时候需要担任掩护的作用&/b&&br&科技并不是万能的， 技术依然是移动互联网应用程序最需要优化和完善的，作为技术的盟友我们设计人员也需要辅佐他们，让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题，与网络环境也有很大的关系，这时候设计人员需要考虑这些客观存在的情况，帮助程序来掩护这些瑕疵，让用户感觉到在使用时是流畅的。&br&&b&&img src=&/3e83b37df1afad14702faf_b.jpg& data-rawwidth=&915& data-rawheight=&503& class=&origin_image zh-lightbox-thumb& width=&915& data-original=&/3e83b37df1afad14702faf_r.jpg&&&/b&&br&#随后实现# Instagram帖子“赞” 不管对参与者还是帖子作者都是激发其积极性活跃社区氛围的重要功能，所以在程序的响应方面一定要具有可用，易用的特性，我们看左图中，“赞”的按钮已经现实“已赞”，同时我们看红色框内的“菊花瓣”就知道后台在loading赞的数据，所以这就是设计的巧妙之处，先让用户感知到程序是非常快速的，而不是等loading完之后再显示“已赞”；&br&&br&#提前传输# Instagram中发布帖子的时候，用户处理完照片点击“上传”按钮就看到中间的界面，这时候界面是让用户去为自己的帖子输入一个主题，或者去设置分享等功能，同时我们可以看到红色框中的“菊花瓣”，很明显后台已经开始传输刚才上传的照片了，所以当用户在点击“完成”时，数据只需要上传剩下的一部分，让用户感知上传很迅速；&br&&br&#边唱边完成# 把伴奏和用户的歌声合成为一首音乐时需要后台处理大量的数据，如果分步做就要让用户等待比较长的合成时间，为了让用户不用枯燥的等待合成，我们需要后台在用户唱歌的同时，后台就已经开始把唱过的伴奏和歌声合成。&br&&br&以上八项原则是我在工作中体会比较深刻的交互设计原则，希望能对观看到这篇博文的朋友有所帮助。当然设计原则是随着时间的变化而不断变化的，所以也请各位朋友完善和补充，谢谢！&br&&br&&b&&br&&/b&&br&&br&
产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计8原则： 原则1：用户界面应该是基于用户的心里模型，而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计…
我想在 &a href=&/people/zhou43& class=&internal&&Zhou43&/a& 的答案上做一些补充。&br&在我的定义中，&a href=&/people/zhou43& class=&internal&&Zhou43&/a& 的答案更多是交互设计过程中会使用的部分方法及工具。&br&&br&&b&交互设计的流程&/b&&br&交互设计的对象是 人的活动 ，辛向阳老师的《&a href=&///?target=http%3A///content/15/901.shtml& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&交互设计：从物理逻辑到行为逻辑&i class=&icon-external&&&/i&&/a& 》中有详细的阐述。&br&&br&所以交互设计的流程是：&br&1. 了解用户的活动及目的；&br&2. 定义活动中的行为与问题；&br&3. 定义设计的目标；&br&4. 设计方案，反复精化；&br&5. 确认设计方案对用户活动的影响。&br&&br&对应 &a href=&/people/zhou43& class=&internal&&Zhou43&/a& 的答案：&br&①、②、④聚焦在了解用户是谁、他们如何使用产品？（活动和行为是什么）、为何这样使用？（目的和心理模型）【流程1】&br&③、④关注定义用户活动的具体行为和问题，定义设计目标也常常在这个过程中完成。【流程2、3】&br&⑤、⑥、⑦是通过原型工具和专家经验进行方案设计和精化。【流程4】&br&⑧是借助测试用户来观察确认方案对用户活动的最终影响是否达到期望的设计目标。【流程5】&br&&br&&br&&b&设计工具与方法&/b&&br&强调区分设计流程和设计工具、设计方法的原因是：&br&- 设计流程没有规定使用的工具或方法。&br&- 设计方法和工具是为了解决设计过程中的挑战提供的解决思路和框架。&br&- 设计师应当根据情况来选择适合情况的工具和方法。&br&&br&举2个常见的例子：&br&&br&&blockquote&&b&故事板&/b&&br&沟通的媒介。故事版不会直接帮助设计师得到更好的方案，但可以帮助设计师在团队讨论时更准确地沟通发现的问题及设计目标。它更多是一个沟通工具。&/blockquote&如果只是一个人来做设计决策，故事板是不需要使用的；&br&如果整个团队沟通良好，想象力良好，即使是团队沟通也是可以不需要故事板的；&br&如果在多次沟通中发现团队中不同的角色对问题的理解是有困难的，那故事板可能可以改善这类问题。&br&&br&&blockquote&&p&&b&原型&/b&&/p&&p&通过原型可以更好和更广泛地检验方案。原型设计有很多工具，纸面原型是其中一种。它既是设计工具，也是沟通工具。&/p&&/blockquote&&p&如果设计师自己进行设计，简单的纸面原型，甚至在头脑中想象的原型都可以帮助设计师进行方案推敲；&/p&&p&如果需要了解团队甚至用户对不同方案的反馈，那就需要相对高精度的原型，电子稿或者可使用的原型；&/p&&br&&p&如果只是讨论那个方案更优，只需要将相关流程原型化即可讨论；&/p&&p&如果需要考虑方案的可行性等问题，就必须将所有的流程都转化成原型来讨论；&/p&&br&&br&&br&&p&现在交互设计的媒介已经不局限在人机界面上，而是扩展到产品、环境以及人身上。这也是现在在流程和工具上讨论比较多的其中一个原因。&/p&
的答案上做一些补充。 在我的定义中， 的答案更多是交互设计过程中会使用的部分方法及工具。 交互设计的流程 交互设计的对象是 人的活动 ，辛向阳老师的《 》中有详细的阐述。 所以交互设计的流程是： 1…
嘿，我先来抛砖吧~&br&&br&首先祭出女神 &a href=&///?target=https%3A///joulee& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Julie Zhuo&i class=&icon-external&&&/i&&/a&（Facebook Product design director），这段时间请假生孩子去了，但是文章依然没有停止，业界良心。她的 &a href=&///?target=https%3A///%40joulee& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Medium&i class=&icon-external&&&/i&&/a& 中几乎大部分文章都值得看，就放几篇我觉得不错的吧。&br&&br&&a href=&///?target=https%3A///stories/37106-ama-im-julie-zhuo-director-of-product-design--facebook& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AMA: I'm Julie Zhuo, director of product design @ Facebook&i class=&icon-external&&&/i&&/a&&br&首先先从这个 AMA 了解一下她吧：）&br&&br&&a href=&///?target=https%3A///the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Junior Designers vs. Senior Designers&i class=&icon-external&&&/i&&/a&&br&这篇文章流传甚广，用对比图的形式对比了资深设计师和初级设计师的区别。&br&&br&&a href=&///?target=https%3A///the-year-of-the-looking-glass/why-designers-leave-d0aa3b8af9b7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why Designers Leave&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=https%3A///%40joulee/how-to-get-a-designer-b3afdf5a853d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How to get a Designer&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///article/An-Inside-Look-at-Facebooks-Method-for-Hiring-Designers& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&An Inside Look at Facebook's Method for Hiring Designers&i class=&icon-external&&&/i&&/a&&br&第一篇文章用一个小故事阐述了一个设计师为什么会从一家公司离职，对目前大部分公司都很有借鉴意义。「不要让设计师做自己都不会觉得骄傲的东西」。说了设计师为什么会离开，后面那这篇文章说了如何招一名设计师。最后阐述了 Facebook 是怎么招设计师的。&br&&br&&a href=&///?target=https%3A///the-year-of-the-looking-glass/the-5-most-common-mistakes-in-design-5d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The 5 Most Common Mistakes in Design&i class=&icon-external&&&/i&&/a&&br&据说是多年血与泪的经历提炼出来的 5 个误区，其中有一些估计很多人都会犯。&br&&br&&a href=&///?target=https%3A///the-year-of-the-looking-glass/designs-north-star-d& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design’s North Star&i class=&icon-external&&&/i&&/a&&br&这是一篇非常有前瞻性的文章，她陈述了她认为多年之后，「设计师」的职责将会从早期的「好看」到现在的「好看并好用」到未来将会如何变化。&br&&br&&a href=&///?target=https%3A///the-year-of-the-looking-glass/introducing-origami-for-quartz-composer-f1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Introducing Origami for Quartz Composer&i class=&icon-external&&&/i&&/a&&br&2014 年作为各种原型工具元年，这篇文章应该不能错过。&a href=&/design-stuff/& class=&internal&&在这篇文章中提到&/a& Mike Matas 加入 Facebook 之后带来了 Quartz Composer，早期没什么人用和在意，直到 Facebook 发布 Quartz Composer Patchs &a href=&///?target=https%3A//facebook.github.io/origami/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Origami&i class=&icon-external&&&/i&&/a& 以及这篇文章的出现，改变了这一切。&br&&br&然后是这个被誉为「有胡子版 Julie Zhuo」 Etsy 的产品设计总监 Cap Watkins&br&&br&&a href=&///?target=https%3A///stories/37784-ama-im-cap-watkins-product-design-manager-at-etsy& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AMA: I'm Cap Watkins, Product Design Manager at Etsy&i class=&icon-external&&&/i&&/a&&br&AMA 了解一下先。&br&&br&在 2014 年之前，我们的设计还都是针对小屏幕来做的，但是 2014 年开始大屏设备井喷，连 iPhone 也出了更大屏幕的设备，针对大屏幕的设计也有几篇比较有趣的文章。&br&&br&&a href=&///?target=http%3A///posts/facebook-paper-gestures& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Facebook Paper's gestural hell&i class=&icon-external&&&/i&&/a&&br&这是篇吐槽文，主要吐了 Facebook Paper 在单手握持时给交互上带来的问题。&br&&br&&a href=&///?target=http%3A///posts/how-to-design-for-thumbs-in-the-era-of-huge-screens& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How to design for thumbs in the Era of Huge Screens&i class=&icon-external&&&/i&&/a&&br&和上文是同样的作者，主要阐述了怎么给大屏幕手机做设计，知乎上也有相关讨论：&a href=&/question/& class=&internal&&iPhone 6 和 6 Plus 新增的屏幕尺寸会如何影响 iOS 应用的界面设计？&/a&&br&&br&&a href=&///?target=https%3A///post/why-and-how-to-avoid-hamburger-menus/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why and How to avoid Hamburger Menus&i class=&icon-external&&&/i&&/a&&br&被滥用两万遍的汉堡菜单，很多人已经忍不了了，汉堡被誉为下一个 Carousel。知乎的讨论见此：&a href=&/question/& class=&internal&&汉堡三线图标是表现菜单的最佳形式吗？&/a&&br&&br&&a href=&///?target=https%3A///%40ericeriksson/what-is-product-design-ff& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&What is Product Design?&i class=&icon-external&&&/i&&/a&&br&Facebook 设计师 Eric Eriksson 试图对「产品设计」这个很容易有误区的名词下个定义，非常完整。&br&&br&&a href=&///?target=https%3A///%40millsbaker/designer-duds-f59c964513ef& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Designer Duds: Losing Our Seat at the Table&i class=&icon-external&&&/i&&/a&&br&文章作者是 Mokriya 产品设计师 Mills Baker，这篇文章主要表达的意思是「这个世界上最强力的那些设计师做的设计非常精美的东西都没什么人用，那我们这些不怎么厉害的设计师怎么办？」。这篇文章的评论中引出了一个对成功的定义我觉得非常好。「成功 = 商业成功 + 工艺成功，我们多过的注意了商业成功，但是对于工艺成功却熟视无睹，这些经过很好设计的产品应该是一种工艺成功的典范，应该得到尊重。」&br&&br&&a href=&///?target=http%3A///building-soundcloud/introduction/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Building SoundCloud&i class=&icon-external&&&/i&&/a&&br&SoundCloud 的移动产品设计老大 Michael Nino Evensen 分享了非常详细的 SoundCloud 新版本的设计思路，很完整，值得阅读。&br&&br&&a href=&///?target=http%3A///journal/14-things-learned-designing-at-disqus& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&14 Things Learned While Designing at Disqus&i class=&icon-external&&&/i&&/a&&br&文章作者是 Disqus 前设计师 Joshua Sortino，他阐述了他在 Disqus 这么些年学到的东西。&br&&br&关于原型、动画设计，也冒出了很多有趣文章&br&&br&&a href=&///?target=https%3A///%40gk3/using-parse-to-power-up-your-framer-prototypes-88cb87009d00& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Using Parse to power up your Framer prototypes&i class=&icon-external&&&/i&&/a&&br&作者是 Parse 的设计师 George Kedenburg III，他写了 Framer 如何使用 Parse 来实现让设计师做的原型可以存储数据，很酷。&br&&br&&a href=&///?target=https%3A///%40michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Improve the payment experience with animations&i class=&icon-external&&&/i&&/a&&br&Stripe 是今年突然冒出来的一个支付产品，他们的移动支付体验无比的顺畅，这篇文章是 Stripe 的用户界面工程师 Micha?l Villar 撰写的，他们是如何通过使用动画来改善支付体验的。&br&&br&&a href=&/design-stuff/& class=&internal&&Google FORM SF：好的设计工具还是挺重要的 &/a&&br&这是 Google FORM SF 大会的一个记录，主要是一帮做原型工具的大牛们一起聊聊原型设计，里面解释了很多他们对工具的想法，很不错。&br&&br&&a href=&///?target=http%3A///motion-ui-design-principles& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Motion Ui Design Principles&i class=&icon-external&&&/i&&/a&&br&这篇文章描述了在用户界面上使用动画应该遵循的原则&br&&br&&a href=&///?target=http%3A///9-basic-principles-of-responsive-web-design/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&9 basic principles of responsive web design&i class=&icon-external&&&/i&&/a&&br&言简意赅的快速了解 Resposive Design 的基本原则和概念&br&&br&&a href=&///?target=http%3A///ideas/perspective/everybody-scrolls& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Everybody Scrolls.&i class=&icon-external&&&/i&&/a&&br&所有人都关心一个用户打开一个网页他到底会不会往下滚？这里有数据证明。&br&&br&&a href=&///?target=https%3A///%40dhg/parallax-done-right-82ced812e61c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Parallax Done Right&i class=&icon-external&&&/i&&/a&&br&一个好的视差效果应该怎么搞，作者是前 Medium 设计师 Dave Gamache。&br&&br&&a href=&///?target=https%3A///designing-medium/crafting-link-underlines-on-medium-7c03a9274f9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Crafting link underlines on Medium&i class=&icon-external&&&/i&&/a&&br&本文作者是 Medium 设计师 Marcin Wichary，他详细解释了 Medium 的下划线是怎么做的。&br&&br&&br&欢迎阅读这篇文章：&a href=&/design-stuff/& class=&internal&&Hey LOL Daily&/a&&br&&br&——————&br&PS：知乎招用户界面设计师，请联系我！！
嘿，我先来抛砖吧~ 首先祭出女神 （Facebook Product design director），这段时间请假生孩子去了，但是文章依然没有停止，业界良心。她的
中几乎大部分文章都值得看，就放几篇我觉得不错的吧。
我的答案是基于《软件观念革命：交互设计精髓》（&i&About Face&/i&），这也是在国际上被广为认可的流程。这个答案里我尽量不参杂个人观点。先放一个大纲。&br&&br&&b&一、定性研究（Qualitative Research）&/b&：针对可能使用你的产品的人，可以是问卷、访谈……&br&&b&二、确定人物角色（Persona）&/b&：即产品的典型用户，可以有一种或几种。例如知乎可以有一个人物角色叫CEO。&br&&b&三、写问题脚本（Problem Scenario&/b&）：罗列人物角色在使用产品时可能遇到的问题，可以整理成一个故事便于别人理解。&br&&b&四、&/b&&b&写&/b&&b&动作脚本（Action Scenario）&/b&：像写故事一样，写人物角色在使用你设计好的产品时，发生的细节。注意，这个时候你的交互方案的概念模型已经基本成型了，这个概念模型是通过解决问题脚本里的问题而得出的。&br&&b&五、画线框图（Framework）&/b&：这个线框图是通过把动作脚本里的概念模型转化成视觉模型得到的。&br&&b&六、制作原型（Prototype）&/b&：做出来好像可以用的东西，有很多原型工具可以利用。&br&&b&七、专家评测（Expert Evaluation）&/b&：至少两名设计师或对交互设计比较了解的人通过反复测试原型。找到问题后修改线框图并更新原型。&br&&b&八、用户评测（User Evaluation）&/b&：让用户使用原型，可以给他们一些任务去完成。根据用户在使用过程中的问题和建议进行进一步修改。&br&&br&如果你想要知道具体怎么做，请继续看。&br&&br&一、&b&定性研究（Qualitative Research）&/b&：&br&无论你用何种形式做调查，你的目的是了解用户的五个方面：&br&1、行为（Activities）：例如知乎用户多久用一次知乎、一次用多久？&br&2、态度（Attitudes）：例如知乎用户怎样看待知乎这个产品？&br&3、资质（Aptitudes）：例如知乎用户的学历怎样？&br&4、动力（Motivation）：例如知乎用户为什么用知乎？&br&5、技能（Skills）：例如知乎用户对使用相关产品是否熟悉？&br&&br&&b&二、确定人物角色（Persona）&/b&：&br&如果你的定性研究有所成功，这时你应该对你的用户有所了解了。根据上文中的五个方面，你需要挑拣出最典型的一个或几个形象。例如知乎的人物角色可能有：比较普通的求知者、特定领域的专家、到处灌水的……&br&你不但要确定这些人物角色（Persona）的主要特点，还要确定他们的需求和目的。为了增加真实性，可以给人物角色（Persona）取名字，选一张照片，细化他们的背景资料。&br&以下是一个范例：（下图来自&a href=&///?target=https%3A///480Oswego2013/CSC-HCI-480-2013-repo/wiki/User-Evaluation-Report& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&User Evaluation Report · 480Oswego2013/CSC-HCI-480-2013-repo Wiki · GitHub&i class=&icon-external&&&/i&&/a&）&br&&img src=&/e220efffefb78e52147a_b.jpg& data-rawwidth=&1052& data-rawheight=&744& class=&origin_image zh-lightbox-thumb& width=&1052& data-original=&/e220efffefb78e52147a_r.jpg&&&b&三、写问题脚本（Problem Scenario&/b&）：&br&基于你对人物角色（Persona）的理解，你应该已经可以设想出他们在使用产品中可能遇到的问题了。你可以为每一个人物角色（Persona）列一个问题单，也可以把它们整理到一个简短的故事里。&br&&br&&b&四、&/b&&b&写&/b&&b&动作脚本（Action Scenario）&/b&：&br&首先你要为已列出的问题想好可能的解决方案，然后写一个简短的故事把这些解决方案囊括进去。写成故事的好处是代入感较强，对别人来说容易理解。国内比较推崇故事版，但是把所有情景画出来的效率是非常低的。&br&&br&&b&五、画线框图（Framework）&/b&：&br&这个时候你对你的交互方案已经有了一个比较抽象的想法了，现在只要把它具象化就好了。线框图大家都比较了解，这里就不多说了。&br&&br&&b&六、制作原型（Prototype）&/b&：&br&就算没有程序员帮忙，可以使用的原型工具还是很多的。例如Axure RP和Pencil Project都比较有名，国内也有不少。不过我只用过InVision，感觉还可以。不论用什么手法，哪怕是PPT或者PDF，只要做出一个可以交互的东西就行了。&br&一个原型是不可能实现所有功能的，所以你要确定几个可以走通的任务。例如能够成功在知乎里发布一个问题等。&br&&br&&b&七、专家评测（Expert Evaluation）&/b&：&br&原型完成后召集至少两三个设计师或者对交互比较了解的人，使用并评测原型。你可以将原型所关注的几个任务列出来，以免专家不知道原型哪部分可交互哪部分不可交互。&br&比较常用的评测方法是启发式评估法（Heuristic Evaluation），而这种方法比较常见的标准是尼尔森交互设计法则（Nielsen Heuristic）。以下是十条尼尔森交互设计法则（Nielsen Heuristic）：&br&1、系统状态是否可见（Visibility of system status）&br&2、系统是否符合现实世界的习惯（Match between system and the real world）&br&3、用户是否能自由地控制系统（User control and freedom）&br&4、统一与标准（Consistency and standards）&br&5、错误防范（Error prevention）&br&6、减轻低用户的记忆负担（Recognition rather than recall）&br&7、灵活性和效率（Flexibility and efficiency of use）&br&8、美观简洁（Aesthetic and minimalist design）&br&9、帮助用户认知、了解错误，并从错误中恢复（Help users recognize, diagnose, and recover from errors）&br&10、帮助文档（Help and documentation）&br&如何做启发式评估法（Heuristic Evaluation）？很简单，专家们各自将自己发现问题列出来，并将之与对应的法则相关联，或者根据法则来查找问题，然后专家们分别给自己的问题打分。专家们完成自己的问题列表后，一起讨论，将问题整合起来。&br&常用的打分方法如下：&br&4分 - 问题太过严重，一旦发生用户的进程将会终止并且无法恢复&br&3分 - 问题较为严重，很难能恢复&br&2分 - 问题一般严重，但是用户能够自行恢复，或者问题只会出现一次&br&1分 - 问题较小，偶尔发生，并且不会对用户的进程产生太大影响&br&0分：不算问题&br&记住：评测完后别忘记修改你的线框图和原型！&br&&br&&b&八、用户评测（User Evaluation）&/b&：&br&原型通过专家评测后，你可以找一些典型用户使用原型。你可以把任务列给他们，让他们自己尝试完成任务。中间遇到的问题可以记录下来，设计师通过观察来进行评分。&br&比较常用的用户评测方法是Think Aloud（对不起没有找到合适的翻译）。做法也很简单，你让用户使用原型完成指定的几个任务，让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说，你可以适当提问。与此同时，你要将屏幕和声音录下来，可以用录屏软件或摄像头。完成后，你回放这些视频，把观察到的问题和用户报告的问题全部记录下来，与交互法则关联并且打分。&br&值得注意的是，很多人更习惯给出建议而不是提出问题，例如“这个按钮应该更大一点，这样才看的到”。这时，你该记录下来的是“按钮不够引人注意”。&br&有趣的是，用户评测的结果可能和专家评测的结果相差很远，这里就不多说了。
我的答案是基于《软件观念革命：交互设计精髓》（About Face），这也是在国际上被广为认可的流程。这个答案里我尽量不参杂个人观点。先放一个大纲。 一、定性研究（Qualitative Research）：针对可能使用你的产品的人，可以是问卷、访谈…… 二、确定人物角…
&p&曾经我也是一名非设计专业的学生，作为自动化专业的硕士希望自学做交互设计，有很长一段时间都抱有这样的疑惑“如何系统的学习、提升交互设计能力”。所以多次翻出这个问题，反复咀嚼过 &a data-hash=&39dc7c2c02& href=&///people/39dc7c2c02& class=&member_mention& data-hovercard=&p$b$39dc7c2c02&&@王阅微&/a&&a data-hash=&669eedb41b053& href=&///people/669eedb41b053& class=&member_mention& data-hovercard=&p$b$669eedb41b053&&@朱晨&/a&
的回答，从中找出我缺乏的、忽略的技能去继续补足、努力。&/p&&br&&p&现在从事交互设计工作已有三年的时间，希望通过回答这个问题，来对以往独自摸索、自学路上的一些经验、心得做一个总结。如果能给当前期待从事交互设计的新朋友些许指引，那就更圆满了。&/p&&br&一、理论知识积累&br&1、理论书籍&br&&p&《用户体验要素：以用户为中心的产品设计》&br&讲述了经典的五层框架：战略层（产品目标和用户需求）、范围层（功能规格和内容需求）、结构层（交互设计和信息架构）、框架层（界面设计、导航设计和信息设计）、表现层（感知设计）。可以对互联网产品经理、交互设计师、视觉设计师之间的工作流程、职责有个初步的认识，在后续学习中也大致明白重心该放在哪个环节。&/p&&br&&p&《点石成金：访客至上的网页设计秘笈》&br&介绍了don’t make me think 的几个指导原则 以及可用性测试，一本小书比较容易理解。&/p&&br&&p&《认知与设计：理解UI设计准则》&br&介绍了一些用户界面设计准则。对于新人来说，常常不知道哪些设计是易用的、用户容易接受的，所以了解一些设计原则可以有助于我们辩证的思考各种设计方案之间孰优孰劣。&/p&&br&&p&《About Face 3 交互设计精髓》&br&经典书籍，厚厚一本很难读完。对于新人来说，可以随便翻翻，先看看目录，找那些自己感兴趣的、疑惑的章节读一读。&/p&&br&&p&《设计师要懂心理学》&br&介绍人的一些习惯，如何观察、阅读、记忆、思考、集中注意力等等很多方面。了解与我们的设计方案交互操作的用户，是设计师需要持续关注的。&/p&&br&2、实战书籍&br&&p&《写给大家看的设计书（第三版）》&br&通过大量示例介绍了4大基本设计原则——亲密性、对齐、重复、对比，这些原则在界面排版上非常实用。作为非设计专业的学生来说，学习一些基本的原则很有必要。&/p&&br&&p&《设计之下：搜狐新闻客户端的用户体验设计》&br&结合搜狐新闻客户端的项目经验，总结了很多干货，对于新手可以从中了解实际的设计流程。&/p&&br&&p&《破茧成蝶：用户体验设计师的成长之路》&br&一本实用性非常高的书，强烈推荐。其中需求分析、设计规划这两章刚好解决了我的一些疑惑，反反复复读了很多遍，非常有收获。感谢@刘津、@李月 的辛苦撰写、无私分享。&/p&&br&&p&《移动应用UI设计模式》&br&关于设计模式的一本书，我读过之后写了几篇读书笔记，对书中的设计模式配上平时搜集的例子以加深理解，比如这篇&a href=&///?target=http%3A//jinjuan.me/read-app-pattern-1/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动应用UI设计模式——（1）导航&i class=&icon-external&&&/i&&/a&&/p&&br&&p&《触动人心：设计优秀的iPhone 应用》&br&如果对iPhone设计感兴趣，可以读读这本书，虽然现在看来例子有些旧，但是也不妨碍我们去理解哪些优秀的设计例子。&/p&&br&3、设计规范指南&br&&p&1）iOS 8 人机界面指南&/p&&p&&a href=&///?target=http%3A///ios8-human-interface-guidelines.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&[ISUX转译]iOS 8人机界面指南（一）：UI设计基础&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///ios8-human-interface-guidelines-design-strategies.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&[ISUX转译]iOS 8人机界面指南（二）：设计策略&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///ios8-human-interface-guidelines-technology-html.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&[ISUX转译]iOS 8人机界面指南（三）：iOS技术（上）&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///ios8-human-interface-guidelines-technology.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&[ISUX转译]iOS 8人机界面指南（三）：iOS技术（下）&i class=&icon-external&&&/i&&/a&&/p&&br&&p&2）Material design&/p&&p&&a href=&///?target=http%3A///detail/20948.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Material design非官方中文指导手册1.0-UI中国&i class=&icon-external&&&/i&&/a&&/p&&br&&p&3）Apple Watch界面设计规范&br&&a href=&///?target=http%3A///detail%3Ftid%3D35& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/detail?&/span&&span class=&invisible&&tid=35&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&br&4、设计原则&br&&p&1）易用性十大原则&br&《可用性工程》一书中有章节专门介绍，非常容易理解、也在设计中用的很多的十大原则。&/p&&br&&p&2）移动端设计原则，文章推荐&br&&br&&/p&&p&很多前辈结合自己的项目经验，总结了一些设计原则，用户自查设计方案。也可以通过搜集一些实例，来理解设计原则是如何被应用的。&/p&&p&&br&&a href=&///?target=http%3A//elya.cc//%25e6%e6%259c%25ba%25e5%25ae%25a2%25e6%%25e7%25ab%25af%25e4%25ba%25a4%25e4%25ba%%25ae%25be%25e8%25ae%25a1%25e5%258e%259f%25e5%e5%258f%258a%25e4%25bf%25a1%25e6%2581%25af%25e5%25b1%%258e%25b0%25e6%%25e5%25bc%258f/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&手机客户端交互设计原则及信息展现方式&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&/question/& class=&internal&&交互设计原则有哪些？ - 用户体验设计&/a&&/p&&p&&a href=&///?target=http%3A///%3Fp%3D6466& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&需要时显示——论App中的功能可见性&i class=&icon-external&&&/i&&/a&&br&&/p&&p&&a href=&/question/& class=&internal&&Chrome 浏览器的哪些设计符合「Don't Make Me Think」原则？ - 用户体验设计&/a&&/p&&br&二、实战能力的积累&br&&p&理论知识可以看做是修炼内功，实战技能则是转化为招式，也就是设计方案。作为新人，最基础的是有输出交互设计方案的能力。之后更多的是积累都在于如何提出易用性高、用户满意喜欢的设计方案。&/p&&br&1、交互设计输出物知多少&br&&p&1）流程图&/p&&p&&a href=&///?target=http%3A///it/13742.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&谈谈页面流程图（附案例）&i class=&icon-external&&&/i&&/a&&/p&&br&&p&2）线框图&/p&&br&&p&同样是来自heidi三篇文章：&/p&&p&&a href=&///?target=http%3A//heidixie./.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&聊聊线框图：那些必要的理论和前提-Heidi格物志&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//heidixie./.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&为线框图多留点时间&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//heidixie./.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&聊聊线框图：UED和PD对于线框图不同的定位-Heidi格物志&i class=&icon-external&&&/i&&/a&&/p&&br&&p&3）交互说明文档&/p&&br&&p&&a href=&///?target=http%3A///ucd/10449.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何写一份交互说明文档&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///ucd/11363.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&交互设计详细说明文档&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///%3Fp%3D5809& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何制作实用美观的设计文档&i class=&icon-external&&&/i&&/a&&/p&&br&2、体验优秀的设计&br&&p&想了解优秀的设计，最靠谱的是去体验、分拆、深挖优秀的作品，包括设计模式（界面排版）、交互流程、操作反馈、特殊场景的细节设计等等。&/p&&br&&p&1）总结设计模式&/p&&br&&p&设计师通常如何发现灵感？这个问题中elya推荐了很多设计模式类的网站，这是业界搜集的设计模式库。除了看他人搜集的，还推荐自己也按照类似的分类方式多搜集设计模式。&br&&a href=&/question//answer/& class=&internal&&设计师通常如何发现灵感？ - elya 的回答&/a&&/p&&br&&p&2）分任务体验优秀的产品&/p&&br&&p&选择特定的任务，去体验优秀的产品是如何完成这些任务的（交互流程）。比如，注册、登录、发照片、发微博、发语音、评论/回复 等等。&/p&&br&&p&3）总结设计亮点&/p&&br&&p&这些设计亮点可能归结不到上面任意两个方面，但是其他其他是这些设计亮点最能体现一个设计师的水平。比如我之前写过微信发语音功能的设计亮点&a href=&///?target=http%3A//jinjuan.me/app-weixin-1/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信设计亮点（1）：发语音，如何给予用户实时的反馈&i class=&icon-external&&&/i&&/a& 。为什么要记录？对我来说是好记性不如烂笔头，放在心里琢磨总没有写出来印象深刻。&/p&&br&&p&最后推荐@晓生语录 的一篇文章：&a href=&///?target=http%3A///index.php/archives/2907& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&交互设计如何提高专业能力&i class=&icon-external&&&/i&&/a& ，这也是我在入行初期读过很多遍的文章，感兴趣的朋友可以看看。&/p&&br&三、提出交互设计解决方案的能力&br&1、从子任务开始锻炼&br&&p&对学生来说，作品很重要。但是对新手而言，完成一个整体的产品设计可能有些难度。推荐从子任务的设计开始锻炼，比如前面提到的注册、登录、发照片等等。真正区设计的时候，会发现有很多细节设计是平时体验他人产品过程中容易遗漏的。这个时候可以回头再留意那些细节，比较不同的产品设计，多问问自己为什么他们要这么设计，有何优缺点、有何取舍，而自己又该如何设计、为什么这样设计。&/p&&br&&p&通过子任务的设计练习，对如何做交互设计已经有了一些提升之后，可以给自己布置一个完整的产品作业，比如实现某个idea解决用户的某种需求。这个时候《用户体验五要素》的知识就可以派上用场了，尝试从战略层开始、一步步完成产品的需求分析、功能分析、原型设计，甚至视觉设计，最终完成你的完整的作品。&/p&&br&2、设计完整的产品&br&&p&这个阶段涉及到需求分析、导航设计、任务分解、界面排版、交互操作流程等等，再次推荐《破茧成蝶：用户体验设计师的成长之路》这本书，实用性非常高。&/p&&p&主要任务的线框图完成之后，别忘了还有很多操作反馈、特殊场景的细节设计，《设计之下：搜狐新闻客户端的用户体验设计》一书对于反馈提示总结的非常棒。&/p&&p&设计定稿前，别忘了自查设计方案，看是否有遗漏异常情况的设计，推荐文章—— &a href=&///?target=http%3A//mp./s%3F__biz%3DMzAxNDAxOTcxOQ%3D%3D%26mid%3Didx%3D1%26sn%3D90b3c3c084277aef0cd8ae626fe74c54%26scene%3D1%23rd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何建立交互设计自查表&i class=&icon-external&&&/i&&/a&&/p&&br&四、交互设计工具&br&&p&工具的作用是用来表达自己的设计方案，初期用于讨论、沟通想法时用纸币来的最快最方便。软件的好处是利于存档、多人协作、传递。&/p&&br&1、Axure&p&虽然交互设计工具几年来层出不穷，但是实用性最强的个人觉得还是Axure ，学习成本低、简单好用、多平台通用。对于新手，前期可从排版开始练习画线框图，不用沉迷于做复杂的交互效果，因为工作中可能没有时间做非常细腻的交互动效。当然，如果是给大领导演示方案，一些点击跳转还是有必要做的。&br&&/p&&br&2、Origami&p&制作交互动效的工具，感兴趣的童鞋可以学一学，前期的学习成本有点高。&/p&&br&3、Sketch&p&相比Photoshop，Sketch用来设计界面更轻便。&/p&&br&五、用研、视觉、前端、后台开发的了解&br&1、用户研究&p&可以看看《赢在用户》，市面上貌似买不到了，学校图书馆大概能借到。百度商业UED团队的用户研究工程师总结的14种经典的用研方法，推荐看看 &a href=&///?target=http%3A///%3Fp%3D3880& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&用研方法传遍中国&i class=&icon-external&&&/i&&/a&&/p&&br&2、审美与视觉设计能力&p&我相信的一点是，当你看过足够多的优秀的界面设计之后，审美、配色排版等能力是会随之提升的。虽然我自己是学自动化——与设计完全不着边的专业，但是这几年积累让我对自己的审美还是比较自信的，至少得到了合作的视觉设计师的认可。&/p&&br&&p&为了锻炼自己的视觉设计能力，我会做一些练习，比如我的个人网站（&a href=&///?target=http%3A//jinjuan.me& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&jinjuan.me&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&）的界面设计就是我自己完成的。配色从&a href=&///?target=https%3A///zh/explore/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Adobe Color CC&i class=&icon-external&&&/i&&/a&挑选再微调，最终的效果至少符合我的喜好。&/p&&br&3、对前端开发、后台开发技术有一定理解&p&开发人员帮助我们实现设计方案，如何与他们高效沟通非常重要。虽然不需要会写代码，但是了解一些开发术语，知道前后台、数据库之间的关系是最基础的。&br&&/p&&br&&p&我的经历是，毕业初期一年多的时间交互设计和前端开发都要做，对HTML、CSS比较熟悉，JavaScript有些了解。再加上自动化专业也有一些C编程经验，所以与开发同事沟通起来倒没啥障碍。不过每个产品的业务特点不同，仍然需要实时更新对新技术的理解。&/p&&br&六、软实力的提升&br&&p&以下几点是我个人认为非常重要的几个软实力，早一点培养早一点受益。&/p&&br&1、时间管理&p&交互设计方面需要学习的知识非常多，如何评估优先级、安排学习计划非常关键。&/p&&br&2、知识管理&p&这几年我是evernote的深度用户，非常遗憾的是没有更早使用它，所以推荐你选择一款适合你的知识管理工具。关于知识管理，我的一点心得是别让搜集的知识分散在各个角落（各个网盘、电脑硬盘、存储工具），确保知识有统一存放入口，并有个统一的输出存储点。&/p&&p&如果没有知识管理，没有evernote，我可能也写不出这篇文章。&/p&&br&3、善用搜索&p&你的很多疑问，前辈们可能已经给出了很多经典的回答，所以善用搜索。这里一并感谢在我入行初期，贡献、分享知识的前辈们 &a data-hash=&ef22d7ee615ed0cbafa7& href=&///people/ef22d7ee615ed0cbafa7& class=&member_mention& data-hovercard=&p$b$ef22d7ee615ed0cbafa7&&@elya&/a&
、 &a data-hash=&74ef362d0& href=&///people/74ef362d0& class=&member_mention& data-hovercard=&p$b$74ef362d0&&@Heidixie&/a&
、 &a data-hash=&b8fa54f188dd0f61e6226& href=&///people/b8fa54f188dd0f61e6226& class=&member_mention& data-hovercard=&p$b$b8fa54f188dd0f61e6226&&@雅秋&/a& 、 &a data-hash=&92da211e0eecc26be829d& href=&///people/92da211e0eecc26be829d& class=&member_mention& data-hovercard=&p$b$92da211e0eecc26be829d&&@臭鱼&/a& 、 &a data-hash=&be2b6e62e50e82d443c04cec5079e21e& href=&///people/be2b6e62e50e82d443c04cec5079e21e& class=&member_mention& data-hovercard=&p$b$be2b6e62e50e82d443c04cec5079e21e&&@晓生&/a& 、 &a data-hash=&26b4e7cad6fc& href=&///people/26b4e7cad6fc& class=&member_mention& data-hovercard=&p$b$26b4e7cad6fc&&@00&/a& 、 &a data-hash=&39dc7c2c02& href=&///people/39dc7c2c02& class=&member_mention& data-hovercard=&p$b$39dc7c2c02&&@王阅微&/a& 、 &a data-hash=&669eedb41b053& href=&///people/669eedb41b053& class=&member_mention& data-hovercard=&p$b$669eedb41b053&&@朱晨&/a&
等等，非常感谢！！！&/p&&br&4、多总结，形成自己的一套知识体系和工作方法&p&@张佳玮 说“世上万事，不过是一懒二拖三不读书”，如果要补充一条就是“四不总结” 。很多时候我们对知识的理解都是零散的存在于脑海中。如果不去总结、不记录下来，脑容量不够时可能就遗忘了。&br&&/p&&p&所以多总结、行程自己的一套知识体系和工作方法，对于任何一个职业都至关重要。&/p&&br&七、写在最后&br&&p&这篇文章虽然是针对非设计专业的学生，但是很多方面算是对我自己说的。我也仍然在路上，还有很多技能需要提升，愿大家共同进步~~~全篇完。&/p&&br&&p&本篇同步发表在个人博客：&a href=&///?target=http%3A//jinjuan.me& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&jinjuan.me&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 、个人微信公众号 qingxizhaji，欢迎关注。&/p&&p&&a href=&///?target=http%3A///r/1EOYgNnELoRRrZ3j9xbG& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/r/1EOYgNn&/span&&span class=&invisible&&ELoRRrZ3j9xbG&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& (二维码自动识别)&/p&
曾经我也是一名非设计专业的学生，作为自动化专业的硕士希望自学做交互设计，有很长一段时间都抱有这样的疑惑“如何系统的学习、提升交互设计能力”。所以多次翻出这个问题，反复咀嚼过
的回答，从中找出我缺乏的、忽略的技能去继续补足、努力…
顺便总结下，实例图慢慢补上~&br&&br&常见的导航设计模式&br&&br&&b&主要导航&/b&&br&&img src=&/4809d4078dacac7e2e8d_b.jpg& data-rawwidth=&700& data-rawheight=&557& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&/4809d4078dacac7e2e8d_r.jpg&&&br&&ul&&li&Springboard 跳板式&/li&&li&List Menu 列表式&/li&&li&Tab Menu 选项卡式&/li&&li&Galllery 陈列馆式&/li&&li&Dashboard 仪表式&/li&&li&Metaphor 隐喻式&/li&&li&Mega Menu 超级菜单式&/li&&li&Drawer Menus 抽屉式&/li&&/ul&&b&&br&&br&次要导航&/b&&br&&img src=&/06a048a22aeeb04d394b92fe_b.jpg& data-rawwidth=&700& data-rawheight=&370& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&/06a048a22aeeb04d394b92fe_r.jpg&&&ul&&li&Page Carousel 页面轮盘式&/li&&li&Image Carousel 图片轮盘式&/li&&li&Inline Expand 扩展列表式&/li&&li&圆盘(扇形)式&/li&&/ul&&p&其中，所有主要导航模式都可以用作次级导航，但次级导航则不太适合用作主要导航。&/p&&br&&br&&br&&br&&b&1. Springboard 跳板式&/b&&br&&img src=&/59ef825b85a701b180a85f_b.jpg& data-rawwidth=&640& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/59ef825b85a701b180a85f_r.jpg&&&br&优点：&br&1、清晰展现各入口&br&2、容易记住各入口位置，方便快速找到&br&&br&缺点：&br&1、无法在多入口间灵活跳转，不适合多任务操作&br&2、容易形成更深的路径&br&3、不能直接展现入口内容&br&4、不能显示太多入口次级内容&br&&br&&b&2. List Menu 列表式&/b&&br&&br&优点：&br&1、层次展示清晰&br&2、可展示内容较长的标题&br&3、可展示标题的次级内容&br&缺点：&br&1、同级内容过多时，用户浏览容易产生疲劳&br&2、排版灵活性不是很高&br&3、只能通过排列顺序、颜色来区分各入口重要程度&br&&br&&br&&b&3. Tab Menu 选项卡式&/b&&br&&br&优点：&br&1、清楚当前所在的入口位置&br&2、轻松在各入口间频繁跳转且不会迷失方向&br&3、直接展现最重要入口的内容信息&br&缺点：&br&功能入口过多时，该模式显得笨重不实用&br&&br&&br&&b&4. Galllery 陈列馆式&/b&&br&&br&优点：&br&1、直观展现各项内容&br&2、方便浏览经常更新的内容&br&缺点：&br&1、不适合展现顶层入口框架&br&2、容易形成界面内容过多，显得杂乱&br&3、设计效果容易呆板&br&&br&&b&5. Dashboard 仪表式&/b&&br&提供了一种度量KPI （关键绩效指标）是否达到要求的方法。每一项度量都可以显示出额外的信息，这种模式对商业应用、分析工具、销售和市场应用非常有用。&br&&br&&b&6. Metaphor 隐喻式&/b&&br&用页面模仿应用的隐喻对象。主要用于游戏，同时在帮助人们组织事物（如日记、书籍、红酒等），对其进行分类的应用中也会用到。&br&&br&&b&7. Mega Menu 超级菜单式&/b&&br&&br&&b&8. Drawer Menus 抽屉式&/b&&br&这种导航的核心思想就是隐藏，将最主要的信息显示在界面上，而将非核心的信息隐藏&br&&br&优点：&br&&p&1.节省屏幕空间，让导航“藏”在侧滑抽屉里，释放了更多的空间给主要内容。&/p&&p&2.Drawer的好处就是能够提供在非顶级视图间导航的能力。&/p&缺点：&br&1. 可发现性低；
&br&2. 在某些平台下，和平台固有的导航设计模式有所冲突；
&br&3. 低效，并非一瞥即得。&br&&br&在哪些场景下建议使用抽屉导航呢？&br&1. 顶级视图超过3个；&br&2. 低层视图交叉导航；&br&3. 导航层级很深；&br&4. 导航枢纽：用户需要频繁访问导航。&br&&br&抽屉式菜单相关参考&br&&a href=&///?target=http%3A///project.php%3Fid%3D19379& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/project.php?&/span&&span class=&invisible&&id=19379&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&/question/& class=&internal&&汉堡菜单 (Left Nav Flyouts) 是产品设计的无能吗？ - 交互设计&/a&&br&&a href=&/question/& class=&internal&&如何看待移动应用左右滑动菜单（Left Nav Flyouts）滥用的问题? - Android&/a&&br&&a href=&///?target=http%3A///post//hamburgers-basements-why-not-to-use-left-nav& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Jxnblk - Blog&i class=&icon-external&&&/i&&/a&&br&&br&&br&&br&&b&9.页面轮盘式&/b&&br&&br&这些导航方式不是孤立的，对于内容比较复杂的app会常常混合其中的几种导航，至于app应该采用哪种导航架构，首先应该根据app 的特性选择适合哪几种导航模式，然后再根据各个导航的优缺点确定适合的导航方式。&br&&br&&br&&br&&a href=&///?target=http%3A//jinjuan.me/read-app-pattern-1/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动应用UI设计模式——（1）导航&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///ucd/103231.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动端导航模式的热门设计&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///news/4-warlial-ui-design.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&10种不同类型的移动UI设计模式&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///s/zKA7IyzYfAsld& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&移动应用UI设计模式.pdf&i class=&icon-external&&&/i&&/a&
顺便总结下，实例图慢慢补上~ 常见的导航设计模式 主要导航 Springboard 跳板式List Menu 列表式Tab Menu 选项卡式Galllery 陈列馆式Dashboard 仪表式Metaphor 隐喻式Mega Menu 超级菜单式Drawer Menus 抽屉式 次要导航 Page Carousel 页面轮盘式Image Caro…
iOS7的HIG里总结了三类导航方式：&br&1. 树形信息结构（hierarchical）&br&2. 扁平结构（flat）&br&3. 内容或体验驱动结构（content- or experience-driven）&br&&br&树形结构，通过在每一层的选择逐级深入抵达目标层，同样退