Archive for the 'UI' Category

对于APP UE创新的一点想法

创新是建立在扎实的基础之上的,追逐体验创新的前提是掌握体验的基本规律。APP作为网页与桌面软件之间的一种存在形式,小尺寸的屏幕要求其有更优的体验,这往往误导很多UE偏执地追求创新体验。实际上,无论是iOS还是Android都有其基础的交互范式,相比创新,UE们更应该先了解这些基础范式。

那么,如果所有APP都按照基础范式来做,岂不是APP体验都一样了,没有新意了?确实是这样的,大量的app都将体验雷同。但是,我们再回忆一下桌面时代的软件,他们是不是也是体验雷同?再看看iOS内置的地图、AppStore、音乐、iTunes等等,它们是不是也体验雷同?反而,当我们遇到一个体验独树一帜的APP的时候,心里是不是带有一丝恐惧,害怕花费很多时间却不会用?

iOS的TabBar、Navigation Bar、Segmented Control等等,Android的ActionBar、TabHost、PopUpWindow等等,系统原生提供了大量的UI组件帮助APP实现通用的功能,而很多UE出于对程序的恐惧,对这些基础组件的适用范围、能力边界并不了解,设计APP体验时,随心所欲,这将形成两种结果:

  1. 体验设计非常棒,技术团队也很给力,工期和资金也很充足,那么这很可能是一个很棒的APP;
  2. 体验设计不合理,技术团队内心抗争着去实现神奇的设计,工期不断延误,上线后发现用户无心使用;

本文认为,UE应该尝试了解系统层面基础范式,增大创新体验阅历,在中规中矩的APP设计中寻找创新的可能。在产品环境中,整体结构尽量使用基础范式,局部发挥创新。对于UE的知识体系,应该不断向硬件、操作系统、心理学等多方面拓展。

如何做好ICON?

在网页中、APP中icon是一个辅助理解的可视化符号,为了适应各种不同的平台,有时候需要做各种尺寸的icon,例如安卓要求的drawable-xxxhdpi、drawable-hdpi等等不同规格,这部分工作可以归结为无脑力气活,当然也可以让工程师写程序自动生成。但是,以后有了更大分辨率的屏幕(例如Retina),又需要再做drawable-xxxxhdpi,那到底要加多少个x才是头?

本文旨在为寻找一个app和web开发中icon的设计、使用的范式。

不管是UI,还是程序员,都早已厌恶了这种生成不同尺寸icon的重复无趣的工作,于是,有偷懒的UI直接给出一个最大的尺寸,所有屏幕都用一个吧!不乏一些大公司也是这么做的。这很显然是一个不负责任的做法,大的icon会增加程序运行时的内存和下载时的带宽,大的icon在缩小时也会失真,常发生的就是圆圈不圆的问题。

那么,怎样做才能使得不同的屏幕都具有清晰的icon,又不用部署那么多重复的尺寸?
UI也许要问:为什么不直接用矢量icon?svg矢量格式是w3c标准推动的格式,但是,仍然有很多浏览器不支持svg,Android OS层面也不支持直接渲染svg。
UI二问:为什么文字可以随意缩放而那么清晰?That’s the point! 如果icon也能像文字一样设置一下字体大小,自己就可以缩放多好。于是乎,icon font来了。

几年前,随着扁平化风格的流行,在web领域就开始流行使用icon font来制作网页图标。代表有 Glyphicons,国内有阿里UE团队开放的 iconfont。但是在app领域,还没有普及开来,大部分的app,仍然使用不同尺寸的png作为icon。

icon font在web和app领域已经具备推广使用的条件,我们认为做好icon的步骤是:

  1. UI使用矢量工具绘制ICON
  2. 创作icon 字体文件,将制作的icon矢量svg文件上传到iconfont,制作字体文件后下载,也可使用FontCreator手动创建。
  3. 程序员使用icon font

本文旨在寻找一种范式,由于阿里iconfont已经讲述非常清楚,本文不再重复赘述,再给出一篇详细的iconfont创作过程

基于jQuery Mobile的手机网站案例-以哈工大研招办为例

