Tag Archives: Mobile

「milk香港版」交互设计漫谈(2)——社会化分享

为什么分享的图形是“心”?不应该是三点网络还是别的什么??
因为,人在用心分享!用心。

晚上忽然些许感触。一年前的晚上舜日对那个分享定义,略显激动地解释。
不想在这儿考究用户体验抑或是通用习惯,感觉苍白。
只是说,我们有一种态度,让产品设计与生活走得更近。

在这篇文章发布的几天里,milk香港版iPhone迭代了一个版本,再次被推送在官方新品推荐以及热门推荐。
几周前,milk香港版Android首次面世,新品热门推荐。
零推广。

1.2版本的迭代开发,主要功能是社会化分享。

分享的意义
社会化分享,是指在社会化媒体中,基于其分享功能,将信息网络化输入输出,加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等,是可以常见到的社会化媒体形式。在国内近两年,社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。
社会化媒体最大的特点是赋予了每个人创造并传播内容的能力。
Twitter平等的信息网络,使得每一个独立个体变得真实。
虽然国内的类twitter产品有变质,人与人多了一层等级关系,信息传播也不再充分流畅。但人们依旧乐于低成本的表达自己,传播感兴趣的内容。
最后在这个项目里,我们确定将新浪微博、腾讯微博做为第一批分享通道。
定位与设计探索
milk香港版的前后两个功能版本迭代间隔两个月。
保持良好的迭代节奏、并达成对用户有参与感的互动体验提升,是分享功能的两个产品考量因素。
设计定位
1. 迭代版本的分享功能,需要在视觉交互中引起用户注意。
2. 分享功能的显示与操作方式,沿用已有的设计,减少用户认知成本。
3. 操作流程简化、流畅,层级关系易理解。
功能ux流程探索
简述:入口->(过渡)->分享UI->(过渡)->完成
在当前的UI框架中,我们有三个区域,放置功能入口。分别是:
(点击放大)
头部条,Getit弹出区域,底部条。
头部条
——优点:规范标准设计
——缺点:游离在milk设计之外 不具有一致的美感
Getit弹出区域
——优点:易引起关注
——缺点:增加手势误操作的可能性
底部条
——优点:规范标准设计 易引起关注
——缺点:占用过多空间 增加手势误操作的可能性
权衡的设计,选择Getit弹出区域的非标准设计,统一在已有的信息框架。
这符合用户对第一个版本的认知——弹出区域是被推荐的互动内容。
(点击放大)
如上图,这是一个最终设计的mockups截图罗列。
接下来的分享通道,将提供2个入口,以及允许回退操作的取消按钮。
验证登录,将提供一个webview供用户填写登录。登录失败将停留在这个页面,允许继续尝试,或回退。
登录成功将填写分享信息,详细的分享内容由应用自动填写,包括关联的图像(隐藏)、slogan 、关联的资讯内容,用户可修改。并通过右上角的按钮进行发布。
更多的细节:更换账户的功能集成在该页面,允许用户的快速回退操作。超出140个字符的内容,将红色提示,默认灰色标示。
上传的过程将提供应用状态。并允许因为网络或其它问题的用户回退操作,回退的关闭按钮与提交按钮位置一致,易于理解。
分享成功会提示成功并进入分享前的初始资讯UI,失败将重新回到填写分享信息UI。
通常情况下,用户完成一个分享操作会经历三次操作,分享入口->分享渠道->提交。
视觉设计与交付
将视觉设计与交付合并,是因为沿用了前期版本的设计,不需要探索新的视觉风格,整个过程会十分高效。
保持标识元素的可识别与简约,皮质底纹。
(点击放大)
iPhone资源,基于640×960与320×480分辨率,@2x标识了retina适用的图像。
Android资源,按480×800分辨率导出,以_ad为区分。
(点击放大)
同样针对每个UI的redlines,为开发提供参考。
碎片的设计
默认的API错误alert反馈,只是在debug版本里才会出现。弹框消息提示是个恶心的设计,并且在这个场景里对用户没有帮助。
为什么小按钮没有pressed的状态设计?它们太小巧了,以至于手指按下后,眼睛看不到这个按钮……
应用提交iTunes时的Special设计……更新的应用截图,丰富的颜色与物品。

后记
这是第四篇编号为2的系列文章。。。- -。。。太懒鸟。。太不知道说什么鸟。。。多去看书体验生活咯。。

