资讯频道 → 移动开发
阅读更多

10顶
0踩

移动开发

转载新闻 Redesign——iPhone中的“再”设计

2011-07-15 16:56 by 见习记者 lihuapi 评论(2) 有4383人浏览
iPhone 设计 PC
很久以前看过一本书，讲的是一些设计师如何把已有产品、品牌进行重新设计，既保持原有特色，又焕然一新。工作中似乎充满着“再”设计，无论是网站改版，还是外面产品的复制模仿，或是一些成功产品的跨平台、操作系统的移植….

尤其，随着移动app的发展和升温，PC端的产品有逐渐向手机端移植的趋势。如何将一款pc端产品成功移植到手机端，必然要对交互操作进行“再”设计。

从pc到iphone的“再”设计

目前来说，需要移植的多为用户量比较大，相对成熟,数据累积丰富的产品。保持原有特色和常用功能让设计师觉得踏实。但麻烦往往也常来源于此：

网站结构层级在pc端往往很深。



但是，移动界面的信息架构往往不适合设计很深的层级。层级深容易让用户迷失，也不好找回主页。



pc端因为有导航和面包屑的辅助，逻辑和轨迹也不难寻找。但是手机屏幕和操作系统限制，多于三级，用户就不再好操作。



在iphone guildline里对于面包屑也提出尽量勿用的提示。

有人说手机交互是让设计师最能发挥的地方。我觉得没错。交互设计师眼中优雅的产品往往都是“小而简单清晰的“和重视用户使用目的流程的。



美图秀秀iphone我相信出自设计师之手，界面开始就清晰的表达目的和需求：拍照或是处理图片，之后的操作也是一气呵成。

手机如果想获得好的体验，最好靠像用户一样不断操作来感受。也就是说，手机交互设计分析不像传统分析从产品已有功能开始，更应该从用户操作目的和流程开始。Iphone似乎先天领略了这个：



顶部导航采用页面名称+导航（title+nav）的形式。左右倾向后退和前进的跳转，符合用户一步一步处理的规范。也就是层级结构（sitemap）的扁平化。

除此之外，交互操作方式上，虽然触摸屏的手势和pc有一些操作相似的地方，比如点击、拖拽。PC和触摸屏方式也不尽相同。但触摸屏不存在所谓鼠标的悬停（hover）状态，也没有右键点击。Iphone有自己的独特手势，比如缩放、拉大多点触碰，长按图标抖动后移动或删除。


iPhone、ipad上手势的总结图


对需求的“再”设计

“需求”对于交互，在我理解分为两部分，用户需求和商业需求。

用户需求很好理解，就是用户为什么使用这个产品，为了解决什么问题，用户的使用场景和流程分别是什么？

比如一个用户拍照、装扮并分享的app。流程很简单：



如此而来，分割这些页面，可以通过对流程的梳理。每个页面反复问用来解决什么问题的，会让页面架构逻辑变得清晰。

另一个角度来说，苹果的确是老外的思维，单线条的。ios系统也是一步一步的。顶部为title+nav(页面名称和导航)，导航为表示流程操作的上一步、下一步。不难发现苹果希望流程设计像用户行为一样，符合用户习惯，简单直接。

而现实永远充满着无数的选择，比如，我拍好照片难道不能只保存不分享么？

于是流程演变成：



实际上，产品会更复杂。甚至有更多选择分流。

这就显现ios处理这种多线任务情况的弊端——如何在处理同一个页面下，既满足A又满足B呢？这就会有商业需求分析上的主次之说，哪条才是有倾向性的主线呢？

对于公司来说，分享是会赢得更多粘性、用户的方法。从这个角度来说，分享和保存的重量，明显分享优于保用户个人行为的保存。那么主线就该是：拍照——>装扮——>分享



保存可以作为分享中的辅助支流，放在屏幕中。

当然这个例子只是说明观点，实际分析上，保存作为对用户没有伤害性，完全可以默认保存，之后继续分享。

这里可以看到，商业需求就是公司战略重点，产品利益倾向和方向。一个交互设计师如何断定层级往往来自与他对于商业需求的解决能力。举个简单例子来说明：


