Hybrid 架构下的 H5 应用加速方案

2014年3月31日 没有评论

在移动 App 开发领域,主流的开发模式可分为 Native、Hybrid、WebApp 三种方式。然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立 App 转投 Native 阵营。但是开发者对 WebApp 更新速度快,跨平台优势的渴望却并未减弱,最终的结果是促成了 Hybrid App 在 2013 年数量的激增,并且增长的速率非常之快。 简单的说,Hybrid App是 Native App 和 Mobile Web 二者混合开发的产物,HTML5  的页面被嵌入到 Natvie App 的 webview 中。因此它综合了更新速度快,交互体验好,跨平台等优点。

本文分享的就是 HTML5 页面(尤其是被嵌入的 H5 应用) 借助 Hybrid 架构来提升自己的加载速度和性能的一种解决方案。该方案要求你对 Hybrid App 进行以下三步骤的改造:

一:模块化你的 H5 页面/应用,引入模块加载器(可选)

模块加载器不必多说,SeaJS、requireJS、kissy loader 等耳熟能详,任你挑选。使用模块化的方式来开发你的应用,不仅仅将有利于后期的代码维护,在 Hrbrid 的架构中,还将会有利于性能的提升。

或许你有疑问:模块开发粒度越细化,加载时请求的JS、CSS等静态资源的数量越多,页面的性能不会越差吗?我的回答是:如果你仅仅是使用了模块加载器并异步加载各个模块,那么加载的性能一定很差,因为请求的数量太多。当然你肯定会想到在发布前打包合并静态资源,那么对这样的解决方案我只能给到 50 分,因为被打包合并的文件中只要有一个子文件发生变化,那么整个文件(JS或CSS)都要被重新下载,对移动带宽而言还是个负担。

怎么破?请继续进行步骤二:

二:启用 AppCache ,并引入增量更新机制

        做过 WebApp 的同学应该会了解 mainfest 文件,Html5提供的应用缓存功能,开发者只要把需被缓存的静态资源文件名罗列在这个列表中即可保证二次访问时无需重新加载。看起来不错!这样前面说的模块化开发造成的请求数量过多的问题,至少在二次访问时不会再发生了。嗯,这样的方案可以给到 70 分吧。其实,Html5 提供的 mainfest 缓存机制有个比较大的问题(兼容性就先不提了):如果 mainfest 列表中的一个资源文件需要更新,那么整个 mainfest 中的其它文件也都需要被重新下载一遍。 也即是说二次访问没有问题了,但是 Html5 应用更新时还是会出现全量下载的问题。

        别忘了,我们是 Hybrid App,还可以充分利用 Native 层的强大能力,所以抛弃mainfest吧,让 Native 来帮助 Html5 应用缓存静态资源文件。总体思路是:

1、Html5 应用首次启动时,调用 Native 提供的加载资源文件专用的 Device API 来请求所需的资源文件,由 Native 层发出真正的资源请求,并将请求结果缓存在手机的SD卡上。当然,这里完全可以优化为一次 zip 包请求,因为 native 能够提供强大的解压能力。

2、H5 应用再次启动时,所有的静态资源都是通过 Device API 读取本地缓存,无需再走网络。

3、H5 应用出现静态资源更新时,在应用启动时首先通过 Device API 加载需要更新的文件,并更新本地缓存,其它未变更文件继续走缓存。

 

        流程看起来挺顺,其中有几个关键问题需要解决:

 1、如何通过 Device API 加载资源文件?

这里使用模块加载器的优势就体现出来了,只需要在加载器中做点小修改,不直接走Http请求了,而直接调用 Native 提供的文件加载 DeviceAPI 即可。 如果你没有模块加载器,就需要写统一的函数来做加载资源的功能了。

其实 Native 也提供了拦截机制,能够拦截到 H5 应用发出的所有 Http 请求并进行自定义处理,可惜这样好的功能在 Andorid 4.0 以下版本不支持。 故现阶段还是主动调用 Device API 更靠谱。

 2、何时需要进行静态资源的更新

            每次静态资源发布都会产生一个唯一的发布时间戳(或是所有资源内容的MD5编码),H5应用启动后,可将当前时间戳保存下来,等应用下次启动时,请求最新的发布时间戳并与本地时间戳进行对比,若不同,则首先进行静态资源的增量更新。

 3、如何判断哪些是需要被增量更新替代的静态资源文件?

这个问题的回答会比较复杂些,核心思路是通过对前后两次资源文件(js、css、image等)发布的内容对比完成:

如此,H5 应用借助 Native 应用的能力完成了资源的缓存与增量更新,可以保证 H5 应用在启动与更新时的加载速度。当然也有方案借助 HTML5 的 localstorage 来替代 Native 的缓存更新策略,但是可能会受到两处限制:

1、若 Hybrid App 比较复杂,涉及多个子域甚至主域间的静态资源共享,则 localstorage 的方案首先要解决跨域访问的问题,并且在每个子域存储空间上存在上限,是 5M。

2、Native 能够支持更新包的 zip 打包下载,一次请求,然后解压并更新本地缓存。而 localstorage 无法实现。

若应用中以上两点不是问题,则使用 localstorage 缓存的策略完全 OK。

 

三:启用 spdy 协议

spdy 协议在移动开发上大有可为,它是HTTP协议的增强版本,能够通过一次TCP链接同时请求到多个资源文件,请求速度上的提升那是自然的了,非常强大!chrome 等 webkit 内核浏览器都已经支持。 可惜若是借助浏览器自身使用 spdy 协议则要求静态资源服务(js、css、image)必须是 https 的域名服务,且后台server 能支持spdy协议。相信大多数静态服务器都还是http 服务,是无法通过浏览器来直接支持的。

还是那句话,因为我们是 hybrid 应用,可以发挥native的优势! native 层完全可以实现基于 spdy 协议请求的 device API,供 H5 应用(JS)来调用。这样就不需要 https 域名服务器也能使用 spdy了。

如果你的 Hybrid 应用已经支持了 spdy 协议,那么你可以考虑不再需要把增量更新的资源文件打包成 zip 下载了,直接 spdy 协议并行下载即可!

 

SPDY 与 HTTP 协议速度对比:

总结:

本文提供了一种基于 Hybrid 架构的 H5 应用加载性能优化方案,如有疑问及建议,欢迎探讨在我的博客中探讨。

前端工程师杭州首次线下聚会活动圆满结束

2014年3月31日 没有评论

2014年2月22日下午1:30,1688技术部在滨江园区举办了杭州前端下线聚会交流活动。

