UED学习笔记
越努力越开森

为移动而设计

来自人人都是产品经理:The UX Booth

-------------------------------------------------------------------------------------------------

系列一:移动设计信息架构

1.移动设计有何不同:

物理属性和特征:尺寸更小,内容结构更简洁,有限的贷款和连接速率需要充分利用加载时间,减少数据请求

何时何地做什么:不限时间地点的频繁使用,不同环境中各种干扰

行为和感觉:对移动设备产生了真实的感情,是身体和人格的一种延伸

 

2.移动环境如何影响设计师

移动分发方式:响应式网站/安装APP

移动信息架构:层级结构,集中和分发,重叠放置,页签视图,便当盒,过滤视图等

一种标准的网站架构,有一个主页和一系列子页面,对于需要依据桌面网站架构进行设计而言,能够很好的组织复杂的网站结构

当心:当屏幕小时,多层导航会有问题

集中和分发模式会在导航是给你一个中心索引,这是苹果的默认导航模式。用户不能再不同子栏目中进行跳转,必须会索引页面。适用于多功能工具,每个功能有一个独立的内部导航和目标

当心:用户想要多任务时

重叠放置让用户以线性方式查看详细内容,当用户迷路时,这种设计能快速和方便地为用户导航。适合于有着单一的,或者相关话题的APP或网站

不适合:无法快速在不同模块中切换

常规的APP设计,通过一个工具菜单将一组区块组合在一起,适用于多任务,且主题相似的APP

当心:这种模式适合简单内容结构的应用

便当盒或仪表盘,通过使用组件展示相关工具或内容的一部分,直接在首屏就能够带来更详细的内容呈现,由于比较复杂,这种模式更适合用在平板上。适用于多功能工具,以及基于内容,具有相似主题的平板APP

当心:平板屏幕给于你更多的空间利用这个模式,但是,了解用户如何在不同页面之间进行交互使用,来确认APP易用、有效是件非常重要的事

过滤视图允许用户通过选择过滤条件创造不同视图,在一系列数据之间进行导航。适合于拥有大量内容的APP或者网站,例如文章、图片、视频

当心:由于复杂度,过滤器和面搜索在小屏幕上会很困难

 

 

系列二:交互设计

1.人体工程学:

既要考虑设备尺寸,也要思考触摸屏在实际应用情况下的各种问题

点击区域,需要充分的控件以便用户准确操作,大致对应标准屏幕44px-57px,对高密度屏幕则是88-114px

2.手势:

3.过渡:

让应用内不同状态间的界限变模糊,很多情况下,过度可以帮助用户回忆过往内容,防止他们“ 迷路”

4.通用模式参考:

主导航:

扩展菜单——适用于响应式网站,要注意果冻的菜单和子菜单会把内容挤到屏幕下方

侧边栏抽屉——菜单选项较多,可以分离出单独的一部分导航。但注意不要和其他导航或交互模式相冲突,例如在此模式外还使用了扩展或标签菜单,用户就会糊涂了

标签菜单——初于对手机屏幕水平控件较小考量,适合于菜单选项较少的引用

辐射菜单——可以展示相应应用的各项功能和内容。注意不要把功能彼此鼓励,如果用户需要在不同功能之间进行导航,让他们先返回会比较麻烦

 

选择内容:

点击前进——通过选择类别、子类别然后选择内容前进得到相关内容,让用户沉浸在内容的主导航文章中,要注意用户需要明确自己在导航中的位置,才不会迷路

封面浏览——用户可以滚动查看预览内容,适合于让用户更深入探索视觉内容,但注意不要让用户必须经过漫长的滚动才能进入自己需要经常访问的内容

 

登录:

自动登录——需要登录才能查看个人信息但不需要过高安全级别的应用,需要保证一定安全等级

细节记忆——保罗用户的细节信息,例如邮件地址或用户名,但要注意不要在不必要的地方要求登录

识别码——用户不需要输入标准登录信息就能快速登录,存在安全要求但能够与特定设备相关联的应用

 

使用表单:

保存用户详情信息——使用登录方式保存用户信息可以大幅节省时间并降低开支

提供方便的键盘——根据填写的信息显示不同的键盘

进度栏——进度栏能告诉用户路径有多长,让用户有个预期,需要巧妙的运用可用空间

 

 

系列三:视觉设计

布局结构:均匀分布的垂直线条结构可以引导和安置内容,网格能够界定出控件是否均匀,从而更好的规划按钮标题图像的最佳位置

滚动及滑动空间:在用户浏览内容或滚动屏幕时,一定要保证他们不会执行意外的操作,或者激活不需要的对象

用户友好交互:视觉元素大小和位置的安排要保证使用的方便,并突出不同操作的重要性及相关关联

按钮点击区域:44-57/88-114px

能够得到看得见的控件:相关的交互对象应该能轻松用手指够得到,以方便用户更快捷地在彼此之间进行过度切换。为了提高讯息传递效率,使用视觉信息(视觉元素和图像)

垂直节奏:信息架构能够创建出一套合理的内容流,而通过视觉设计我们可以进一步在内容的视觉层级内实现更高的明晰度,制作合理优秀的垂直节奏感

颜色的使用:

表现基调或样式——颜色严重依赖于个人感觉和文化北京,通过色调和阴影有助于表现设计师脑中想给人的整体印象

区分不同板块——区分不同内容对象,显示对象之间的关联,或者支持内容结构

区分静态对象和互动功能——使用强烈的对比有助于传达出你想要表现出的区别或者不同内容及功能之间的联系

传达状态改变——表现信息通知和错误状态

使用象征:

支持潜在主题——对单一的设计元素进行延展,从而使其成为设计或功能的关键主题,快速向用户传达产品理念,同时奠定产品独特的定位

按钮和交互——模拟真实生活,让功能更加明确

图标——考虑有限的屏幕控件需要快速传递复杂概念,因此图标对于移动端非常重要,但设计一定是用户一看就懂

 

评论
热度 ( 4 )
  1.  ̄靑。 转载了此文字

©  ̄靑。 | Powered by LOFTER