jQuery Mobile 提供了极其便利的手机网站前端框架。案例地址 (请用手机访问)IMG_0206

IMG_0207

IMG_0208

适应性WEB设计-以哈工大研招办网站为例

适应性WEB设计要求设计师必须具有较高的技术素养,了解前端技术的可行性,甚至可以编写前端代码。案例地址

电脑
适应性布局案例教程

中等屏幕(Pad)
yzbresp2

手机屏幕
yzbresp3

适应性设计,在不同的屏幕尺寸下,布局会有不同,间距会有不同,字体大小会有不同,等等。设计师需要提供480px、800px、1024px、1366px、1920px至少五个尺寸的设计稿。

iOS的天气应用的沉浸性用户体验变化,扁平化中的拟物

第一张是老版本的天气,后面几张是新版本的,老版本使用图标表示天气,新版本使用全屏动画背景表示天气,显然后者在创造沉浸性用户体验上下足了功夫。使人瞬间进入到那种天气所带来的心情。在扁平化设计的大趋势下,这种拟物化的设计仍然以那种直观的视觉冲击力去感染你。
20140103-221203.jpg20140103-221310.jpg 继续阅读 [ iOS的天气应用的沉浸性用户体验变化,扁平化中的拟物 ]

移动Web前端框架jQuery Mobile、Bootstrap、jingle ui

jingle ui,jQuery mobile,bootstrap
微博、微信的热们,很多的内容通过手机分享,越来越多的用户通过手机点击链接进入目标页面,然而手机触屏交互与电脑鼠标的交互差异很大、手机与电脑屏幕的尺寸差异也很大,因此针对移动web的前端设计与开发愈发重要。

今天我们来简单了解一下这三个移动web的前端开发框架jQuery mobileBootstrapJingle UI

  • jQuery mobile 是jQuery针对移动web领域发力的开源产品,相信jQuery你应该有所了解了。虽然曾经的jQuery UI不温不火,但是jQuery mobile在移动web方面还是非常有前景的。相比较其他个框架来讲,jm是最为成熟、全面的。
  • Bootstrap 是twitter前端开发团队开源的一套框架,准确的说它并不是针对移动web的,与jQuery mobile不一样,它主要针对前端敏捷开发的,但是Bootstrap很好的解决了适应性布局的问题,使得基于Bootstrap的项目能够在移动平台显示友好,这种适应性布局在jQuery mobile中也有解决方案。Bootstrap并没有提供更多的移动平台的组件。
  • Jingle UI 是国内shixy 发布的托管在github的开源项目,具有较多的移动web组件,例如布局、按钮、列表、滚动条、表单、通知、弹窗、轮播、下拉加载、抽屉菜单、日历、如表组件。这些组件在jQuery mobile基本都有,相对来讲Jingle UI还年轻,用户体验还不是很流畅。

也许jQuery Mobile更加完善一点,技术支持相对更可靠,更专注于移动web;Bootstrap适合制作多平台的网站兼容布局;Jingle UI还年轻,可能更符合国人习惯。

QQ添加好友用户体验背后的思考

QQ添加好友用户体验
当有人添加我为好友的时候,我收到一个验证消息,同意之后将进入上面的界面,这时我们需要输入“备注名”并选择一个合适的分组。通常情况下,如果你留意的话,你会发现QQ为你预先处理了,很多时候他们能够直接帮你备注和分组,而且非常准确。这是为什么呢?

首先备注名

备注名从哪儿来,我们知道在qq添加好友的时候,输入验证消息的时候会有一个格式“我是……”,而“我是”后面的文字就是给对方作为备注名使用的。这个很简单的功能,背后没有什么高深技术,却帮助了我们很多。
这个设计来源于生活,通常我们跟某一个人打招呼,希望结识对方的时候,我们都会自我介绍,而自我介绍的时候往往会说“我是华为王磊”、“我是哈工大黄明”,通过这样一种习惯,提供一个模板,引导你进入模板。

分组

