40
手机客户端设计的 手机客户端设计的 10 10 条法则 条法则 By By 庄暐 庄暐 (@ (@ 麦肯诺 麦肯诺 ) ) http://ma i.im http://ma i.im

手机客户端产品设计的10条法则

  • Upload
    also24

  • View
    910

  • Download
    4

Embed Size (px)

Citation preview

手机客户端设计的手机客户端设计的 1010条法则条法则

By By 庄暐庄暐 (@(@麦肯诺麦肯诺 ))

http://mai.imhttp://mai.im

尊重系统

• 用户是你产品的使用者,更是系统的使用者。• 用户最熟悉的交互方式来自于系统软件。• 尊重系统不是固步自封。• 在什么样的平台做什么样的设计。切勿画虎不成反类犬。

好的设计

• Android版本 Q Q 和 iPhone版 Q Q

坏的设计

点击只是焦点落上而不响应操作 返回还是逃跑?

一个界面做一件事

• 空间有限,多用减法。• 至上而下的阅读不会遇到障碍。• 过程是过程,结果是结果。• 聚焦当前事务。• 只做一件事不是只一个功能。

好的设计

在什么界面做什么事

坏的设计

手忙脚乱的设计

一目了然无歧义

好的设计和坏的设计

• 一目了然– 当孩子第一次拿起铅笔的时候,他们像是生来就知道该如何开始。软件也应该这样。

– 减少不必要的思考和困惑。– 将重要的信息展示在一个层级里面。– “有时候用户只需要一个 yes or no”的答案,开启后无需操作就能获得答案是最完美的。

• 无歧义– “ ”用语的无歧义。比如按键叫 收藏,是添加收藏还是打开收藏?– 操作的无歧义。比如搜索,我应该在类别下搜索还是该在全站搜索?

好的设计

• 一目了然

坏的设计

小地陪?陪神马? 91 ,你让我情何以堪

清晰的反馈

好的设计和坏的设计

• 反馈的作用– 告诉用户后台正在发生什么。– 告诉用户当前位置。– 告诉用户错误原因及补救办法。– 告诉用户结果如何。

• 反馈的方式– …焦点的反馈(高亮,变色, )– …点击的反馈(弹起,翻转, )– 文字弱提示。告知即可,不中断操作。– 文字强提示。中断操作,需要手动确认。

好的设计和

弱提示,不阻断操作 强提示,阻断操作,明示正在发生什么

坏的设计

多此一举的成功提示

有这个必要吗

我关心这串数字吗?

用户习惯和产品一致性

• 习惯如何产生– 系统的使用。比如用户习惯左上角有后退。– 对生活的理解,比如内容的分类。– 对隐喻的认同。比如大头针是定位。

• 一致性– 一致性保证用户在使用别人的产品的经验能复制到使用你的产品中。– 在使用你的产品的过程中相同的流程一致性。– 文案的一致性。– 用户预期的一致性

好的设计

删除的流程和系统一致和生活经验一致

坏的设计

• 58同城

底部导航按钮哪去了? 错不在此

更坏的设计

令人发指的不一致…

高效性

• 不以任务为导向的产品设计都是耍流氓– 时间宝贵,我有别的事情要做。– 车在颠簸,我眼睛好累,疲劳了。– 有件事阻断了我做后面的事情,请尽快告诉我答案。– 好吧,车还没来。(随时会被中断)

• 如何设计高效应用– 清晰的层级结构。– 建立准确的任务模型。对可能的任务行为进行分解并逐一优化流程– 降低学习成本。最好的办法就是使用系统空控件和操作方式– 降低噪音,保证高级的功能在用户需要时能够找到,在不需要时候不会造成困扰

好的设计

结构清晰系统控件,低学习成本,无噪音

坏的设计

吃饱了撑的解锁方式逼我探索和发现

高效的设计总是简单的

隐喻和拟物

• 隐喻和拟物化设计

– 隐喻是用一种事物暗喻另一种事物,隐喻的设计来源生活,包括生活中的物件,处理事务的方法

– 隐喻和拟物可以有效的降低交互成本。– 有软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。– 隐喻和拟物应该遵守习惯法则。– I CON 的作用是让人更易理解而不是陷入困惑。为设计而设计会陷入设计的误区。

好的设计

隐喻 拟物 -翻页钟

宽容

• 宽容意味着容错和可回溯– 手机出错的可能性更大。误操作。– 手机交互试错成本更高。输入不便。– 升级不便,用户不愿意为你错误买单。(不给你升级的机会)

• 如何更容错– 误操作的提示。比如发贴时返回提示是否放弃已输入内容。– 保存上次状态。保存用户上次发送失败的帖子信息。– 纠正问题。错误发生时,告诉用户错在哪,并给出纠正办法。比如联网故障的重试按钮。

– 不抛弃,不放弃(对老用户的支持)

好的设计

放弃提示是否保存 保存不同标签下的状态

融合手机的特性

• 手机的特性– 通讯录。(推荐好友,转发信息,聊天)– 定位。(附近信息)– 手持方向。(指南针,实景模式)– 摄像头。(上传图片)– 语音输入。(减少输入)– 实时通知。(订阅推送)– 设备连接。( 2个设备间的分享)– 多点触摸。– 重力感应。(加速度,平衡)

好的设计和坏的设计

实景找房信息推送和罗盘

满足用户预期

• 预期的多样性– 其他软件给我的认知。其他软件可以,你可以吗?– UI 给我的预期。看来你可以这样操作,可以吗?– 个人习惯的预期。左上角应该有个返回按钮,有吗?– 手机本身给我的预期。摇动 iPhone可以清除输入,可以吗?– 流程给我的预期。点搜索就出来最匹配的结果而不要再选择类别,可以吗?

坏的设计

点击电话不能拨号滑块能滑动吗?不能 没人性的搜索

好的设计

深得我心

圣诞快乐 谢谢

圣诞快乐 谢谢!