聚会共分为《前端无线开发实践》、《用户行为采集、大数据》、《NodeJS 的实践及应用》,《前端集成开发环境》等四个开放式的分组主题讨论,

每个分组先由阿里前端同学介绍相关主题及开发经验,参与同学积极发表自己对分享的看法和平时的工作经验,起到共同交流的作用。分组讨论结束后,分组成员自由交换分组,继续讨论感兴趣的话题。

活动中还由阿里前端同学进行技术演示:PSD2HTML,Lofty前端基础框架,服务端的AMD加载器,积木盒子。

本次聚会共到场40余位同学,还有3位对前端开发感兴趣的后台同学,收到20份反馈表。摘录部分反馈:

  1. 收获很多,会议流程很合理,建议举办多次这样的会议
  2. 前端的集成开发环境,解决了前端人员的实际问题,提高了开发效率。
  3. 非常好,但第二阶段的主题不明确
  4. 认识很多人,初步认识了前端得开发过程和关注的重点,建议下次有一个前沿的热点

一位厂外前端童鞋(申若亮)对聚会过程的详细记录《阿里前端聚会记录

从收到的反馈意见来看,大部分与会小伙伴觉得本次聚会交流对其自身有帮助,肯定了本次交流的意义。但由于我们是第一次举办此类线下活动,

活动还有很多不足点,也是同学们提到的,需要在以后举办活动时注意:交流的主题可以少而精,能引发参与同学的更多讨论,提高互动气氛等等。

 

活动图片回顾:

2014-02-26 11_03_43-1688技术部-杭州前端线下聚会活动总结 - 邮件 (HTML)

2014-02-26 11_04_23-1688技术部-杭州前端线下聚会活动总结 - 邮件 (HTML)

2014-02-26 11_04_09-1688技术部-杭州前端线下聚会活动总结 - 邮件 (HTML)

2014-02-26 11_03_57-1688技术部-杭州前端线下聚会活动总结 - 邮件 (HTML)

2014-02-26 11_04_33-1688技术部-杭州前端线下聚会活动总结 - 邮件 (HTML)

 

因为有各位小伙伴的参与,这次活动很精彩,非常感谢各位!

 

[思路分享]服装服饰行业市场重构

2014年3月31日 没有评论

 
 

 

 
 

基于用户尺度评价的人物角色分类方法与实践

2014年3月31日 没有评论

人物角色可以从很多维度来划分,例如用户目标、用户场景、用户行为、体验周期、用户价值、……,根据实际情况,人物角色可能按一个维度划分,或结合多个维度进行划分。

为设计服务的人物角色,用户目标是人物角色划分中最重要,也是必不可少的一个维度。

对于资讯/信息型的分析对象,对资讯/信息的关注度能够很好地体现用户的使用目标。

本文以1688网站用户对供应商信息关注度的问卷调查案例为基础,来介绍基于用户尺度评价的人物角色分类方法,主要分为以下几个过程:

 

1 获得尺度评价结果

1.1调研目标

通过了解用户对供应商不同信息的关注度,为产品详情页面供应商信息的组织与呈现提供设计参考与依据。

1.2调研内容

根据目前供应商信息中所展示的内容,以及公司档案中的相关信息,结合以往相关调研结果,总共进行17项供应商信息的关注度调研(详见因子分析结果列表,因子分析结果列表中只列出了16项,根据因子分析理论,“保障”没有纳入到最终的因子分析中去)。

1.3评价尺度

用户对供应商信息关注度的评价尺度分成为5级,分别为:

1-不关注、2-说不清、3-有点关注、4-比较关注、5-非常关注。

1.4调研样本

本次问卷调查在1688网站产品详情页面投放,经过筛选后得到有效样本3032份。

 

2. 获得评价尺度因子

2.1 项目分析

对17个供应商信息分别进行项目分析,结果都为显著性,表明17个供应商信息适合进行用户关注度评价。

(项目分析:将每个样本对17个供应商信息的关注度总分进行排序,将关注度总分最低的27%样本作为低分组,将关注度总分最高的27%样本作为高分组。低分组与高分组在17个供应商信息的关注度评分分别进行独立样本T检验,来判断高低分组的评价是否存在非常显著差异。如果独立样本T检验显著,则说明此供应商信息适合进行用户评价。)

2.2 信度检验

使用Cronbach’s Alpha进行信度检验,Alpha系数为0.906。删除“所在地”时,Alpha系数变为0.909,可考虑删除。

但认为“所在地”还是有必要保留的,以及根据最终因子分析结果的实际意义,“所在地”还是保留在因子分析中。

 2.3 因子分析

2.3.1显著性检验

最终因子分析结果的适度性KMO值0.905,Bartlett球形检验近似卡方值26152.146(df=120,p值=.000),非常适合进行因子分析(初始的KMO值、Bartlett球形检验都为显著性)。

2.3.2因子分析结果

由于“保障”这个供应商信息在主因子上的荷重=0.482,同时对客户满意度、供应通力上的荷重分别为0.452、0.326,“保障”这个供应商信息从因子分析中剔除。

综合考虑指标聚类分析、因子特征值与因子的实际意义,将用户评价尺度分成4个因子,解释率达到64.356%,效果较好。

归纳后4个评价尺度因子分别为基本信息、客户满意度、供应能力、交易历史,也就是说用户在查看供应商信息时,从这4个维度来了解供应商。

 

 3. 获得评价尺度因子得分

因子分析可以直接获得标准化的因子得分,但我们日常接触到的是更直观的非标准化用户尺度评价得分,在样本聚类分析结果解读时,结果也更直观。所以要使用基于用户尺度评价的非标准化因子得分进行样本聚类分析。

非标准化因子得分计算过程如下:

  • step1:用因子得分系数(Factor Score Coefficient)基于标准化的原始影响力系数X(i),X(i)代表第i个供应商信息对主因子的得分系数。
  • Step2:基于标准化原始影响力系数的非标准化还原,X(i)*d(i),d(i)代表第i个供应商信息的标准差。
  • Step3:归1处理。同一指标集(不同一级指标为一个指标集、某个一级指标下的不同二级指标为一个指标集)下不同指标的权重之和为1。影响力系数归1处理公式如下:

 W(i)=X(i)* d(i)/(X(1)* d(1)+X(2)* d(2) +……+X(n)* d(n))

 W(i)代表归1处理后权重,X(i)代表第i个供应商信息对主因子得分系数,d(i)代表第i个供应商信息标准差。

  • Step4:计算非标准化的因子得分,公式如下:

F(j)= W(j1)*f(j1)+ W(j2)*f(j2)+ …… + W(jn)*f(jn)