分组就没有备注名那么简单了。但是原理仍然来源于生活。假如A加B为好友,A与C为好友,C与B为好友,C在B的G分组中,那么A也应该在B的G分组中。进一步讲,如果AB共同好友很多,且分布在B的不同的分组中,如何处理?假设B有10个分组G1-G10,G1-G10都有AB的共同好友,那么有这样的算法:
1. 哪个组具有的共同好友最多,即为解
2. 哪个组与成员与B沟通最密切,聊天记录最多,即为解
声明这部分分析不是官方的实现思路,只是我的猜测。
通过这样的算法,QQ很容易帮你生成备注名和建议分组。这一用户体验的细节确实省去了用户很多时间。

让注册体验来得更简单点吧

我们期望用户能够注册登录,面对复杂的注册流程,很多用户被吓跑。我们能不能把注册设计得更傻瓜?
在注册用户时,通常需要采集的信息有:用户名、密码、验证码、手机号、邮箱、个人信息等。一个完整的注册功能应该考虑到以下几个问题:

  • 有用户名和密码(这不是废话吗,没有怎么登陆?)
  • 有找回密码的途径(例如忘记密码邮箱、手机号)
  • 验证码(防止恶意注册)
  • 用户协议

在设计注册功能时,通常是用户体验与信息采集量、安全性、费用三个方面的权衡,通常是相悖的。

  • 用户体验越好,信息采集量就越少,你不能同时采集一堆个人信息,又让用户具有良好的用户体验
  • 用户体验好,需要在密码设置这块尽量减少用户的输入。为了用户能够密码安全,通常需要两次确认密码、需要隐藏密码、甚至需要规定用户密码必须有数字、字母、字符,这显然增加用户的工作量。
  • 现在越来越多用手机号作为账号,而手机号可以通过短信发送密码,因此用户可以不用输入密码,直接由系统短信分发,每次发送短信都需要支付短信费用,这个开支还是比较高的。

下面我来分析一下用户名、密码和验证码的注册体验。

用户名

通常在用户名这块有这样几种方式:自定义用户名、手机号、邮箱三种。用户名要达到的目的是:简短易记忆、能找回密码。这三种方式各有利弊。自定义用户可以有一个易记的登录名,但必须配合邮箱来找回密码;邮箱便于找回密码,但是太长;手机号兼备两者有点,不算太长、方便记忆、便于找回密码,但是手机号属于隐私信息,用户通常不愿意公开,且仅支持大陆手机。
为了能够达到简短易记忆、能找回密码,又不伤害用户隐私,很多网站做了多种尝试:在手机注册时,强调不会泄露用户手机。或者将多种用户名整合起来,例如盛大通行证注册。

盛大通行证注册功能用户体验

密码

密码的设计要考虑这样几个因素:

  • 用户应该知道当前输入的什么密码,不能误输入
  • 密码应尽量安全,输入时不让他人看到

为了让用户不至于因为手误敲错字母从而设置错误密码,注册功能通常需要用户输入两次密码,表单提示用户两次密码是否一致,如图网易邮箱的注册。很显然这对于用户来讲更增加了用户输入错误的可能性,用户在设置密码的时候相对是比较谨慎的,心理存在一定的压力,容易出现手误,因此两次确认密码虽然能够保证结果,但却牺牲了用户的过程体验。

网易邮箱注册体验设计

那么,是否可以设计为只输入一次密码呢?如果只输入一次密码,又如何确定用户没有手误,而保证结果呢?
现在大量的网站开始采用单次输入密码的注册方式,如图盛大通行证、百度注册。

百度注册体验设计

shengdatongxingzheng1

对于这种情况,我们无法保证密码输入正确,因为每一个密码字符都是隐藏的,我们无法知道刚才我输入的什么字符。也许这么做可以让身边的人看不到我输入的密码。但是,对于无法盲打的用户来讲,他必须摊开双手,眼睛盯着键盘,一个键一个键的仔细输入,身边的人估计想看也能看出来了。也就是用户在录入其他个人信息的时候,密码不会始终显示吧,稍微具有一定的安全性。
虽然隐藏了密码是出于保护密码的安全性考虑,但是却并没有完全解决这个问题,反而让用户心惊胆战。如果密码真的输入错误了,我想只能通过邮箱或者手机号找回密码了。

