移动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

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

百度与Google直观比较,用实例说话

本文不比较百度和google的技术细节,只用实例说明两者的一些差异。
观点:

百度存在大量的数据遗漏
Google对于技术性博客贡献更大

ComingX一篇博文 扁平化设计的中文字体选择 ,该文发表于2013年10月5日,今天是2013年12月14日。我们来看看两个搜索引擎对此文的搜索情况。为了对比公平,我们选用同样的关键词“扁平化 中文字体”,这两个关键词也最能概括这篇博文的内容。下面我们来测试两个搜索引擎的结果:
百度
baidu_google_01
没有一条记录是关于这篇博文的,从第5条开始,已经不是这两个关键词同时匹配的记录了。我尝试往后翻了10页,仍然没有看到这篇博文。

Google
baidu_google_02
第一条便是这篇博文,这个结果甚至让我受宠若惊,因为知乎基本上也是同时满足这两个关键词,知乎的排序权重应该比ComingX博客要高。

我想尝试尽可能准确的输入这篇博文相关的所有关键词,因此在百度输入 “扁平化 中文字体 comingx” 的时候,出现了如下图
baidu_google_03

我确定这个结果不是因为“扁平化 中文字体”,而是因为“comingx”,因为当我在百度输入“comingx”的时候会有这样的结果:
baidu_google_04

当我完全输入这篇博文的标题“”进行检索时,仍然没有
baidu_google_07

我再展示一下cnzz提供的网站搜索引擎比例分析图
baidu_google_05

baidu_google_06

不管是从pv还是ip,哪个方面google都相对较优。

通过简单的比较,也许不能说明什么具体的技术问题,也不能说明Google与百度孰优孰劣,也许还有一些其他干扰因素我未曾考虑到。

基于Bootstrap的CMS模板-Bootstrap教程

bootstrap教程
Bootstrap提供了一套快速的Web前端开发框架,让你不用考虑浏览器的兼容性(ie6除外),轻松适应设备屏幕多样化,极大的提高了前端开发效率,非常适合企业建站使用。
为ComingX CMS制作了一套模板,提供给想学Bootstrap的同学。代码没有细心整理,如有不方便之处,见谅。

ComingX·创新工场俱乐部

comingx创新工场
当我把这两个Logo放在一起的时候,我有一种感觉,这种感觉同样存在于ComingX队员的心中。大学我们走到了一起,非你我所预料,却又如此自然。在感恩节的零点,我迫不及待地告诉各位ComingX队员和关心帮助过我们的朋友,ComingX创新工场俱乐部从今天开始,On the road。。。谢谢亲们。正如ComingX网站写下的一句话:“大学是一个创造梦想、实现梦想的地方,为了充实的今天、为了美好的明天,向着梦想灯塔行进的过程中,我们偶然走在了一起。”

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

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时,羽毛笔会有写字的动作,非常生动。

哈尔滨工业大学研招办网站作品上线

哈尔滨工业大学研招办
展示地址
设计 邢岩松
前端 佟双军
后端 刘博业 戴强
兼容ie6-10,Firefox,chrome,safari主流浏览器。

opmf博士论坛官网上线

全国博士生学生论坛
博士生学术论坛
UI:薛君
PHP:刘博业, 戴强
HTML:佟双军