F(j)代表第j个因子的非标准化因子得分,f(jn)代表第j个因子下第n个供应商信息的评分。

 

4. 获得人物角色分类

4.1样本聚类

使用聚类分析的Twostep Cluster方法,根据4个评价尺度因子对样本进行聚类分析。将3032名调研样本分成3类,分别占42.5%、41.9%、15.7%。

计算这3类样本在评价尺度因子得分可以发现:

  • 第1类用户:对基本信息、客户满意度、供应能力、交易历史都非常关注
  • 第2类用户:对用户满意度非常关注,对基本信息、供应能力、交易历史比较关注
  • 第3类用户:对基本信息、客户满意度、供应能力、交易历史都很少关注。

 

5 总结与应用

  • 用户评价尺度因子

对于供应商信息,用户从4个维度进行关注,分别为基本信息、客户满意度、供应能力、交易历史。

在页面内容布局时,相近的内容(关联性强)要放在一起。目前1688网站产品详情页面上的信息商信息的布局与用户关注维度存在较多不一致的地方。将关联性的供应商信息放在一起,用户先查看了一个维度的供应商信息后,再查看另一个维度的供应商信息,增强用户浏览有序性,从而提升供应商信息内容的易读性。

  • 人物角色分类

对于供应商信息的关注,有3类典型角色,分别为:

第1类用户(占42.5%):对基本信息、客户满意度、供应能力、交易历史都非常关注

第2类用户(占41.9%):对用户满意度非常关注,对基本信息、供应能力、交易历史比较关注

第3类用户(占15.7%):对基本信息、客户满意度、供应能力、交易历史都很少关注。

有了这样的人物角色划分,在设计时,可以知道核心用户、非核心用户是如何关注供应商信息及其重要度,也可以进行定性研究探索不同用户群对供应商信息存在差异的根本原因是什么,为设计提供决策依据。

  • 用户评价尺度因子、人物角色分类为供应商信息区块内容的优化提供一些有价值的依据,在实际设计优化中,还有综合考虑不同信息本身的重要性、其它调研结果,以及商业角度上的考量。
  • 基于用户尺度评价的人物角色只是角色划分的一个关键维度,要创建完整的人物角色,还需要加入其它更丰富的属性和内容。
  • 对于用户评价尺度,本次调研使用了关注度,根据调研对象的不同,用户评价尺度也可以是满意度、重要性、符合程度等。

 

百度MUX 2014年招聘— “就差你了!”

百度MUX 2014年招聘启动— “来吧,就差你了!”





视觉设计师 | 交互设计师 | 互动设计师 | 用户研究工程师

工作职责:

1. 负责参与产品(网页、手持方向)的前期视觉用户研究、设计流行趋势分析,主导设定产品的整体视觉风格,拆分设计工作量,时间安排;并跟进开发落地产品 2. 负责日常的运营活动及功能维护提供美术支持,并能够形成产品独特的具有传播力的运营设计风格。 3. 负责参与设计体验、流程的制定和规范 4. 负责分享设计经验、推动提高团队的设计能力

职位要求:

1. 本科及以上学历,美术、设计或相关专业本科以上学历 2. 从事设计行业工作3年以上,对工具型网站的设计有丰富经验,有成功案例案例者优先 3. 具有深厚的设计理论与娴熟的设计技巧,善于捕捉流行趋势,并能推动团队的设计能力 4. 热爱设计,拥有宽广的行业视野与时尚的审美标准(对平面设计、界面设计、网页设计、图标设计、符号设计、品牌设计、手持界面设计等都有了解甚至熟知) 5. 精通Photoshop、Illustartor、Flash等设计工具,了解flash(Actionscript)动画设计的优先 6. 具备良好合作态度及团队精神,并富有工作激情、创新欲望和责任感,能承受高强度的工作压力

投递简历须附上近期作品或链接 发邮件至:(邮件标题请注明“应聘视觉设计师”,附件在6M以内)

mux@baidu.com

工作职责:

1. 负责百度移动云事业部相关产品的交互设计工作 2. 参与到产品的规划和创意过程中,分析业务需求,并加以归纳、分解出交互需求 3. 设计产品的人机交互界面结构、用户操作流程等,完成界面的信息架构、流程设计和原型设计,提高产品的易用性 4. 编写界面交互设计说明书及交互设计标准规范和交互元件库,并对标准规范及元件库进行维护 5. 配合视觉设计师完成产品视觉设计,并协同前端及开发团队实现交互效果 6. 组织或参与用户访谈,配合用研人员进行可用性测试 7. 研究用户行为和使用场景,优化现有产品的设计缺陷并提出优化解决方案 8. 参与竞品研究,用户反馈和数据分析,进行产品可用性和易用性测试和评估 9. 分享设计经验,沉淀设计方法,总结设计思想,与团队共成长

职位要求:

1. 对行业内产品和应用有深入体验经验和理解、见解,对行业内产品和应用保持高度热情 2. 熟悉UED方法和工作流程;对交互设计有较深的理解和实践,可以独立完成整个设计过程(对流程图、线框图等到交互设计方法能熟练应用) 3. 能够独立负责多个产品或整个产品线,在产品规划、策略等方面有效推动交互设计思路 4. 能够积极参与研究过程,能够将调研结论有效转化为交互设计方案,发现并提出交互设计中的调研需求 5. 对产品有整体规划和梳理产品信息架构的能力,善于梳理各种因素之间的关系 6. 了解手机等移动客户端的交互设计和表现方法 7. 熟悉研究方法论,熟悉一般研究步骤,了解各种研究方法,有一定的统计和数据分析基础 8. 有1年以上交互设计经验,工业设计、计算机、心理学、平面设计、广告设计等相关专业,本科以上学历 9. 熟练掌握专业的设计和原型开发工具,如Photoshop,Illustrator,Axure,Visio等

投递简历须附上近期作品或链接 发邮件至:(邮件标题请注明“应聘交互设计师”,附件在6M以内)

mux@baidu.com

工作职责:

1. 负责百度移动产品的线上线下推广、活动、产品创意设计相关工作 2. 参与产品品牌建立与相关视觉体系规范建设

职位要求:

1. 具备扎实的美术功底,优秀的视觉表达执行能力 2. 对互联网广告行业有一定的了解,对互动设计的流行趋势有灵敏的触觉和领悟能力,对潮流信息敏感 3. 熟练使用Photoshop、Illustrator、flash等软件,具备较好的手绘能力 4. 具备Flash或AE动画广告的设计和制作,擅长把创意概念转化为有视觉冲击力的互动作品 5. 具备一定的创意文案能力 6. 具有良好的团队合作,项目沟通能力 7. 极富创新精神,构思新颖,创意独特,对待设计永葆激情 8. 具备3年以上相关专业经验