拍拍的搜索提示，引导用户的热门搜索


把用户看成懒而怕麻烦的。上面的情况尤其对于浏览型无目的的用户来说，具有很强的引导和暗示，也是运营的发力点之一。

如果说design is solving problem.那么，方法永远比困难多，设计如何解决问题和困难的方式也多样。交互设计师如何权衡各要素的层次永远是思考的重点。

优雅的降级

用户有在手机上使用这个功能的需要吗？在什么情景下有呢？优先级高么？

PC端的功能未必适合于手机端。我在手机端会有ps图片的需求么？要到什么程度呢？是睫毛的根根分明还是肤色的修饰呢？目的是什么呢？自我欣赏还是让好友看看评价下呢？

所以，这就是涉及到pc端功能优雅的降级问题。

使用功能的目的：什么场合、情景？操作输出物的用途、特点？分享还是自留？

功能间的PK：这个功能数据量、用户在手机端的饥渴度

功能实现程度的考量：手势如何完成操作？能精细到神马程度？


Asking first，thinking first，design last.更有助于思考解决问题。


  • 大小: 22.2 KB
  • 大小: 9.1 KB
  • 大小: 4.8 KB
  • 大小: 20.7 KB
  • 大小: 13.2 KB
  • 大小: 24.1 KB
来自: zhangyq
10
顶
0
踩
评论 共 2 条 请登录后发表评论
2 楼 crazytree 2011-07-18 10:51
写的不错啊！
1 楼 erduo1234 2011-07-18 09:07
a      

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • iphone——iOS Human Interface Guidelines Tip

    Think twice before you redesign a standard control.   Be sure to thoroughly user-test custom UI elements.  Prototype and Iterate   Before you invest significant engineering resources into ...

  • UI 设计：如何做到理性？

    本文由作者SnowDesign于社区发布UI 设计，是用理性方法，来满足需求，并带来美学享受。本篇探讨 UI 设计如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性吗...

  • Redesign Your App for iOS 7 之 页面布局

    要对应用适配这种凶残设计，其工作量绝比适配iPhone5屏幕还要多许多。   我马上翻了一下iOS7相关的文档，在《iOS 7 UI Transition Guide》的 Bar and Bar Buttons 一节中得到了证实 ——   ...

  • Redesign Your App for iOS 7 之 页面布局【转】

    前言 iOS7是目前iOS史上最颠覆的一次改版。 它的出现令人兴奋，因为它将会带我们进入一个全新的时代； 它的到来也让我们忧心，因为它颠覆了一切，包括我们过去做过的很多努力。...当我看见iOS7那个半透明设计的n...

  • 设计原则

    ...很多人都在寻找那些能够帮助他们快速提升设计能力的方法，但你是否想过，...我想说所有这些都是决定你的设计是否优秀的因素，而在这之中，对设计本身的理解尤为重要。在这篇文章里，我尝试着通过那些经典...

  • 9个永恒的UI设计原则

    我想说所有这些都是决定你的设计是否优秀的因素，而在这之中，对设计本身的理解尤为重要。在这篇文章里，我尝试着通过那些经典的设计原则和设计领域内的一些最佳实践，来启发你对设计的重新认识。 什么是设计，什么...

  • 适配IOS7 Redesign Your…

    前言 iOS7是目前iOS史上最颠覆的一次改版。 它的出现令人兴奋，因为它将会带我们进入一个全新的时代； 它的到来也让我们忧心，因为它颠覆了一切，包括我们过去做过的很多...当我看见iOS7那个半透明设计的navigationB

  • 燃料电池汽车Cruise整车仿真模型（燃料电池电电混动整车仿真模型） 1.基于Cruise与MATLAB Simulink联合仿真完成整个模型搭建，策略为多点恒功率（多点功率跟随）式控制策略，策略模

    燃料电池汽车Cruise整车仿真模型（燃料电池电电混动整车仿真模型）。 1.基于Cruise与MATLAB Simulink联合仿真完成整个模型搭建，策略为多点恒功率（多点功率跟随）式控制策略，策略模型具备燃料电池系统电堆控制，电机驱动，再生制动等功能，实现燃料电池车辆全部工作模式，基于项目开发，策略准确； 2.模型物超所值，Cruise模型与Simulink策略有不懂的随时交流； 注：请确定是否需要再买，这种技术类文件出一概不 ；附赠Cruise与Simulink联合仿真的方法心得体会（大概十几页）。

  • 并列关系-关系图表-鲜艳红色 -3.pptx

    图表分类ppt

  • 实际项目中三菱fx5u编写的中型程序，用了st fbd ld 混合编程，程序内容完整，控制十来个轴 ，结构清晰 ，用到了结构体，全局变量 ，适合进阶学习

    实际项目中三菱fx5u编写的中型程序，用了st fbd ld 混合编程，程序内容完整，控制十来个轴 ，结构清晰 ，用到了结构体，全局变量 ，适合进阶学习

  • 并列关系-关系图表-简约折纸-3.pptx

    图表分类ppt

  • 甘特图-商业图表-稳重色彩 3.pptx

    图表分类ppt

  • 西南科技大学仿射密码实验报告

    一、实验目的 1.理解仿射密码的基本原理及加密、解密过程。 2.掌握利用 C 语言实现仿射密码加密与解密的基本方法。 3.通过实例观察仿射密码的加密效果及安全性。 4.通过实现简单的古典密码算法，理解密码学的相关概念，如明文、密文、加密密钥、解密密钥、加密算法、解密算法、流密码与分组密码等。

  • 彩色扇形层级关系图PPT模板-3.pptx

    彩色扇形层级关系图PPT模板-3

  • 创意铅笔四项并列PPT模板-1.pptx

    图表分类ppt

  • 大圆套小圆多项包含PPT图表.pptx

    大圆套小圆多项包含PPT图表

  • Matlab 运动脉搏数据 基于小波降噪和VMD分解的滤波研究 不同滤波方法的信噪比对比

    Matlab 运动脉搏数据 基于小波降噪和VMD分解的滤波研究 不同滤波方法的信噪比对比

  • 极简创意PPT时间轴模板.pptx

    图表分类ppt

  • CDN技术在网络内容分发的应用解析：工作原理、关键组件及优势

    内容概要：本文详细介绍了CDN (内容分发网络)的技术背景和具体实施方案，旨在帮助技术人员深入了解这一网络优化工具的工作机制。文章首先解释了CDN是如何通过在不同地理位置设立边缘节点来存储缓存内容的，接着重点描述了三个关键组成部分——边缘节点服务器、中心服务器以及负载均衡器的功能，并讨论了它们协同工作的流程。之后阐述了CDN的主要优势，包括提升网站响应时间和内容分发效率、减小源站服务器的压力和支持大规模并发访问等方面的表现。最后列举了几种典型应用场景，如加速静态网页加载速度、保障视频/音频串流质量，还有支持高效的大文件分发等。 适用人群：互联网开发者、运维人员及其他希望改进自己网站或平台性能的专业人士。 使用场景及目标：针对需要优化网站或移动应用程序加载速度的服务提供商来说，采用CDN可以帮助改善用户体验的同时也能节约带宽资源，进而达到降低运营开支的目的。 其他说明：文中不仅讲解了相关概念和技术细节，还提供了实用案例分析以便于读者更加直观的理解CDN的实际应用价值。此外，在选择是否部署CDN时应当考虑自身业务特点和需求，合理规划投入产出比。

  • phpAjaxcookbook英文pdf文字版(phpAjax手册)最新版本

    This PDF, available in English, is designed for advanced PHP Ajax learners. It offers 60 simple yet highly effective recipes for the Ajaxification of Web 2.0 sites. Key topics include: - Learning to develop and deploy iPhone web and native applications. - Optimizing the performance of Ajax applications. - Constructing dynamic websites that achieve faster server responses through the asynchronous call feature of PHP Ajax. - Utilizing Ajax for rapid and efficient data access from the server, ther

Global site tag (gtag.js) - Google Analytics