移动界面设计点滴(4)——为了阳光而设计


Lisa是一个sales,一天上午她拿出手机准备定位当前与客户的位置,确定路线。却发现因为过于强烈的光线,看不清列表结果页的地址。
Bill有睡前用手机查看订阅、处理邮件的习惯。却总会因为屏幕刺眼的光线,需要时间逐渐从光晕中适应辨清字体。
类似的场景在日常生活中你或许也有碰到。
部分硬件设备也为其提供了相应的解决方案——屏幕亮度调节,可以手动控制屏幕的亮度,适应不同的环境,以及在更高端的设备上支持的光线感应器。
同时我们也看到应用商所做的努力。更有贴心的是阅读应用的夜晚阅读模式,这为字体与背景提供了弱对比度的配色设计。
但我们在更多的应用软件中发现,对光线环境的设计需求被忽略。
我相信也会有更多的方式与设计,为用户带来良好的针对环境的优化体验。
忘记浮躁的成本效益,专注产品UI设计。
设计原则

  • 布局结构清晰
  • 清晰的布局结构是对一个应用是否可用的基本要求,功能布局层次鲜明,使得新用户通过低成本的学习快速记忆掌握应用的功能布局,能够在短时间内完成既定的任务。

  • 内容清晰
  • 保持图标的简约以及文字的可读尺寸,切忌因为过于追求特效与视觉美感,忽略最基本的可读性。

  • 适合的灰度与色彩对比度
  • 为不同的环境模式提供相应的对比度设计,以减少用户的阅读疲劳,其中仍需保持内容的可读性。

  • 声音事件的反馈
  • 设计不应局限于视觉体验,在enable操作后触发的声音,会让用户确信每一步操作的正确,以及填充某些环境下视觉设计的死角。

  • 适合的环境元素参与
  • 更多具有感情色彩的元素参与,将赋予界面更多的灵性。将weather的元素加入reader不是一件很温馨的事情么?

视觉设计范例

Google Map
清晰的功能引导设计,绿色、红色的Pin可以直观的确认目的地与当前位置,导航列表简洁,可以更可靠的工作在日光之下。

QQ浏览器
提供了白天模式/夜间模式的切换,在夜间周围光线较弱时,一定程度上缓解了视觉疲劳。

商铺点评
为室内/室外环境分别做了配色以及字体设计。在室外的实际应用过程中,更大的字体与对比反差带来了良好的阅读体验。并概念性的加入了天气组件,为出游逛街提供了更多便利。
特例
当然,并不是所有的应用都需要针对性的UI设计,该类设计较适用于内容主导的生活相关应用。在游戏中设计多套色彩模型并不是一个好主意。

移动界面设计点滴(3)——工欲善其事,必先利其器

经常有朋友问起,用什么工具做移动端的交互设计?
这是通常在接触交互设计都会碰到的问题,分享几点应用的经验。
Fireworks

从N年前做web开始就一直用Fireworks,这是一个非常高效的屏幕图像处理软件。
提供了基本的图形、钢笔工具,并可以快速的完成颜色的定制设置,布局便捷。
Fireworks是最佳的整合平台。
忘记全能的PS吧,这里你不需要瑞士军刀。
PowerPoint

对的,就是幻灯片演示。永远不要忽略工具的潜力。
PowerPoint 提供了大量的预设工具与样式,以满足基本场景的绘制,并创建不受工具限制的演示修改环境(当然PowerPoint是必备的^^)。
同样这是最优体积的解决方案。
忘记臃肿的位图工具吧,这里只有KB级别的wireframe。
Axure RP

这是真正称为专业意义上的交互设计工具。复杂到抓狂,当然我们并不是需要搞懂所有的功能。
RP即是Rapid Prototyping,快速原型。
充分利用它的自带组件,整合到Fireworks与PowerPoint里去吧。
MindManager

记住它的名字,管理好的你思维,我们不能遗忘任何一个Scenario。
在工作中保持一个窗口。
它距产品的mockup最远,却离精髓最近。
Balsamiq Mockups

值得一试的IPhone原型工具,你会发现原型的表现也可以有趣。
但只用它去做一些不正式的show吧。
它的模型不够精确、过于随意,也不对中文提供支持(或许善用工具的你会导出到Fireworks中二次处理)。
铅笔与记事本

