阅读更多

10顶
0踩

移动开发

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

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

尤其,随着移动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

  • kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm

    Rocky Linux 8.10内核包

  • Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用(复现论文或解答问题,含详细可运行代码及解释)

    内容概要:本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC(模数转换器)。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案,因为这种结构能在音频带宽内提供高噪声整形效果,并且多位量化可以降低量化噪声。接着,文档展示了具体的Simulink建模步骤,包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外,还进行了参数设计与计算,特别是过采样率和信噪比的估算,并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标,最终证明所设计的ADC能够达到预期的技术标准。 适用人群:电子工程专业学生、从事数据转换器研究或开发的技术人员。 使用场景及目标:适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。 其他说明:文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程,同时附带了一些辅助函数帮助分析仿真结果。

  • 计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计:考研复习资源集成与优化

    内容概要:该题库专为研究生入学考试计算机组成原理科目设计,涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题,并提供详尽解析,帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》(第5版)和唐朔飞《计算机组成原理》(第2版)的全部课后习题解答,这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题,注重基础知识与重难点内容,帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点,精心编制两套全真模拟试题,并附标准答案,帮助考生检验学习成果,评估应试能力。 适用人群:计划参加研究生入学考试并报考计算机组成原理科目的考生,尤其是需要系统复习和强化训练的学生。 使用场景及目标:①通过研读名校考研真题,考生可以准确把握考研命题趋势与难度,有效评估复习成效;②通过经典教材课后习题的练习,考生可以巩固基础知识,掌握解题技巧;③通过章节题库的系统练习,考生可以全面掌握考试大纲要求的各个知识点,为备考打下坚实基础;④通过模拟试题的测试,考生可以检验学习成果,评估应试能力,为正式考试做好充分准备。 其他说明:该题库不仅提供详细的题目解析,还涵盖了计算机组成原理的各个方面,包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作,注重理解与应用,以提高应试能力和专业知识水平。

  • __UNI__DB9970A__20250328141034.apk.1

    __UNI__DB9970A__20250328141034.apk.1

  • minio-rsc-Rust资源

    rust for minio

  • 4-4-台区智能融合终端功能模块型式规范(试行).pdf

    国网台区终端最新规范

  • 《基于YOLOv8的化工管道焊缝缺陷检测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

  • python源码-1个机器学习相关资源

    一个简单的机器学习代码示例,使用的是经典的鸢尾花(Iris)数据集,通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

  • pyqt离线包,pyqt-tools离线包

    pyqt离线包,pyqt-tools离线包

  • 《基于YOLOv8的船舶机舱灭火系统状态监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

  • SQL常用日期和时间函数整理及使用示例

    SQL常用日期和时间函数整理及在sqlserver测试示例 主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

  • GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml

    GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

  • T_CPCIF 0225-2022 多聚甲醛.docx

    T_CPCIF 0225-2022 多聚甲醛.docx

Global site tag (gtag.js) - Google Analytics