投递简历须附上近期作品或链接 发邮件至:(邮件标题请注明“应聘互动设计师”,附件在6M以内)

mux@baidu.com

工作职责:

1. 负责百度移动相关产品的用户研究工作,能够根据产品发展方向及需求合理规划该产品线的用户研究计划并推动实施,通过用户研究帮助相关team提升产品用户体验和用户粘性 2. 与PM、RD、设计师等沟通项目需求,合理选择研究方法,通过严谨、客观的研究设计和高质量的项目实施保证研究质量,并通过逻辑严密的数据分析得出合乎逻辑的研究结论 3. 思路清晰,有较强的沟通表达能力,能够清晰的将研究发现传达给相关部门,具备跨团队的协作能力和推动能力,能有效帮助用户研究成果的转化,在公司内提升用户研究结果的有效性和影响力 4. 指导资浅人员的研究工作,提升团队研究能力

职位要求:

1. 心理学、社会学、工业设计、可用性等相关专业背景;三年以上用户研究经验。 2. 熟练使用SPSS、Excel等工具进行数据库管理和基础分析;熟练使用PPT、Word、Excel等常用办公工具。 3. 熟练掌握多种用户常用研究方法,能独立负责用户观察、深度访谈、焦点小组、定量问卷调研等工作;能独立进行科学、严谨的实验设计并实施。 4. 主动性强、善于学习各种知识,善于总结项目中的经验教训并乐于与团队成员分享。 5. 热爱用户研究工作;有敏锐的数据洞察和分析能力;能承受较高程度的工作压力。 6. 有互联网行业从业经验或移动互联产品研究经验者优先。 7. 有用户行为数据分析经验者优先。 8. 有团队管理或新人指导经验者优先。 9. 视野广阔,乐于尝试各种互联网应用者优先。

投递简历须附上近期作品或链接 发邮件至:(邮件标题请注明“应聘用户研究工程师”,附件在6M以内)

mux@baidu.com

设计的骨骼(一)


在我们的生活中,设计无处不在,比如地铁里的大广告牌,橱窗里摆放的衣服,高楼大厦的LED展位,甚至手机里的某个应用界面等,通常在大家眼里,好的设计就是即有创意又大胆,并没有什么规律可循,但其实设计和绘画不同的在于,绘画可以展露个性,而设计的核心却是体现秩序的美感,它不是来自个人,而是来自于社会,好比建筑群的设计构成,不只是一个华丽的皮囊,而是有血有肉的,它的骨骼就是设计的根本。每个设计抽象出来都是一些元素的构成。


康定斯基曾经在《点线面》的一书中,将艺术的形式归结为三种元素之间的构成关系。
“依赖于对艺术单个的精神考察,这种元素分析师通向作品内在律动的桥梁 。”——瓦西里·康定斯基(Wassily  Kandinsky )《 点、线、面》
每个设计师总有一点职业病,有时候会被满屏的信息淹没,有时候会为一个像素的间距而纠结,但只需静下心来,从设计的根本出发,不看那些装饰和颜色还有材质,只从平面构成出发重新解构你的设计,也许会有不一样的启发和看到那一点点瑕疵所在。

我们先回顾一下平面设计中的点,线,面各自的特点


一.点的运用

在几何学的意义上点是可见的最小形式单元,是位置的表示形式。无所谓方向、大小、形状。但所为设计构成的点与几何中的点是不同的。只有当它与周围要素进行对比时才可知这个具有具体面积形象是否可以称之为“点”。
康定斯基认为从内在性的角度来看,点是最简洁的形态。


举个例子,下面的网站是一个日本传统的24节气网站,站点设计也非常的传统,用非常简约的线条和少量的元素组合成了一种空灵的美感。



看起来都是文字和线条的交接,看起来并没有所谓的点的组成,但实际上一些文字在视觉里起到了点的作用,如下图所示,右侧标题作为视觉中心,紧密的排列起来的文字形成了一个矩形视觉焦点,而左侧的小文起到平衡视觉的作用。


网站地址:http://www.iseokagenosato.jp/kotonohagusa/

1.不同形状的点往往给人以不同的视觉心理感受


圆形,平稳,在感情上是饱满的,浑厚有力量的。
方形,除了平稳外有端庄,大方感,在感情上是踏实的,可依靠的。
三角形或菱形:菱角分明,且有指向性,在感情上是偏倚的,有目的性的。菱形比三角形对称,在平衡中寻求个性。其他不规则的图形,显得富有自己的个性,是独立的,张扬的。在规则的图形里变得非常明显。往往用于丰富画面。



居中:平静,稳定,集中感
居上:不稳定感
居下:画面有沉淀,安静的感觉,但是不容易被人发现。
在页面三分之二靠上时:吸引人注意往往是视觉的焦点。


还是举日本节气网站这个例子,进入某个节气后首先映入眼帘的是正中央的节气信息,第一时间让用户看到最想知道的内容,正中央圆角矩形的设计,隐喻传统印章,安静且舒适。而内容相对而言在视线的偏上方从纯色背景到高清大图设的背景设计上非常有层次感也不会觉得枯燥。





3.当画面中有不同大小的点时,大的点是焦点。而点不同的排列方式也会产生不同的视觉心理感受

当一个画面中有很多零散的点分布时,用户的视线会来回游移,而设计的目的就是如何让他们在不规则中不显得凌乱。





例如这个站点画面里有三个较大的点,大的点往往吸引人的注意,并且这三个点形成了一个视觉上的三角形,相对来说是比较稳定的。三角形的位置在页面的三分之二靠上,正好在视觉焦点的位置。也说明了当你的视觉元素非常多时,把想要突出的内容放在偏上或者居中的位置,才容易被识别。

二.线的运用

如果说点是静止的,那么线,就是点运动的轨迹。游离于点和形之间,它具有位置、长度、宽度、方向、形状和性格等属性。
不同的线有不同的感情性格,线有很强的心理暗示作用。
直线好比男性,刚强有力量,曲线好比女性,柔和并且性感。
不同方向的线条和不同的排列方式也对用户起了不同的引导作用