真正热爱你的所从事的工作。
快速的记录想法随时随地,电子产品总有盲区。
拿一只顺手的铅笔,利其器,善其事。

最后最重要的一点——它们只是工具,核心在于独立精神驱动下的你。

移动界面设计点滴(2)——Flow大局观

Mobile UI design tips—— the overall view of flow
在移动设计中,我们需要完善的功能flow,对它认知的价值使得flow在整个设计开发过程中始终走在前面。完善的flow不仅令功能产品更加易用,带来良好的用户体验,与此同时,也有助于提升开发效率,不到位的flow将带来设计与开发的反复,使团队蒙受损失。
良好的移动产品flow标准有三

  • end to end
  • 清晰
  • 整合

所谓end to end是指功能根据需求设计需要符合所在平台的特性,完整的考虑到用户如何在任何场景下使用操作及完成任务,提供因为有效或无效操作而带来的反馈帮助信息。
清晰是指整个设计中不会造成用户的疑惑,符合平台特性易于理解的设计。通常但凡清晰的功能,即使需要付出更多次的操作,value还是高于稍显混乱的设计,虽然后者简化了用户的操作。

整合
,在前一篇《移动界面设计点滴(1)——减少空间占用》的一文有所涉及,受限于移动产品的诸多条件,合理的归纳使得产品使用更为流畅。这与清晰并不矛盾,重在调和。
下面以前些时间已经release的一个功能模块作为示例,展示如何设计一个良好的flow。

案例简析
功能目标:通过列表快速定位城市。
该功能从属于Map视图,图标以形象的道路指向标示。
在mockup中的功能主UI,显示支持的国家;
点击任意国家进入以首字母排列的城市列表;
点击任意城市,自动切入到Map视图并转向相应的可视地区。
主UI左上角提供Back键,预留回退。
在此,有两种设计思路。另一则是使用IPhone自带的Pickers控件,将国家列表横向置于上方,城市列表纵向置于UI下方。
它的优势在于可以在一屏中解决所有的问题。
但为了更好的使用Pickers,你需要加入更多的诸如Supported City等提示信息以区分两个Pickers,以及顶部的Done Cancel按钮,以完善flow。
这使得用户需要更多的时间来熟悉操作,这不是我们想要看到的。

站在用户的高度,你将更理解设计。

移动界面设计点滴(1)——减少空间占用

Mobile UI design tips——how to reduce needless space
与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息.
接下来以当前正在工作的UI做为sample,实战空间优化.

改进原则

  • 去除不必要的提示信息
  • 合理减少界面中的文字信息,图形化界面直观的使用户可以完成操作任务.

  • 控制字号,使用高亮/对比方式突出类似条目信息
  • 有需要充分利用单屏的空间,在不影响文字显示底线,采用多途径的设计方式描述内容.

  • 合理布局功能控件
  • 减少显示中的控件使用, 学会聪明的隐藏低优先级的功能, 对于用户熟悉操作与产品开发都将是有益的.
    如在Iphone平台善用标准化的action sheet, 在Android中的collapsed menu.

限制因素

  • 平台操作习惯
  • 遵循不同平台的设计准则(你可以从官方的UI开发指南获取这些帮助教程), 避免将错误的理念带给特定的平台. 如你不会在Iphone的设计中使用Android/Symbian的Options. 熟悉这些原则不仅会使产品易用, 善用组合的设计也将提升操作体验.

  • 屏幕物理属性
  • 不同尺寸的屏幕不同的UI. 要考虑的产品在所有目标用户的不同屏幕的显示效果. 如果要做一个通版的UI设计, 需要重点考虑带来的负面影响.触摸屏是另外一个需要考虑的情况,滑动使得翻页变的容易,可点击的元素尺寸是否有必要增大以适应大的手指…要知道, mutli-touch 目前只是apple的专利.

我们需要为特定的这个页面做些什么
这个是一个Android平台的程序.
这是优惠券列表页面,优惠券是我们最重要的显示内容, 用户需要在单屏中预览更多的优惠券信息.商店信息次之.tab导航将被保持以保证用户不会迷路.

  • 移除标题.
  • 默认收起商店信息,点击可弹下显示.
  • 为保证用户对商店信息的初步了解与注意,加入商店名称.

接下来我们将得到下面的界面.

UI不只是皮肤, 请用心使界面更加好用.
Enjoy your design~