最近读了Steve Krug的《Don’t Make Me Think》,这本书对于Web和移动可用性设计有着很有趣的见解。对于其他可用性设计的书来说,这本书更加的浅显易懂。

 

一、Don't make me think!!!

        贯彻本书的一大定律就是:别让我思考!

        作为这个信息爆炸的社会的一员,我们已经失去了耐心去仔细浏览Web或移动端页面内容的习惯。“扫描”,变成了人们使用网络的方式。中国传统观念对于“不求甚解”多含贬义,然而对于如今的我们,不求甚解已经成为了常态,那么如何让用户得到最舒服的体验呢?那就是不要让用户动脑思考。

 

TAT.sheran 动态与富态
In 用户体验设计 on 2014年12月04日 by view: 13,210
4

一、动态:动画表达的设计应用

”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形:

1.1. 丰富内涵

先试试为这段产品介绍做设计:

  • Dropbox可让您将所有照片、文档和视频随身携带,并轻松进行共享。
  • 您可从您所有的电脑、iPhone、iPad以及网络访问保存在Dropbox的任何文件。
  • 有了Dropbox,您的一切重要记忆资料和工作内容皆触手可及!

首先来看看图片的呈现:

df1

故事说起在一个冰冷幽暗的夜晚上,我正思考的十分重要的人生问题,这周末该去那里happy好呢?是宅在家里好呢,或者宅在家里好呢,还是宅在家里好呢?这时,万年隐身的QQ竟然浮起浅色聊天框,我去!不得了,居然是女神主动联系我,女神一定是因为我俊朗的五官,185的模特身材而深深地迷恋上我了,呵呵呵呵呵呵。

TAT.sheran Web设计基础知识(三)
In Web开发,用户体验设计 on 2013年12月26日 by view: 10,028
2

序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:

1、What is design?
2、What to learn?
3、How to design?

总结起来就是:2W1H

由于文章篇幅较长,所以分成3篇来介绍,分别是:

Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)

/***************************接上文  《Web设计基础知识(二)》*****************************/

2) layOUT

1) Layout-布局四原则(principles

1、contrast对比

TAT.sheran Web设计基础知识(二)
In Web开发,用户体验设计 on 2013年12月26日 by view: 9,078
5

序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:

1、What is design?
2、What to learn?
3、How to design?

总结起来就是:2W1H

由于文章篇幅较长,所以分成3篇来介绍,分别是:

Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)

/****************************接上文  《Web设计基础知识(一)》**************************/

2、What to learn?

在做好设计之前,首先你需要学习一些基本的知识:Colors(颜色)  +  layOut(布局)

1) Color

TAT.sheran Web设计基础知识(一)
In Web开发,用户体验设计 on 2013年12月26日 by view: 9,475
4

序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:

1、What is design?
2、What to learn?
3、How to design?

总结起来就是:2W1H

由于文章篇幅较长,所以分成3篇来介绍,分别是:

Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)

/************************** 文章华丽开场*******************************/

你是否关注过浏览、点击图片这个微妙的过程,不同的图片展现、交互方式各带来什么样的观感?本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提升体验。

 

先看下PinterestFlickr等时下热门图片分享类网站。

Pinterest

用户实施了pin这一动作后,图片信息以board形式集合,每个board里的图片呈现规矩的网格布局,这种布局适合于有限集合的排列。

让我们停下想想,为了“分散”的注意力而采用了瀑布流式,那么究竟每张图片用多大尺寸合适,能够降低用户面对满屏图片时的不适感?不同尺寸图片如何排放?在移动端又需要采用什么布局?怎么解决多张图片加载的性能问题?这些问题留待思考。

Pinterest每张图的宽度是固定的,高度也可获取,这样在渲染页面的时候就可以先确定位置而不是等加载到图片资源。

 

译自:
A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App

原作者:Kyle leads
译者:  TAT.sheran

注:该文章大约3000字。它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案,用来优化你的网页运行速度。注意不是让你的站点运行的有多快,而是让你的用户感觉有多快。


A Beginner's Guide to Perceived Performance

当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是响应式设计还是自适应式,只要清楚你要做的样式,精心制作一个好看的站点就不是什么问题。

CSS3 UI Lib库是由腾讯AlloyTeam前端开发团队建立,主要收集国内外友好体验和创意的界面组件Demo。它除了使用CSS3技术外,还使用了HTML5JSJXjQuery等技术,来达到完美的外观表现以及交互体验。此项目自201110月份成立以来,经过团队一年多的整理和收集,已经趋于成熟。

  • CSS3 UI Lib库:Http://CSS3Lib.alloyteam.com

TAT.sheran iOS 平台特点
In Web 前端资讯,用户体验设计 on 2012年11月13日 by view: 8,996
1

ios 平台特点

使用iOS的设备拥有一些共性,这些特点会影响其程序的使用体验。与这些特性相适应的程序会更加成功,与设备一起为用户提供超凡的使用体验。

无论尺寸如何,屏幕都是最重要的

        iOS设备的屏幕是用户体验的核心。用户不仅在上面浏览优美的文字、图片和视频,还要和多点触摸屏进行交互(即使有时候用户甚至看不到屏幕)。