如上面所示左图是瑞士航空公司的海报设计,不同方向的蜿蜒的公路线条性感的交织在一起,使得画面非常丰富。
中图是一个电影海报,曲线的指向型引导用户的视觉,这就是点和线的区分,线是带有方向性的,有粗细的变化。
右图是一张获得红点大奖的呼吁节电的海报,画面中简洁的直线并带有向下的方向感,即能引起关灯的共鸣也能将不插电这种概念表达出来。
线还有分割画面的作用,线有连贯性,画面因为它的分割而变得生动有趣,对于阅读顺序有着决定性的作用。


再如下图的网页用中央的一根直线将页面划分为左右文字信息和数据可视化的两个部分。





再如下图版式设计中的曲线运用,贯穿整个页面,打破了整齐的文字排版,打破了乏味的基调。


三.面的运用

面是线的移动至终结而形成的,面有长度、宽度,没有厚度。
面的形态是多种多样的,不同的形态的面,在视觉上表现不同的情感。
直线形的面具有直线所表现的心理特征,有安定、秩序感,男性的性格。
曲线形的面具有柔软、轻松、饱满、女性的象征。
不规则的面如:水和油墨,混合墨洒产生的偶然形等,比较自然生动,有人情味。





第一张图的电影海报中用三角形的面来切割画面,视觉上非常有秩序感且稳定。
用大的几何图形来做设计能把视觉集中到图形上,是切割画面内容最好的方式。
第二张图中的不规则的面切割画面让页面整体比较活泼可爱,和画面的品牌牛奶的气质非常吻合,这样的不规则元素被穿插在整个画面中。

更多内容请继续阅读设计的骨骼(二)


转载请注明出自"百度MUX"

移动应用“快”体验设计方法

产品的“快体验”是指从用户使用产品某项功能过程中自然流畅的过程。在产品使用流程中体现在多个层面,如下载快、加载快、反馈快等。当任何一个环节出现了卡顿、停滞,让用户进入漫长的等待时,都会带给用户焦急、烦躁的感受,以至于终止当前的操作,或直接弃用产品。因此,“快”是良好的产品体验核心因素之一。
“快体验”有多重因素组成,包括外部环境的网络速度,产品本身的技术能力,交互策略制定,快体验的感知设计等。我们分解用户一个事件的操作过程(发出操作指令前、执行过程、结果呈现),并针对每个环节总结的几个方法。



一、发出操作指令前提前加载数据

提前加载数据是在预测用户即将发出操作指令前,后台预先缓存到本地数据内容,待用户操作时,内容直接呈现。在正常的网络状态和用户操作频率前提下,用户几乎不用任何等待内容加载的时间。该策略适用于纵向浏览的信息流,比喻微博、朋友圈、应用市场的应用列表等。根据所加载内容数据量的大小,可决定是否仅在在wifi网络环境下执行该策略,同时只对文本数据做提前加载。

新版的百度手机助手在应用列表的浏览操作时,就运用了该策略。当用户前天浏览内容不足10条时,后台自动加载更多。该策略极大的提高了用户的浏览效率。

二、执行过程中,根据操作类型的不同有多种方法

1、预载默认框架

预载默认框架是用户发出操作指令后,在数据尚未返回之前,页面反馈一个默认数据的页面布局。等到内容返回后,填充到已显示的默认框架内。该设计能在用户操作指令发出后,给与很快速的页面反馈,同时为用制造一个“快速”的假象。
一起来分析百度手机助手详情页的加载设计。当用户点击某个应用进入详情页后,直接展现该页面的首屏的全部默认布局,当数据加载完毕时填充到默认框架,给用户感受到只是内容显示的转场动画,避免了视觉转场,提高了“快”的感知。

2、保持积极响应

移动应用操作场景中,不可避免的会出现网络状态不佳的情况,此时就需要用户耐心的等待。在等待过程中,首先需要呈现活动的载入状态,以告诉用户依然在努力加载,同时,积极活跃的动画也会加强用户对快速的感知,掩盖总体缓慢的现实。
在应用市场的下载管理中,就运用了该设计,当下载某个应用遇到网络很慢时,总进度进展缓慢甚至停止,但循环游动的光标依然保持积极的响应,给用户感知后台依然在进行高速的下载工作。


3、结果提前呈现

用户发出指令后,用户界面上迅速反馈操作结果,而实际数据由后台处理。如浏览器产品常用的页面载入进度反馈。通常用户打开新页面后,页面加载进度条先是迅速的游走到某个预定的位置,给与用户页面加载迅速的感受。而实际进度却在追赶页面进度条。再比如,微信的朋友圈中,当用户上传一张新的图片,点击发布后,该图片通过动画从发布器跳转到浏览的信息流中。在用户看来,已经发布成功,而后台依然在上传过程中。

4、转移焦虑情绪

相信大家在使用应用中最反感的就是漫长的等待,他会让你心情变坏,会影响你的情绪。此时需要让用户关注的焦点从等待转移到一个趣味的画面或一句简短的文案中,从而缩短用户的心理等待时间,使等待没有那么漫长。
百度云和百度手机助手在页面加载时,都引入该设计方法。一只可爱的“小黄鸟”,一个正在跑步的“百变袋”都会让用户在等待的情绪中剥离出来,转移注意啦,为用户等待的的耐性争取了时间。“想去”客户端在加载更多的等待设计,“被鲸鱼追赶的小鱼”更是出彩,让我不得不希望网速慢下来,多欣赏一会这个设计。


三、结果呈现给予正向鼓励

以上都是针对操作执行过程状态的设计方法,我们不能把所有的设计都倾注在过程中,还要懂得在操作结果呈现时进一步与用户做情感交流,把快的体验感知贯穿于始末。一个鼓励的文案,一个趣味的动效,都会给用户带来惊喜,都会提高用户对“快”的体验感知,加强产品“快”的记忆点。
百度手机助手当用户通过高速下载渠道下载应用时,下载完成后会告知用户节约了多少时间,增强了用户对高速下载的感知。当用户下载速度达到一定的数值时,下载完成后,界面会飞出飞机来肯定用户刚才的下载速度,增强用户对“快”的记忆点。

结语:移动产品的快体验,从用户发出操作指令,到执行过程,最后到操作结果的呈现,每个环节都是提高快体验的机会,抓住每个机会,把快速的体验设计带到你的产品中,让用户与你一起爽一把。


转载请注明出自”百度MUX”

设计的人文关怀:为高龄用户而设计

近年来,中国以及世界上很多国家老年人口的比例在持续增长。自1999年起,中国老年人口比例达到10%,正式步入了老龄化社会。2010年第六次人口普查数据显示,我国60岁以上老年人占人口比例已达到13.3%。

