iOS用户体验设计：如何构建交互模式
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
iOS用户体验设计：如何构建交互模式
如何构建交互模式(选自《iOS设计》)
一个工作流可以产生大量的交互模式，在功能上每种模型都可以很相似，但在上差异就会很大了。如何通过具有特色的交互方式创建超越同类的应用就显得至关重要了。
工作流的定义是所有交互设计活动的基础。我们就是在定义工作流的过程中确定用户与应用的交互方式。你可以根据想要实现的目标，在多种不同的层次上对其进行定义。在有些情况下，你只需要抽象地定义工作流，而不必关注其功能细节和具体的交互方式。这对确定功能集和一般流程之间的关系是很有价值的。而在另一些情况下，你则需要定义用户可能会碰到的所有交互、事件以及状态变化的逻辑，以清晰地勾勒出整个应用程序的操作方式。
亚马逊购买
为了进行交互建模，你需要更为详细的工作流，而不是抽象且高层次的工作流，但也不需要过于详细。交互模式的详细程度取决于应用的性质。下面详细剖析如何构建交互模式：
如前所述，交互建模是对应用的整体交互行为进行定义，并规范如何运用或规划这些交互行为来为用户创建具有一致性的、易于理解的交互模式。《iOS用户体验设计》第2章介绍了作为iOS用户体验基础的概念模型和空间模型。分层平面和空间模型这两种概念共同组成了iOS的基本交互模式。可以看到，如果你能够合理运用这些概念，它们就能发挥出巨大的力量。（参见图1-1）
图1-1 iPhone中体验到的iOS空间模型
Default Plane 默认层
Underlying Plane 隐含层
Superimposed Plane 叠加层
在开始交互建模时，你需要以一种抽象的方式进行思考。你不需要考虑具体的功能和内容，而要考虑应用所可能采用的各种不同的交互行为，由此来了解如何使用它们来控制界面上的元素。iOS为我们提供了大量的可选方案，比如，缩放、拖移、轻扫、滑动和滚动，等等。无论是单独使用还是结合使用，这些手势都可以用来创造出有趣的效果和截然不同的交互方式。
到目前为止，我在差异化方面已经说得不少了，其中最大的一项挑战就是：弄清应该在哪里并如何以最佳方式对应用中的交互方式进行差异化设计。交互建模中最重要的就是理解怎样运用这些概念。你可以自由尝试并且思考如何将这些概念用到你的设计中去。创建一个具有差异性的解决方案并不困难，但是要创建一个可扩展、易于扩展且最重要的是易于用户理解的解决方案，则需要花费很大的努力。
让我们来做个小练习，以便理解如何打破常规创建具有差异性的交互方式。想象一个简单的用户界面组件，比如，列表视图。在用户体验或者用户界面的设计中，列表对象是相当常见的，而且用途非常广泛。一般来说，列表都是由文本对象竖直排列而成，并且每个文本对象都独自占据一行（参见图1-2）。
图字：ITEM 列表项
图1-2 典型的列表视图
现在退一步，从抽象层面上思考一下列表究竟是什么。它本质上只是一个可以让你进行选择的对象数组。这是一个非常基本的概念。如果进一步思考，你就会发现，并非一定要以竖直的方式来排列列表项，而且也不一定必须排成一列。所以你应该问问自己，是否有其他更有价值的形式用来解决自己的问题？这一问题的答案可能不怎么显而易见，所以我们需要考虑一些不同的方案，看看会不会产生一些有趣的效果。作为练习，我们来实践一下如何进行这一过程。
如果我们认为垂直排列的列表没有什么内在价值，那么水平排列又会怎么样呢（参见图1-3）？
图1-3 尝试水平排列列表
尽管这挺有趣，但是我们却发现这种方式有点问题：当设备处于纵向模式时，屏幕在水平方向上的可用空间就变得非常有限。那么这个问题是否严重？如果不考虑具体情境，那这并不是什么大问题。但是想快速浏览列表项时，这种方案的效率实在很低，因为你无法一次看到所有的列表项。而当设备处于横向模式时，虽然情况稍有改善，但仍然不够理想。
让我们继续拓展一下思维。为什么列表项要单列显示？如果我们将列表中的一行扩展为容纳多个项的对象数组，或者说将列表扩展为某种网格结构，那么会是什么效果呢？
图1-4 将列表以网格形式显示
现在就变得更有意思了。这种形式的列表的优点就是能同时显示多个列表项，比起传统的列表，这种方案看起来进步了不少。但它仍然存在一些不足，那就是文本对象的可用空间变小了，不过我们似乎可以调整一下文本对象的大小来应对这个问题。
很好！我们从基本的列表概念出发，一步一步地演变成为了这种形式。仅仅通过一些简单的尝试，我们就彻底地改变了这种基本概念。但是我们不应该就此止步，因为仍有一些地方值得我们去探究。让我们思考一下与列表和列表类型对象相关的交互行为。在iOS中，典型的列表可以通过向上或者向下快速轻扫，或者缓慢拖移位于界面边缘的列表项来进行导航，那么这种方式适用于网格形式的列表吗？（参见图1-5）
图1-5 应用于两种解决方案的竖直方向上的滚动操作
答案显然是：没有问题！在这个示例中，滚动方式完全适用，但要注意，这种方式并不适用于所有情况。你总是需要评估现有的交互行为，确保它在新的模式中依然可用。
继续我们的示例。让我们试着从抽象层面思考这个列表的交互行为。标准的iOS列表对象在任何时候都支持滚动操作，而且因为文本对象是纵向排列成一列的，所以滚动方向也只局限在纵向上。由于我们的列表项不是纵向单列排列的，那应该如何将滚动操作应用到现在这个模式中去呢？
图1-6 网格中的多轴滚动方式和行滚动方式
针对这种情况，我们可以有很多种滚动方式，而且它们可能都有效（参见图6-6）。通过这一系列的示例，我们可以看到，基于已有的界面组件和交互方式来创建新的概念并非难事。这个列表示例只是一个开端，很多其他的想法、界面组件和界面元素都可以通过这种方式来加以改进。这么做可以帮助我们为应用程序设计出非常吸引人的用户体验。
本文内容选自：第六章：交互建模和创新概念的创建→6.3节建模流程细解→6.3.2构建交互模式
《iOS用户体验设计》内容简介：
本书针对开发者与设计师的软肋，由剖析苹果《iOS人机界面指南》（HIG）入手，以创造易用性应用体验为纲，重点探讨了几项值得关注的内容。本书行文字字珠玑，点拨发人深省，读者可深入了解苹果应用设计的各种脉象特征，从而能为制定自己的应用开发策略打下坚实的理论基础。
主要内容有：
o 如何超越HIG创造成功的用户体验
o 基于自身条件制定领先对手的差异化策略
o 发掘iOS功能，优先打造高品质移动应用
o 易用性与交互式建模
o 用户自定制与功能自动化的均衡
作者简介：Timothy Wood是EffectiveUI公司的用户体验总监，该公司屡获殊荣，出品优秀的软件，提供突破性的交互体验。加入EffectiveUI之前，Wood曾任伊士曼柯达公司设计创新和高级开发部门的创意总监，并因其创意和设计能力而获得了国际认可。过去15年里，Wood专注于通过用户体验进行商业变革。
转摘请注明优设网译文出处，谢谢各位小编。
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：）分享实战经验。
设计微博：拥有粉丝量47万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注Copyright 同济大学艺术与传媒学院用户体验实验室 版权所有浅谈版式设计在报纸广告中的应用_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
浅谈版式设计在报纸广告中的应用
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
你可能喜欢君，已阅读到文档的结尾了呢~~
版式设计理论在设计教学的运用
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
版式设计理论在设计教学的运用
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口在线直播 5月26日杭州-5月28日福州-5月28日
阅读（6132）
来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
空间版式是为用户提供个性化服务的功能，不同的排列组合都有可能设计出不同的版式，给人截然不同的感觉。空间版式年久失修，伴随V8的上线，空间的版式也应该注入一些新的血液，同时，老的版式也应该好好的翻修一番，让用户住得更加舒服。
设计版式如同装修房屋，搭建的框架如同房子的内部结构，在同一空间内，装修设计师能通过不同的布局与结构给他人不一样的空间感，所以我们在装修的时候拆掉一堵墙，或者隔出一个新的区域都会给房子带来全新的布局感受。
一旦确立了主体框架，其中的内容就如同房间里的家具，不一样的陈设和风格都会给用户带来不一样的观感，接下来我们要做的就是把成套的家具放在已经布局好的空间里，最后给主人和访客带来愉悦舒适的感受。这也正是空间版式和装扮期望为用户带来的体验！
一件事物达到了极致，就会自然而然呈现出一种美感。当我们忙碌了一天回到家，看到只用线条、色块来区分点缀的房间，没有冗杂的装饰，就会给我们带来清爽整洁的感受，可以立刻让人放松下来，沉浸其中。
同样，我们的空间版式和装扮就是想给用户带来这样一种舒适的氛围，不为质感所累，以功能主义为第一要素，在功能与形式之间找到新的平衡，注重简单、大方、实用、突出功能、去掉多余的繁琐装饰，让用户一来到这里就能立刻轻松获得他想要得到的信息。
上面的装修风格图片越来越受到大众的欢迎，在这个信息膨胀的时代，人们的诉求是简洁高效。在设计中我们也推崇这种极简主义，在互联网中用户的阅读方式并不是仔细阅读，而是“扫”，我们的目标就是通过去除无谓的干扰，提升信噪比，让用户在一扫而过的瞬间获取到他关注的内容！
从Windows7到Windows8,微软颠覆了我们的视觉感官，从丰富质感过渡到扁平化设计，微软引领了设计界一个新的方向，掀起了新的设计潮流。iOS7的诞生更是将扁平化设计推向了极致，QQ空间也希望跟上设计的潮流，带给用户最新的视觉体验。
受到Windows8主题风格的灵感启发，我们设计了扁平化风格的主题
扁平化设计看似简单，但实际设计的过程中才体会到其中的不易，因为再也无法用那些阴影修饰效果来隐藏设计上的不足，每一个细节，都必须用心打磨。由于每一个feed模块的尺寸是固定的，所以要让用户一眼就能区分日志、相册、说说、单图、多图等实属不易，需要精确计算字体大小，间距等。
入口型版式的特征是拉取用户的每一个模块的少量信息，引导访客在访问时，通过主页内容发现自己对主人感兴趣的模块，再去看详情。就好像是无数扇门摆在用户面前，你首先要告诉用户这扇门后拥有哪些美丽的风景，达到对用户有足够的吸引力，用户才会推开这扇门去看门后面隐藏的精彩的内容。
在装修中，爱生活，爱摄影的人，家里总会有一面墙上挂着各式自己的照片，自拍照，他人肖像，或是风景，因为照片能记录自己生活点点滴滴，每一张照片都有背后独特的故事，还蕴含着摄影者拍摄时的心情和拍摄的理由。我们有理由给用户带来最富温情和回忆感的版式，让用户通过照片来讲述自己的故事。
很多摄影爱好者用户并不缺乏优质照片，但是我们没有一个版式能很好的帮他们呈现。QQ空间需要尽量满足不同用户的多样化需求，因此为摄影爱好者专门设计一套版式的想法就此诞生。
V8的改版，增加了cover图，在摄影控版式中，我们的cover图是允许用户自己修改的，这样，摄影爱好者在整个版式上设置自己的摄影作品，会有很高的满足和成就感，同时内容区的照片我们利用html技术，让每一横排都能做到统一高度，让整个页面更加整洁，该版式还能做到自适应。这种版式能为访客带来更舒适的视觉享受，更好的帮助访客认识主人的摄影生活！
住久了的房子，总是需要点新鲜的翻修，或者趁买了房子，根据实现自己梦想居住环境进行装修，版式就是以实现此目标为最终目的。
也许你只是一个普通家，但是我们可以提供给你典雅的欧式风格、古朴的中国风格、温情的北欧风格。
装扮也是如此，我们需要找到最新的元素，一方面提供更完整的结构服务，同时也需要给到更户更新的感觉。我们提供的不仅仅是一套简单的视觉皮肤，而是一整套完整的空间浏览体验解决方案。
经过对线上已有版式的体验，发现已经有些陈旧和老化，需要来一次翻新装修。为了达到目的，创造更好的用户体验，针对这些问题进行再设计，解决了目前线上版式的一些交互、视觉以及跟肤逻辑混乱导致的问题。
a.跟肤逻辑混乱
QQ空间V6版本在跟肤一直都存在着一些问题，以这套格子拼贴版式为例，在V6版本中，模块底色是白色半透明的，当遇到深色装扮，为了协调色调自然会是一套深色配色，深色配色的文本色一般都是浅色，白色半透明底就会让这个正文色不明显，甚至看不清，这样会给用户带来极大的阅读困难。所以在这次版式的调整中，针对这一问题，我们会根据配色自动匹配模块底色，如果用户搭配的是深色配色，那么我们会给用户搭配黑色半透明底，如果是浅色配色，就搭配白色半透明底。同时为了满足既不影响装扮及版式的美观，也不影响内容的阅读，设计时，考虑到内容区域的模块，仔细调节模块的透明度，让两者都能兼顾的情况下达到视觉的最佳效果。
b.默认高度
默认高度设置首先要考虑的是即能让用户在首屏看全核心内容，同时不能让版式过多遮挡装扮皮肤。
由于每一个版式的结构和样式都存在差异化，要让所有的版式都统一成一样的高度很难，这样做会丧失版式差异化的魅力。
我们会根据每一个装扮的特点设定高度，同时也会利用新技术，让有些版式根据浏览器大小，做到居中显示，已至于不让大屏幕的用户感觉到页面不协调。
c.左右失衡
这个问题主要体现在远方来信这个版式上，这个版式的初衷是为右侧有内容的装扮设计，但当遇到右侧无内容的装扮时，左右侧的视觉内容就会不均匀，会让用户感到极度的不平衡。
所以，我们在再设计的时候，考虑到去兼容更多的装扮，把左侧模块加宽，这样整个重心不会太过于偏移，同时如果装扮右侧有内容，就会使整套版式更协调，更完美。同时在设计中加入一些小细节，模块的右上角和左下角加入折角，让整个版式更像是信纸，更契合主题。
d.质感陈旧，阴影过重
桌面一瞥和简约装修这两套版式质感和投影都是以前的设计表现形式，为了让装扮更流行，所以设计调整得更加扁平，去掉多余的阴影和质感，会让用户觉得更精致，更清爽，视觉感受也会更加舒心。
房子内的家具和装饰品多了，或多或少会出现凌乱的感觉，为了尽可能减少这些让人凌乱的因素，人会制定一些规则，让其看起来更有逻辑性，更合乎情理。比如书应该放在书架或者书桌上，衣服放进衣柜里等等。
当我们的空间里出现了空间名，空间描述，用户头像，用户名时，不恰当的组合会给用户带来疑惑，会思考，这到底是什么。
这时，规范的重要性就体现出来了，我们尽可能的要让这些内容有规律的出现才会让用户一目了然。同时，有了这些规则，不同的设计师做版式设计时，也不会有太多的困惑，核心的功能点也不会遗忘。
我一直觉得，设计的灵感在于生活的点点滴滴，在于观察，无论我们做什么样的设计，都时在围绕着人来展开的，所以我们可以在不同的设计行业里借鉴参考，拓展自己的思路，经过思考，转化为自己的一些设计思维。
“先文化人，后设计师”，这一句话对我影响蛮深，视觉设计只把界面做得好看还远远不够，还需要文化底蕴，融入以人为本的思想，并将视觉手法与交互和前端技术有机结合，提供完整的视觉解决方案。只有懂得更多了，设计才会更有内容，设计才会更有灵魂。
后续我们还是持续挖掘更多的版式和装扮上的创新点，我们期望通过版式和装扮让QQ空间像家一样，带给用户更多人性化的体验，帮助用户在空间沉淀生活点滴， 留住感动。
感谢你的阅读，本文出自。
除了坏事，我啥都干。
人人都是产品经理（）是中国最大、最活跃的以产品经理为核心的学习、交流、分享社群，集媒体、教育、招聘、社群活动为一体，全方位服务产品经理，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、杭州、成都等10余城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。