设计 iOS 应用之前不能不知道的5件事情

基于多年的经验,我们总结了5条设计师必须牢记于心的事情。虽然这些建议是基于ios的设计提出来的,但是对于其他系统的设计依旧很通用。

  1. 必须非常了解你的设备

很显然,从设计web转到app,会有很多转变。app不是网页,当然也不能按同样的方式进行设计。接下来我将阐述下app的特殊点:

app有着和网页完全不同的交互形态:触碰替代了点击,试图替代了页面,按钮替代链接,等等。我们认为在讨论app的设计时,换种设计语言,能保证让我们牢牢记住正确的框架。

由于app的交互形态不同,导致了起设计的形态也随之变化。别总想着在一个视图中给用户过多的信息,功能页面也最好分开,这些在iphone的app设计中尤为重要,毕竟屏幕更小。

用户使用app和浏览网页也是不尽相同的。app的导航更单一更纵深,用户需要多次点击,才能到达某个页面或实现某个功能效果.这是合理的,千万别试图将所有功能都平铺在界面上。

ios系统下的导航也非常特殊-没有chome浏览器,没有后退按钮。当时ios发布的时候,就随之出现了导航规范,指导设计师找到最能满足自己需求的导航。

可点击pttrns去查看优秀的导航案例。

 

最后,记住,ios app是在ios上运行的。你需要的设计元素,比如圆角,半透明阴影等,都可能会影响性能问题。这就需要设计师和工程师一起寻找合适的解决办法。

维基百科上由ios系统所有设备的描述,以下是我为大家罗列的支持iso6的设备。我们希望能指导大家如何在各设备间平滑过渡。

blog

2. 设计需要通用

好的应用肯定是通用的,也就是不管是retina屏幕还是普通屏幕,不管是横屏还是竖屏,不管是ipad,iphone还是ipod,你的应用都应该可以使用。而且要保证每一个设备使用时的体验。

这很难,我们已有的一些小建议也许能帮到你80%。

在retina屏幕上,请避免基数大小的图形

普通屏设备上的图形大小是retina屏图形大小的一半,所以如果retina屏幕上图片大小是101px,那么在普通屏上该图形的大小就是50.5px,这是很荒唐的。所以如果不想把自己和工程师们折磨死的话,就乖乖的使用整数尺寸吧。

触碰点的区域要足够大

用户不会用浏览器打开你的app,所以他们也不会用鼠标。所有的操作都必须通过手指,而手指是很不精准 。

为了保证你的app易于使用,要保证你的触碰区域至少是44px*44px。

3. 在设备上验证你的设计

ios设备的屏幕分辨率很多,屏幕色彩也很多,所以在设计ios 的应用时,你必须考虑到这些因素。

为了保证最后的设计效果,你需要在不同的设备上进行测试:retiba屏和普通屏。竖屏和横屏,ipad和iphone。可以借助类似liveview或者skala等工具,把ps里的设计稿直接镜像到设备上直接看效果。最后再多一句:记得尝试调整测试设备的屏幕亮度,保证你的设计是适应不同环境的。

4. 让你的界面动起来

再ios上做动画是很容易的,Apple公司费了很大心思,才保证app支持各种炫丽的动画,不好好利用这个优势就实在太可惜了。

但是很不幸的是,ps无法模拟动画效果。最理想的办法就是开发出demo在真实的设备上演示。同时也能激发你更多的想法。

在做动画的时候,尽量使用用户熟悉的效果。进入下一级菜单的时候,应该是从右侧推送过来;新开窗口应该是从底部生长出来。你可以尝试用自己的设计去模拟这样的动画,但是别去捏造一些新奇的,因为只有这样,用户才会有种熟悉的感觉,继而安心使用你的app。

5. 开发者尽早参与到设计中来

好的应用都是开发者和设计师共同努力出来的结果。实现合理的,但是复杂的效果时,通常会遇到很多挑战,开发者就需要尽早参与起来一起来解决这些挑战。

开发者通常都有很多界面上的想法,即便很多时候不会去做成真的界面。但是他们能指出哪些设计元素是和ios不匹配的,所以当设计师和开发者们在一起和谐工作的时候,总会有意想不到的效果出现。

简而言之,app和web是完全不同的,你的设计需要兼容不同的设备,并需要拿真实的设备去验证你的设计。动画是极好发挥的地方,但是需要尽早让开发者介入到项目中来,且越早越好。这些可以帮到了大部分,那么接下来的,就靠你们自己了。

原文地址:http://www.teehanlax.com/blog/5-things-to-know-when-designing-for-ios/

移动信息架构-☞载要:http://www.uxbooth.com

层级式(Hierarchy):