在我国,越来越多的老年人与子女分开居住,子女在外地的情况也越来越多。随着信息技术和互联网的发展,老年人也开始使用电脑、手机、平板等电子产品。这些电子产品可以让他们更方便地与子女沟通,也使他们的退休生活变得更加丰富。

然而,现有这些设备的界面设计通常并没有考虑高龄用户的需求,很多操作对于他们来说过于复杂,这也导致了他们在使用的过程中遇到很多困难和问题。由于目前绝大部分产品和设计人员仍以青年或中年为主,他们对高龄用户的了解和认识都非常有限,因此,了解高龄用户也就成了非常必要的一环。

本文将主要介绍高龄用户群体是谁,他们有什么样的特点,以及高龄用户设计的一些原则。

高龄人群是谁?

在我国,大众普遍接受的老年人的界定是以退休年龄为标准,即男性60岁以上,女性55岁以上。在美国,联邦政府将65岁设为可以领取老年人社会保障和医疗保险的界定年龄。联合国对老年人的界定则是按国家的平均寿命,一般是发达国家65岁以上,发展中国家60岁以上。虽然各国对高龄人群年龄的界定有所不同,但普遍把60岁或者65岁作为老年人的起始年龄

他们有什么样的特点?

当人们步入老年后,会面临各种能力的下降,比如在身体机能上,视觉、听觉,语言能力和肢体运动能力的衰退,在认知能力上,感知、记忆、注意力和学习能力的老化。这些衰退和老化很大程度地影响了老年人信息科技的使用。例如,他们在使用电脑时鼠标跟踪和定位能力的准确度会降低,无法快速而准确地点击目标特别是完成需要双击的操作,在使用手机时看不清屏幕,按不住按键,在手持设备的菜单中容易迷失等。

1. 身体机能

(a) 视觉:视力下降,视野范围缩小;对颜色的辨识力减弱,特别是蓝色和绿色;视觉敏感度减弱,特别是对动态物体的敏感程度;

(b) 听觉:听力下降,特别是对高音调和地方特色音调的感知能力减弱;

(c) 语言能力:说话不流利,会以无意义的语气助词开始,如嗯,呃等,并伴有较多停顿和重复;

(d) 肢体运动能力:行动迟缓;手指动作不灵活且会伴随颤抖。

2. 认知能力

(a) 感知能力:对外界刺激(视觉、声音)的感知速度变慢;对不完整对象或处理复杂刺激存在困难;

(b) 记忆能力:需要更多时间从长期记忆中取回信息;对空间位置的记忆能力变差;

(c) 注意力:注意力范围有所下降;更容易被无关信息所影响;在复杂的任务中易于感到疲劳;

(d) 学习能力:有更长的学习曲线,会比年轻人花更长的时间。

如何为高龄用户设计?

近年来,陆续出现了不少为高龄用户设计的产品,从最开始的老年人手机,到为老年人设计的软件和服务(如2009年百度推出的老年搜索,2013年10月发布的百度中老年输入法)。那么,从人机交互的角度,为高龄用户设计时都有哪些需要考虑的设计原则呢?

1. 提供多样的输入设备和输入方式

直接的操控方式如触摸屏和手写识别设备能更好地帮助高龄用户完成信息的输入。很多高龄用户对拼音和五笔等输入方式非常陌生,相比之下手写和语音是他们更容易接受的输入方式。

2. 界面元素尽可能简单,避免动画效果和其他干扰

随着年龄的增长,老年人的注意力范围会有所下降,维持长时间的注意力是有困难的,并且他们比年轻人更容易被网页上各种视觉污染所影响,比如背景图片。因此,简单的界面元素,对高龄用户至关重要。同时,尽量避免类似于弹出式广告或者动画,以减少对老年人的干扰。

3. 使用大字体和大图标显示

老年人由于视力的下降,对小号字体和按钮,以及差的符号和图像的识别存在困难。特别对于手机等移动设备,老年人更不容易看清楚屏幕上的信息。对于分辨率为640*480像素的移动设备,8-12号字是较适合高龄用户的字号大小。现在一些为老年人设计的手机应用程序就选择了10号或11号字。此外,大图标、直观的图标图案可以提高高龄用户的绩效。推荐的适合高龄用户的图标大小为32像素。

4. 文案简单易懂,容易记忆。提供可帮助记忆的线索。

老年人对新事物的学习能力比年轻人要慢,特别对计算机专业术语的理解能力较弱。因此,相应的文案设计应避免使用术语,便于高龄用户理解。此外,由于记忆力的下降,老年人在上网时经常会感到迷失,有些老年人会出现找不到之前访问过的页面的情况。在这种情况下,为老年人提供自动记录访问历史的功能,或者提供给他们一些可以帮助记忆的线索,将非常有助于老年人成功完成任务。

5. 让高龄用户感受到产品的安全性和稳定性

老年人往往对个人情况以及与金钱相关的信息非常敏感。他们对互联网的信任度较低。此外,他们在使用设备和软件的时候也会担心自己的某些操作会“弄坏”产品而不敢继续操作下去。因此,产品的设计应考虑为高龄用户营造充足的安全感和稳定感,让他们更放心和大胆地使用。



转载请注明出自”百度MUX”

倾听高龄用户的声音:邀约和组织高龄用户的注意事项

之前我们介绍了高龄用户群体,他们有什么特点,以及人机交互的一些设计原则。

以用户为中心的设计倡导将用户融入到产品开发的每一个环节中。随着互联网与信息科技的发展,越来越多的老年人开始使用电脑、手机、平板等电子设备。因此,邀请高龄用户参与到产品的用户体验设计中就变得更加重要。本文将简要介绍如何邀约高龄用户以及组织相关调研活动的一些注意事项。


如何邀约高龄用户?

(1)   通过他人关系介绍后打电话或当面沟通是最佳的邀约方式

高龄用户相比中青年人更加谨慎,怀疑性强。他们会更多地担心被骗或被推销产品。因此,通过他人关系介绍或推荐可以快速拉近与高龄用户的距离,建立初步的人际关系信任,使邀约更容易被接受。

(2)   老年大学或社区老年活动中心是可以快速找到高龄用户的地方

特别是对于需要有计算机或移动设备使用经验的老年人,老年大学计算机学习班等可以帮助你快速地找到这部分用户。从始至终保持尊敬的态度,当面的交流沟通,以减少他们的怀疑和担心。

(3)   邀约中尽可能详细地告知高龄用户参与这次活动的信息。

要参与的活动是一对一的聊天交流,还是会有其他老年人一起参加的活动(如焦点小组),是否会有录像或录音,大约多长时间,地点是否方便到达,以减少他们参与调研后的焦虑。

