标签 ‘设计’
-
探索移动Web网页编码设计
如果你正准备为你的网站制作一个移动设备版本，那这篇文章将会对你相当有用，在本文中，将探索移动Web网页编码设计的各种技巧和注意事项：
* 为了移动设备上的用户体验可以被接受，代码得怎么设计。
* “Mobile Web”与普通网站的不同之处？
* 可以让网站成功运行在移动设备和桌面浏览器上的基本技巧
* 一些Mobile Web设计中的建议和禁忌、以及大量资源Mobile Web和普通网站到底有何不同呢？
这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。
在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循 Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。
移动领域的竞争环境并不平衡在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、firefox（以及其他 Gecko内核浏览器）或者Safari（以及其他 Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。 但是，移动设备领域在这方面却是不同寻常的：
* 你拥有能为“Full Web”提供支持的浏览器，像iphone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。
* 你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像 Chtml或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。
* 最后，你拥有OperaMini， 以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会 把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90% 左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对 ajax/javascript某些方面将支持的不是很好 – 在这儿有更详细的解释。注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。
-
YUI3设计中的激进和妥协
相信每个前端工程师都有自己喜爱的 javascript框架，说情感也好，道信仰也罢，javascript框架带给人的不仅仅是便捷的开发，更有一种纯粹的逻辑美感，不管是jquery 曼妙的简洁，还是yui魔术般的沙箱，都使我们产生无穷的想象。然而，js框架却又必然无法做到面面俱到的完美无瑕，比如jquery在OO方面做出的让步，以及yui在性能上做的牺牲，无不给人传达一种缺憾美、一种理想的现实主义。今天，我们来看看yui3在框架设计中的这些牺牲和让步，以便让我们更加深刻的理解yui3的全貌，并将其优势发挥至最佳。
1，种子的一步到位 or 颗粒化
所谓种子一步到位是指只要在页面引入一个种子文件的script标签，比如prototype和jquery，只要引入一个prototype.js或 jquery.js就可以了，他们将各自对dom操作和event的封装等等都囊括进一个文件中，并尽力将其做到最小，这样做的好处是显而易见的，使用框架非常简单。然而yui将这些功能做了级别划分和颗粒化设计，从概念上抽象出来“核心”、“工具”和“组件”，每个小功能放在一个文件当中，需要的时候则要自行去引用，yui文档中给出的大量demo都采用这种方法，这种设计显然不像jquery那样对初学者友好，而且使用起来不够傻瓜，为了实现一个小功能，甚至要引入三四个js文件。yui这样做的原因有两个，一是yui实在太大，把所有功能都搞进一个文件中确实有点不靠谱，二是为其动态加载的框架设计做铺垫。2，手动引入 or 动态加载
往页面中写js的传统方法是，直接将js文件作为script标签路径写在页面中，使用yui也可以这样引入页面，但yui更推荐使用loader进行动态加载。动态加载脚本的渊源很复杂，目前来看主要原因有三，其一，页面中手写js标签无论如何都会占用一个http请求，即使这个请求是一个304，动态加载的文件缓存后则不必发起真实的http请求，其二，动态加载可以实现按需加载，而且可以根据js文件之间的依赖进行去重和排序，手写标签加载js文件则必须让开发者去额外关注一下文件的排序、重复等等，其三，动态加载有利于页面代码的语义化，这使得开发者只关心“需要什么”，而不用去在意“如何得到”。当项目变得越发臃肿，维护成本越来越高的时候，这中小技巧会有不小的好处的。 -
视觉注意力—解剖设计的根源
物质世界客观存在，而人的“视觉成像”是对当前世界的“唯心”重建。这种重建基于个人“经验”、“感知”和“集体意识”。最初科学家认为人类通过视觉被动获取周围世界的全部图像信息而建立个人的视觉资料库，近10年来的研究表明捕获“全部图像信息”只是个传说，其中由心理学家Daniel T. Levin 和Daniel J. Simons建立的实验“真实世界”客观说明一个事实：大脑利用眼球1/10秒的速度获取重要信息，而这些信息将服务于正在进行的核心任务。举个例子，你的大脑向眼球发出指令阅读这段文字，而让你忽略了文章右侧导航的其他信息。
左图为相机拍摄效果，右图为人类视觉关注效果
正因为有如此特性，研究“视觉注意力”变得尤为重要。如何让用户更容易发现我们的产品？如何让商家更有效的广告？如何让我们的网页和软件更容易触动用户，更有萌点？… 在深入问题之前先简单了解三个概念。
-
浅谈体验如何设计？
虽然我们摇旗呐喊了好久，连媒体都开始春心荡漾的鼓吹起“用户体验的竞争力”，各种设计类的工作招聘过程堂而皇之的走上了电视节目。实际上，我们的各个行业中对于“用户体验”的认识还是不够准确的，以下对话为真实经历，但不作为现象推广：客户：“听说现在要做产品都要重视用户体验呢~~”
某人：“恩~~”
客户：“我们的产品现在好像挺缺用户体验的。”
某人：“哦？”
客户：“请你帮我们设计一个体验吧！”
某人：“这~~~~”这个话题引起了我的注意，用户体验从逻辑上来说是一种用户端的反馈，进而造成的价值挖掘和再设计，那么在没有任何用户参与之初，我们是否也能设计出一种体验来满足“即将来到”或“正在关注”它的用户？这可能有点困难，比如：你开了一家理发店（现在一般叫XXX造型机构），用户来洗头，来的用户是个老鸟，洗头过程中发现店里没有准备热毛巾，他内心对你的店的评分就会降低，很多时候这种“内心的评分”构成了用户体验的绝大部分内容 — 实际情况是，如果你的店只收费10元，那么可能用户对于该项的评分就会忽略，因为他这时的定价尺度和评价标准因为价格的限制有所降低。
显而易见，用户体验即使是在同等维度的基础上，得到的结果和反馈仍然是动态的，所以体验的事情不是一个单一的决策过程，而是动态的设计过程，那么我们究竟能不能设计出一种体验？我想技术上是可行的，但收效得根据实施阶段的动态调整来决定。
1. 提出一种体验的目标
这个目标其实相当于你的产品的定位和策略，很多公司把“公司的定位”和“产品的定位”混为一谈，就造成了产品的本质空虚和弱化，因为我天朝大部分公司的定位都是空虚的，弱化的，比如：一个造拖鞋卖拖鞋的公司的定位是“国际化”，因为公司所在地和成本优势导致了外贸经营的便利性，顺道的它自然认为自己的产品应该“国际化”，不过说到底，卖拖鞋的怎么国际化？于是公司派出设计师参观一些XXX拖鞋设计展后，拍照留念 – 复制生产 – 低价倾销。
-
瞬间的设计(三)
三、不要打断任务流
用户在每选择一个操作时都希望当前的任务是连贯的。页面刷新会人为的造成用户体验——或者说用户心流的中断。
[在由harper pernnial 出版的《心流：最佳体验的心理学》一书中，把心流定义为：当人们进入一种全神贯注的状态时，他会感觉一切都是水到渠成，不费吹灰之力。]
1.三个重要的交互相应参数
Jakob Nielsen提出了关于交互的相应参数，这三个准则30年后的今天依然是不变的。[Miller 1968; Card et al. 1991]
0.1秒 是用户判断系统瞬时反应的时间，意味着在该时间内显示反馈结果用户是可以接受的。
1.0秒 是用户保持不间断的思维流的限定时间，即用户会注意到这样的延迟。如果没有特别的信息反馈该操作超过0.1而少于1秒，他们会比较难以忍受。
10 秒 是保持用户关注当前对话框的极限时间。对于长时间的延迟，用户会想在等待计算机完成期间处理其它事务。所以需要显示计算机将要完成的时间（通常选择进度条或百分比来表示），不然用户期待会大打折扣。
最近文章
- Axure RP 快速原型制作软件 – 线框图，原型，规格文档
- SEO优化—挖掘关键词3大秘诀！
- 建新网站要做的四个SEO优化
- 教你如何让google baidu收录网站最快最多
- CSS Overflow属性详解
- CSS网页布局中易犯的10个小错误
- 网站结构设计之关键词群布局
- 使用CSS为图片添加的五种特殊效果
- 网站改版时需要注意的六大问题
- 谷歌-短信最流行-2010虎年短信免费(收发)
最近评论
- 物流服务 在 当视觉设计师遇上产品经理、开发工程师 上的评论
- 小区 在 当视觉设计师遇上产品经理、开发工程师 上的评论
- 色播 在 当视觉设计师遇上产品经理、开发工程师 上的评论
- 问道推广员 在 当视觉设计师遇上产品经理、开发工程师 上的评论
- 电子产品 在 当视觉设计师遇上产品经理、开发工程师 上的评论
分类目录
- SEO (5)
- 互联网 (19)
- 免费模板 (1)
- CSS模板 (1)
- 前端技术 (25)
- CSS+HTML (16)
- JavaScript (1)
- Jquery (1)
- WAP (4)
- 用户体验设计(UED) (50)
- 紫枫生活 (10)
- 设计制作 (7)
- 设计杂谈 (35)
紫枫印迹
标签云
用户体验设计(UED)
紫枫友情收藏