层级样式是带有一个索引页和一系列子页面的标准网站结构。如果你在设计一个响应式网站,你可能会受限于此,然而它所带来的额外样式可以帮助你为适应移动设备而调整体验。

Luke Wroblewski在博文《移动为先》( Mobile First)中帮助我们首先关注于重要的内容:可以帮助我们创造更好的用户体验的产品特性和用户使用过程。

  • 适用项:整理需要跟桌面端网站保持一致结构的复杂站点。
  • 注意项:多面的导航结构应用于小屏幕上可能会给用户引起的麻烦。

辐射式(Hub-spoke):

辐射样式向用户提供了便于跳转的中央式索引,这是iPhone的默认样式。用户无法在分页面之间切换,而必须回到中央跳转。一直以来,这种样式主要用于工作流程受限的桌面端(通常是技术限制,诸如表单或者购买流程中受到的限制)。然后,这种样式在移动设备上越来越流行,这是由于用户使用移动设备时会专注于单一任务,以及由于设备本身的外型因素。这种样式的流行使得全局性导航愈发难以使用。

  • 适用项:多功能工具,其中每个都有不同的内部导航和目标。
  • 注意项:这种样式不适于用户进行多任务操作。

套娃式(Nested doll):

套娃样式采用渐进式导航引导用户查看到更详细的内容至。当用户操作不方便时,这是一种快速简单的导航方法。通过点击“前进”或“后退”,用户可以强烈感知自己所处何处。

  • 适用项:应用或网站的主题奇特或者主题之间密切相关。它们同样适用于内置其他父样式的子样式,诸如标准的层级样式式和辐射样式。
  • 注意项:用户无法在不同内容中快速切换,因此需要考虑这种样式是否方便查找,而不能让它成为查找内容的绊脚石。

标签视图(Tabbed view):

这是一种普通应用用户熟悉的样式。这种形式通过工具栏菜单集合为一系列的内容。这样用户可以在第一次打开应用时,便能快速扫过并了解应用的全部功能。

  • 适用项:基于一个相似主题的工具项和多任务情况。
  • 注意项:这种样式不太适合复杂类结构,较为适用于非常简单的内容结构。

便当盒/仪表盘(Bento box/Dashboard):

便当盒/仪表盘样式通过使用组件展示相关工具或内容的部分信息,再把更详尽的内容链接至到索引界面。由于这种样式很复杂,它在桌面端显示会比在移动端更为适合。这种显示醒目有力,用户只需要扫一眼就可以理解关键信息,但它严重依赖于信息清晰的设计呈现。。

  • 适用项:主题相似的多功能工具和基于内容的平板电脑应用程序。
  • 注意项: 尽管平板电脑的屏幕提供更多空间承载这种样式,但更为重要的是我们要理解用户如何与每块内容互动,以及我们要确保应用简单、有效、使用愉悦。

筛选视图(Filtered view)

最后,筛选视图样式允许用户通过选择筛选项来切换不同视图从而在一系列的数据中进行导航。筛选同分面搜索方法一样,是一种很棒的适合用户查询内容的方法。

  • 适用项:内容数量庞大的应用或网站,诸如文章,图像和视频。它可能为杂志样式的应用或网站提供了好的基础,或者是它可以作为另一个导航样式内的子样式。
  • 注意项: 移动设备上,由于筛选和分面搜索很复杂,所以很难在较小的屏幕上展示。

《Facebook 产品设计五维》

 情感

精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。

亲和力——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。

分享——承载对Facebook连接、自由、生活的文化认同。

留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。

 易用

反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。

方位清晰——清晰的知道自己在那里,退路在那里,能够去那里。

路径简短——完成任务在尽可能控制在三步之内,完成某项任务所花废的步骤和时间最短最好。

容错性好——设计限制因素,突出正确操作,隐藏可能的错误操作,减少勿操作。 互联网的一些事

 形美

文字悦读——信息传达易读,符合中文阅读习惯,信息传达快速。

颜色合适——利用大众对颜色理解的寓意,使用正确的色彩加强产品的印象。 互联网的一些事

布局美观——均衡与对称的构图,使画面整体具有稳定性。

空间感强——运用几何透视的原理,设计中表现远近、层次、穿插等关系。

    气势

专业性——细节完美,找不到明显的设计瑕疵。

整体性——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。

品牌成分——体现Facebook品牌形象,并使品牌资产保持延续与统一。

惊喜度——局部设计有贴心且另人惊喜的体验。 互联网的一些事

 创新

共性——符合已知事物的普遍认知。

异性——在共性基础上,给人耳目一新的感受。

复制性——能够促进Facebook其它产品的发展。 互联网的一些事

颠覆性——在互联网上前所未见,能够变成同行业新的标准。