怎样组织有高龄用户参与的调研活动?

(1)   调研前的再次确认

重复确认对老年人非常重要,确认时间、地点,同时提醒他们携带老花镜、可能需要的药品等随身物品。

(2)   调研尽量安排在上午进行,时间控制在1个小时以内

老年人容易疲劳。上午是他们精力和体力相对更好的时间。将下午留给他们午睡,避免组织晚上的活动。调研中,当他们有不舒服的时候可以随时休息或结束。

(3)   尽量采用一对一交流的方式,对于焦点小组避免超过三个老年人同时进行

老年人由于听觉和注意力的老化,在讨论中不像年轻人那样活跃和积极发表意见。因此,焦点小组的讨论需避免超过三个的老年人同时进行,否则将达不到预期的效果。此外,在讨论过程中,老年人会趋向于偏离讨论的话题,他们可能会谈及不相关的事情或他们自己开始聊起天来,及时将他们引导回来,但也做好调研时间增加的预期。

(4)   调研中保持更多的耐心,给予他们充足的时间

老年人在反映速度和说话速度上会慢一些,甚至有时候不知道该如何表达,在这种情况下,耐心地引导,给他们更多的时间来完成任务或表达想法。

(5)   从始至终保持尊敬,语言多使用“请”和“谢谢”

老年人有着丰富的人生阅历和经验,是值得尊敬的群体,让他们在调研中感受到获得的尊敬有助于对话的展开。

(6)   单独提供一个舒适的休息场所,确保有人可以提前接待他们

很多老年人已经退休了,时间相对自由,他们往往会比较早就到达调研的地点,有时甚至会提前半个小时或一个小时。有些老年人会与老伴儿或其他老年朋友一起来。因此,准备一个单独的场所,提供一些食物、水、报刊杂志和老花镜,请提早到达的高龄用户以及他们的同伴们在专门的场所休息或等待。


转载请注明出自”百度MUX”

与众不同易,精益求精难 — QQ导航改版设计心得

前言

在切入设计正文前先来看一组08年的搞笑图片,对比了日本的NHK,TBS,朝日等电视台与东京电视台同一时段播出节目的差别:

1

 

新泻发生六级强震,只有他们还在播料理节目

2

 

九州大地震,他们的画面上打出的字幕拼成日文为“太好了!”的意思。。。

3

 

比起小泉纯一郎参拜靖国神社,金目鲷更为重要

4

 

发生歹徒挟持人质事件,只有他们还在播动画。而且正好是挟持人质的剧情!

5

 

东京大停电时,只有东京电视台有速报。不过报给谁看啊?

虽说是08年的搞笑图,也不排除是有人故意PS的结果。不过我相信肯定有人在捧腹之余,对东京电视台产生了浓厚的兴趣。如果刚好能收到甚至会忍不住想看一看现在在播什么节目吧?如果这些图片都是真实的,那么东京电视台的确是独树一帜,与众不同。这样不按常理出牌的电视台,如果要观众投票的话估计也会因为其‘奇葩’和满足不同观众需求的特质收获满满一箩筐‘赞’吧。

回到本文的主题,设计师们在接到需求时往往会看到“希望能有更简洁、更好、更与众不同的设计”或类似的字眼,那么在现实工作中,‘更好’(better)和‘与众不同’(different)这对鱼与熊掌该如何取舍呢?

苹果的首席工业设计师和副总裁乔纳森·艾维(Jonathan Ive)说 “It’s very easy to be different, but very difficult to be better”,大意是要做到不同很容易,但要做到更好就非常困难了。东京电视台的与众不同对消费者来说是件好事,因为它为用户在众多可选择的频道中提供了多样性,可以说是出奇制胜。但如果在产品设计,特别是互联网产品的设计上,同一消费者对同一类型的产品往往只会采用一两款的情况下,仅仅靠‘与众不同’就行不通了。电视节目不像用户的桌面和移动设备,不管漏掉多少重要新闻,只要看其他台就好了。特别是对网站来说,如果用户在头几分钟的时间内找不到他们感兴趣的内容或觉得网站不可靠,使用体验不佳的话,这个用户就会去别的网站,对产品来讲这是不可接受的。在接到QQ导航网站改版的需求时,因为市场上已经形成了‘好123’和‘360导航’两家独大的格局,因此主要任务是功能补齐和对旧版进行优化。但作为设计师本身来讲,多少还是希望自己能做出一些‘不一样’的东西。本文结合改版过程中的两个例子,讲述了我对设计中的‘更好’和‘与众不同’的感悟。

 

产品背景

网址导航站点的原型是由李兴平在1999年创建的“网址导航”—www.hao123.com从创立最初至今已经成为中国上亿用户上网的第一站, hao123的设计也成为了行业的标准之一。 创始初期李兴平作为网吧管理员,发现网吧用户的一个共性:“很多人都不知道如何上网,上网后又不知道去哪里找到所需要的内容。”这样一个简单的基本需求“上网去哪儿?”支撑着hao123飞速成长,截止2012年6月,导航网站用户的周均覆盖人数占全部网民数的40%(2.2亿!)对于这样一个增长迅猛的市场,腾讯自然也需要不断进化的产品来参与竞争。

6

 

7

 

2011年4月-2012年4月各主要导航网站日均覆盖人数(万人)和市场领先的产品

 

例一:首页排版

在设计一款产品前,最重要的就是认清用户需求。“去哪儿上网?”这个需求在多年之后是否仍是我们目标用户的主要需求?用户本身的成长和互联网环境的变化会不会引起需求的变更?通过对比市场的领头羊hao123和360导航我们发现它们在首页都采用了将网址列表(后面我们将这个模块分为“名站导航”与“酷站推荐”)放在页面靠右的位置, 而左侧留给了新闻,影视,小游戏等内容模块。这体现出它们的主要用户需求在成长过程中从过去的“上网去哪儿?”向“上网有很多去处,但具体看什么?”变化的趋势。反映在页面上就是从纯粹的网址收录与推荐转变为内容聚合的收集与推荐。

 

以下是好123和360导航主页的布局,因为用户习惯和自身逐渐转变为内容导航与门户网站的原因,符合‘F’法则的页面黄金位置并不是名站导航与酷站推荐:

8

 

      好123主页

9        360导航主页

过半好123的用户使用时间在2-3年及以上,和QQ导航的用户构成形成了鲜明的对比。360在设计上一直追随好123的步伐,通过安全卫士和浏览器的捆绑,用户构成接近好123也只是时间问题。不过使用时间2-3年及以上的用户也已经大大超过QQ导航。