那么,我们是否可以考虑显示密码呢?显示密码又如何保证密码不被身边人看到呢?我们看下是否可以这么尝试。
输入时显示密码,输入结束后失去焦点后,隐藏密码,如图:

注册体验设计

密码的直接显示确实不太安全,作为优化方案,可以把密码做成接近背景色且斜体显示,只适合近距离阅读,如图:

注册体验设计

第三种折中方案,采用切换显示和隐藏密码手动控制,默认隐藏,如图

注册体验设计

手机号无需密码注册

既然手机号可以收短信,那么我们就可以用手机号作为用户名,然后短信发送动态密码给用户,免去用户输入密码。如大众点评:

大众点评注册体验设计

这样做免去了用户输入密码的步骤,但是你必须每次登录时候发送动态密码,而且用户需要等待你发送,如果用户手机不在身边或者没电,恐怕就没法注册登录了。每次发送短信需要短信费用,这也是不小的一笔开支。

那么,如何解决这个问题呢?是否可以把这笔开支转到消费者身上?淘宝做到了,发送短信到一个号码完成注册,如图:

淘宝注册体验设计

但是要用户花钱,有多少人愿意这么做呢?

验证码

为了防止恶意注册,很多网站都设置了验证码,对于验证的设计体验不在本文的讨论范围,本文仅仅说明在注册功能中如何考虑验证码。恶意注册,通常是计算机程序注册,因此我们可以考虑初期注册不显示验证码,同一个ip多次注册时显示验证码。

总结

我们越来越关注用户体验,让用户尽量简单轻松,但是我们又要照顾用户账户的安全性,还要考虑费用问题,在体验、安全与费用上找到一个平衡,如果你找不到平衡,那就给他们提供一个选择吧。

流程或者教程类功能的用户体验设计

设计中经常遇到办一件事情需要很多流程,或者一个教程编写有很多步骤,应该如何设计呢?
通常这样的功能会包含以下几个要点:

  • 大纲目录,可以导航
  • 所有流程项内容
  • 当前所处流程项
  • 还有几个步骤可以结束

下面举例展示:
百度经验 示例网址
baidu_jingyan

taobao注册页面
taobaoreg

阿里云备案页面
aliyunbeian

QQ注册页面,此处并非流程化,我觉得这种思路也可以作为流程化设计的一种方法
qqzc

对于一个工作流,我们必须做到让用户知道一共有多少步骤、当前在哪一步、剩下多少步、是否可以回退。
大纲目录可以采用横向的,如淘宝、阿里云备案,也可以采用纵向的,如百度经验,整体来看,横向设计居多。横向空间有限,不适合多流程设计。

网页设计与前端正在发生的改变

Html5热潮已经渐渐平息,正如一场海啸袭击一个城市,在台风的蛊惑下,那么排山倒海,似乎一下子flash没有了、js神话了……
巨浪过后,海水慢慢淹没城市。而如今html5正在慢慢的涌向Web,逐步淹没传统网站、淹没Flash。随着移动用户的不断增长、各种家庭互联网设备的出现,Web设计正在走向一个变革。

这个变革突出的代表就是适应性设计(Responsive Web Design)。设备屏幕纷繁多样,大大小小、宽长不一,适应性设计成为一个必然趋势,而Bootstrap为你提供了有效的解决方案。我不得不感叹Twitter这个美国公司的分享精神,而我们却想方设法的将她置于墙外,这种行为我除了惭愧,还是惭愧。

Microsoft官网为例,请看三个分辨率下的网页表现:

microsoft_1microsoft_2响应式设计
desktop
pad
mobile

随着适应性的发展,我们必然期望网页图片元素能够无限缩放,因此,矢量icon正在袭来。html5 vector带给我们的不仅仅是矢量化的icon,当它与js结合的时候,你发现那就是天生一对,我们可以用js动态绘制icon,动态控制icon运动,形成更喜人的交互icon。
请看样例网页
vectoricon
当鼠标指向icon时,羽毛笔会有写字的动作,非常生动。