10

      QQ导航用户结构 11

      360用户结构 12

      好123用户结构

因此,在首页结构上,因为目标用户的主要需求不同,新版的结构和主要竞品形成了鲜明的对比。

13        QQ导航 V1.0版本首页基本结构

在前期的调研和访谈中,我们总结出用户对新版导航的诉求关键词为:清爽,快速,权威,智能与个性。并且在“我的导航”中放置10个以下网址的用户占比超过一半,高达53%,使用10-20个网址的用户占比约为20%,30个以上的占比仅为6%。每天浏览10个以下网站的用户高达75%。还有的用户抱怨“实际我们常用到的网址无非是那么一二十个,像百度,Google,雅虎,网易,支付宝…等酷站,它们的位置也是固定不变的,现在的导航网站内容实在太多了,很多都是不用的。”这表示我们可以放心大胆的开始做减法并朝着“清爽”,“简约”的康庄大道前进了吗?—很多时候,用户说的不一定是他们想要的。如果不仔细注意下一组数据,很有可能在设计上会陷入这种用户设下的‘陷阱’。在对“您是否能在QQ导航找到自己经常访问的网站?”这个问题的回答上,仍然有40%的用户仅仅能部分找到。考虑到我们的潜在目标用户忠诚度并不高,如果出现找不到的情况,很有可能就变成了流失的用户。

14

 

因此新版QQ导航的名站部分没有大刀阔斧的删减网址数量, 每行的网址数在保持不变的情况下将网址推荐的数量减少一排。顶部的常用与个人信息在视觉上更加突出。在搜索栏下方新增了二级内容页面的全局导航栏。在后续的1.1版本中, 还将进一步将每排的网址数量精简至5个,猜你喜欢的行数从4行精简至2行。并且让用户可以自行编辑名站导航区域的网址。

15

旧版QQ导航首页布局

16

新版QQ导航首页布局

下一版的名站导航还将进一步精简,同时满足用户对清爽,快速,权威,智能与个性化的需求。

通过对目标用户进行细分并针对其需求调整设计,QQ导航 V1.0的主页在上线后得到了用户的肯定与好评。The number speak for themselves(数据为证):

17

 

 

 

 

例二:名站导航的编辑与添加

没有特意想要做出差异化和与众不同效果的主页得到了用户的一致好评,不禁让我们在设计名站导航的编辑与自定义功能时暗下决心,一定要在这里做出与众不同的设计!但因为太想要与众不同,名站导航的编辑方式成为了项目至今从设计稿到最终实现争论最大的方案之一。

19

好123添加,编辑网址时弹出的界面

20

360导航添加,编辑网址时弹出的界面

在改版最初,我们将用户添加网址和编辑网址的交互流程进行了细分。用户一般在添加网址时目的性较明确,交互流程预期耗时较短;而在编辑网址时目的性较为分散,很多行为是在编辑的过程中产生的(比如,将某些网址按顺序或种类排序时发现新的分类或归类方式),交互流程预期耗时较长。和好123与360不论是编辑还是添加网址时都弹出猜你喜欢的做法不同,在用户点击添加网址时,我们只弹出非末态的添加窗口。让这个本来预期耗时很短的流程更轻量化和精简,在风格上也和竞品形成了鲜明的对比。

21

 

22

24

但在最终实现前,这一方案因为可能导致 ‘猜你喜欢’的网址对用户曝光量下降而让产品无法下定决心进行尝试,我们又无法确定现在主流的交互方式到底会不会让用户反感(之所以将单独添加网址和编辑网址的场景分开,也考虑到用户可能对每次添加、编辑网址时都弹出的猜你喜欢感到反感)。对我们的目标用户来说,甚至有可能会因为在不知道去哪儿上网时因为没有这些弹出的推荐网址而觉得茫然的可能性。

 

在没有资源进行测试和无法确定用户反应的情况下,最终的方案不得不做一些妥协,按照主流的交互方式进行实现:

 

25

 

回顾最初的设计方案,设计时的确是按照用户可能的添加场景和流程并进行了细分,根据不同的预期给予不同的交互反馈。在与产品评审时也是信心十足,认为不但满足了不同场景用户的
需要,还避免了多余的信息干扰。更重要的是,作为设计师本省来讲,这个方案和主要的竞争对手相比显得与众不同。不过因为想要做出差异化的心情太迫切,反而导致我们在设计时低估了运营,产品在这一功能上的需求和侧重点。

  1. 虽然360导航和好123的方式每次都会强行推给用户推荐的网址甚至广告,但我们没有证据证明用户对这种方式感到不适;
  2. 对于运营和产品来讲,添加网址的途径轻量化后可能导致推荐网址的曝光率大幅下降;
  3. 对于有批量添加网址需求的用户来说轻量化的添加方式反而增加了他们的操作成本;

只求更好,不求不同

在决定主页排版时,我们并未强调要与众不同,综合分析用户市场和需求后,设计和产品各方很容易就在新版本上达成了一致。在设计名站导航交互时,虽然设计也是从细分用户使用场景出发,但在一个与竞品有差异化的方案面前,忽略了衡量最终结果好坏的其它因素和纬度(运营需求,网址曝光率和产品考量)。最后的方案虽然在形式上没有不同,不过在视觉上进行了大幅的优化,也能保证给用户较上一个版本更好的使用体验。这里再把“It’s very easy to be different, but very difficult to be better”拿出来点一下题。因为也在各种不同的场合听到过有人说这句话倒过来念也能成立,即为“It’s very easy to be better, but very difficult to be different”要做到更好很容易,但要做到与众不同就非常困难了。对于追求卓越的设计师来说,很多时候往往更好是不够的,但这也会将他们带入到一个误区中,就是为了不同而不同。我们在做产品设计时应该只遵循“更好”的原则,特别是商业产品设计。

26

日本设计大师原研哉曾经举办过一个通心粉设计大赛,但通过对比后发现在烹饪难易度,生产成本和外观等纬度的综合考量下,胜出的反而是传统的通心粉。

现有的东西虽然没有‘与众不同’的产品那样振奋人心,但它们往往都经过了用户与市场的考验才得以留存。我认为,好的设计师在听到“希望能有更简洁、更好、更与众不同的设计”时会自动将这句话过滤为“希望能有更好的设计”。只是最求更好的设计,心无旁鸠的仔细分析产品,功能,市场等各种因素,自然会让你设计出适合不同用户群体与需求的产品,而因为用户的多样性,在做出更好设计的同时,”与众不同”往往也已经水到渠成了。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=7983)

无觅相关文章插件,快速提升流量