博文

目前显示的是 八月, 2014的博文

高光下的可用性?日光下移动设计 #笔记

1 系统——屏幕自动感光调节亮度 这是目前大部分的系统采用的方案 2 app ——根据地点+时间+数据处理+用户设置                   为上下班时间规律的上班族调整手机屏幕亮度 3 硬件  AMOLED屏幕? 电子墨水屏?    我对于pebble的智能手表看好的一点就是节电并且阳光下可用的电子墨水屏 4 app design   高对比度 内容简单清晰 (话说三星的amoled屏幕在这种情况下优势突出啊 ...................................................................................................................... 场景: 上下班通勤过程中(特别是上班等公交车那一段) 身处特殊环境  特别是户外环境中

关于移动web设计如何省电 #笔记 更新20140829

最近看到一篇文章: http://radar.oreilly.com/2014/04/5-ways-to-improve-battery-life-in-your-app.html 这篇文章一如其标题,讨论了如何在app中节电的问题....(其实道理在web上也适用) 首先我们都知道——减少不必要的后台进程和服务 = = ! 其次  减少JS以及不必要的CSS,以及网络连接.... 再次  非AMOLED屏幕也居然能从深色界面中获得节电效果?! 使用GPU?——听起来很高级 所以我其实也不知道是啥 当然..令人震惊的部分是——使用JEPG比PNG更加省电??!! http://mobisocial.stanford.edu/papers/boneh-www2012.pdf(这篇文章也如是说) 我的怀疑是这和浏览器的实现有关 比如google chrome使用skia http://www.linuxgraphics.cn/android/skia.html(这是skia的介绍) http://www.atoker.com/blog/2008/09/06/skia-graphics-library-in-chrome-first-impressions/(同上) PS http://mobisocial.stanford.edu/papers/boneh-www2012.pdf 根据这篇论文GA会导致cache失效 .........................更新................................................................................. 1 html5 里面可以调用接口看电池电量(我记得这个API但是当时没发现支持性那么差) 2 根据这篇文章  HTML5 Battery电池状态相关API简介  同样也还有很多技巧 其中比较特别的是减少听觉和振动输出,以及利用page visibility API在线程上做优化 3 感知手机电能以及充电状态,只能做出判断才是重要的事情(比起简单的节电) 4 根据MDN  Battery Status API 你们都是坏人!只有FF支持! 5 其实绘制动画也是可以的 不过要使用r

工具推荐 pencil project

在经历一堆折腾以后最终选定pencil project作为自己的UX工具,原因如下 * 开源 而且似乎社区维护还不错 至少win8还有osx mavericks都有 * 免费 axure是需要花钱的 * GUI 开源工具能有好用gui界面真令人感动 想想linux - -! * 有众多拓展的模板 也可以自己去找svg导入 值得一提的功能: * 导出html/pdf/svg/png 导出功能比axure强大太多...    导出的png不含那些白色的空白背景哦! * 基本的link跳转有  当然更多动作设置就没有axure方便 * 每个小组件的自定义都很方便 无论是线条还是方框等 而且也提供更多高级设置 * 箭头会随着对象地点变化自动拉伸  做流程图非常舒服 * 随时调整画布大小 而且还能在现有画布增加Padding * 可以对于每个模板做自定义定制! * 提供更多高级功能  导出模板的自定义等 * 方便的自定义组件库 可以隐藏某些库然后以后调出来 为什么我不用其他工具 * office ppt 不能导出svg * mac上的各种工具 如sketch 我没mac,而且开源的足够用 * visio 同样也是导出功能方面的考虑 * axure 这货画图实在麻烦很多 特别在物体的具体操作上 似乎字体也是个问题 * 其他网上的工具 他们提供更多模板 但是都要收费 推荐 * 把文件保存到可以同步的文件夹 比如dropbox/box * 建立自己的组件库 * 把自己常用的库存储起来方便重装 小吐槽 现在我产出交互文档直接用WPS+pencil project 为什么我不用高上大的——indesign 这货太笨重了,而且很多高级功能实际上用不上。 许多常用功能(对我而言)都藏得太深 ,在折腾了一个多月以后我决定不追逐大大的高上大工具,老老实实用普通的WPS产出。 跳转用AXURE做还不如画流程图清晰 至于许多动画,我写CSS/HTML(以后还有基本的JS) 参数都给清楚了,对于程序而言更方便吧

思考电商桌面端首页设计

0 前提 笔者在本文当中针对的是电商中的奢侈品电商,而在这里笔者将奢侈品广泛的定义为那些客单价较高,主要满足中产阶级乃至高收入人群需求的产品。同时本文中的首页设计,针对桌面端的设计而言,其他平台的首页设计在本文暂不讨论。 1 商业需求的考量落地 绕开商业上的利益需求讨论电商首页设计几乎不太可能。从一开始,电商首页设计就是为商业需求铺路的,无论从导航与搜索——方便顾客搜寻与找回,到商品的展示陈列——方便顾客浏览探索,最终都是希望成功转化流量成为实在的销量。 要设计奢侈品电商,就要理解这类商品与日用零售类商品在品类上有着极大区别。在这里商品的购买过程中,消费者通常知识获取倾向更强这是因为 对应商品价格较贵,同时购买人群普遍教育水平也较高。当然,用情感去驱动消费者,激发消费者兴趣,也是非常重要的辅助手段。具体落实到商业需求上,就是我们需要提供充分空间,清晰而突出重点的展现我们的商品与专题,同时我们也应该提供足够明确的导航与页面架构方便顾客搜寻与找回他们感兴趣的商品,进行进一步决策。 2 信息架构与信息传递 既然商业需求中,既需要吸引那些没有明确目的,随意搜寻的顾客,也需要帮助那些带有目的性的或是对目标品类有一定认识的顾客继续浏览过程,那么信息架构的设计也应该同时充分考虑这两个方面的需求。笔者认为,没有明确目的的顾客,更多是希望触发他们的情感引发他们进一步浏览与搜寻。那么随之而来页面设计就需要更多吸引他们的视线,在视觉与信息传递上都需要传达这种意图。 对于那些目标明确的或是认知需求更强的顾客,就需要满足他们对于获取更多商品信息的需求。虽然这一点更多会体现在商品详情页的设计上,但是首页的导航以及分类体系,是指引顾客进入商品详情页面的重要途径。 3 我们身处的时代环境 * 屏幕分布率的变化 根据cnzz的统计表明,在2010年7月,1024x768是43%网络使用者所使用的屏幕分辨率,而1440x900和1280x800占据了18%与11%的使用率。现在,2014年8月,1366x768,1400x900分别占有20%的屏幕分辨率,而1024x768的占有率下降了一半,大概只有17%,而1920x1080,则占有13的屏幕分辨率。由此可见,屏幕分辨率变得更大,是大势所趋。 * 多屏幕 虽然本文的主要探讨内容应为桌面端的首页设计,但是桌

为什么要在乎信息架构

0 我们如何获取信息 我们怎么处理我们看到的信息呢?生理学知识告诉我们,这些信息通过光,投射到我们视网膜,视网膜的细胞们对信息进行响应和加工,随后传输到大脑,我们的大脑对此再进行加工和反应。这其中大多数的过程我们并未能清楚的意识到,正如你,对了,就是在阅读这篇文章的你,也难以清晰的认识到,自己究竟如何把注意力集中在这篇文章,又如何把文章里一个个文字字符理解成内容。这其中的过程很长,但是最要紧的是,要知道人获取信息,这不仅与外界的信息如何展示传递给有关,也与人内部的信息加工机制有关。 人头脑内部的认知机制很复杂,而且人所处情景也相当纷繁,他们总是漫不经心,难以集中注意力,他们都相当懒惰不愿意在不太感兴趣的领域进行过多探询,更糟糕的是,我们提供的服务对于他们而言通常不是无可取代的。 那对于我们而言,构建好的信息架构有什么意义呢? * 对内容和业务进行先行梳理 方便我们分清轻重缓急  * 帮助指导交互设计和视觉设计的方向 避免 视而不见 也减少工程上的耗费(特别是app上华丽的动销 * 逻辑清晰 方便维护与扩展 * 方便不同类型的顾客进行浏览 也方便顾客理解以及重复浏览 使用服务 1 这仅仅是导航? 市面上林林总总的的CMS发布系统的确提供了许多架构。但是根据我的经验,不少网站只是简单的套用了这个框架,不顾业务与情境就在上面填充东西,导致顾客会浪费不少时间在用眼睛搜索上——他们最后都会走向搜索或者离开。即便他们能找到那样东西,其中浪费的时间,以及页面浪费的空间,这些都带来不必要的损耗。 CMS还有林林总总的控件只能内容提供容器,但是并没有现成的,针对你的业务需求与运营资源的框架,这些框架需要自己去分类和总结,并且一以贯之。此外,各种现成框架和工具,实际上和代码一样,也有着交互和视觉的逻辑架构,单单看着觉得可以勉强套用,而对背后的逻辑所知甚少,最后可能事倍功半。 2 这仅仅是页面/模块/组件分布? 是的,页面上的确分布了那些模块,是的,app里面有相关的组件,可是存在,并不等于被感知到。举个极端的例子吧,比如当出现错误的时候,MS word上面有时候会出现帮助,但是我们并不一定能意识到这些帮助存在,反而注意力死死看着自己出错的地方。再比如淘宝,底端有很多分类和导航,但是我很怀疑具体的点击率,因为我每次都没有耐心去找到那相应的分类,就直接开

关于产品设计 #这是个巨大的坑

依然是书单推荐,但是更加强调产品, 对于一个交互设计而言,学习这类知识有助于培养常识,以及回避忽悠。 PS多看知乎多刷RSS也能学到这些知识 关于测试 笑傲测试 完美软件 软件测试的艺术 关于商业 产品经理的第二本书 公司的逻辑——力推 认识商业(美帝教科书) 服务营销原理(美帝教科书) 金融与好的社会 啤酒与尿布 数据之美 新经济社会学读本(意外的有趣) 小社交 大社会 关于服务设计 产品设计心理评价研究 产品的诞生 设计力 设计管理基础 他山之石 参见@panicparamecium推荐的书

关于交互设计 #这是一个巨大的坑

我现在才发现 我跳进了大坑 还在里面呆了很久= =! 这里列举的都是我看过并且觉得值得一看的书,还请诸位斧正 平面设计基础 ——打好基础  *写给大家看的设计书 *版式设计原理 *进阶理解版式设计 *版式设计实用手册 *设计的品格 *平面设计法则 *超越平凡的平面设计 *美国视觉传达完全教程 *新编英国平面设计基础教程 *图解力 跟顶级设计师学做信息图 *平面设计材料与特殊效果 *色彩设计的原理 *艺术 设计的色彩构成 入门 ——基础知识 培养感觉 积累细节 *在你身边,为你设计 腾讯系CDC的作品,确切的说是文集,新人入行培养基础不错,可是如果看了很多年各种CDC的blog,那么其实收获有限 *UCD火花集1 *UCD火花集2 当年的UCD大社区啊...感觉第二本比第一本要好。 *网页设计创意书1 *网页设计创意书2 看看别人看过什么,有时候就当网页发展史看看吧,真要强调创意来源要么看新的,要么看别的学科(如建筑,工业设计等)的经典也前沿 。 *设计师要懂心理学 *设计网事 基础得不能再基础,设计网事里面有很多tips,值得围观。 进阶 ——初步了解原理 培养品味 *designing interface *web界面设计 认真理解这本书的原理!!!!!!!!! *don't make me think *众妙之门系列 *简约至上 *ios人机交互准则——ios6+ios7 *一目了然 web软件显性设计之路 没法简单的评论这些书,不过在我看来这些书比前面的提供更高层级的东西,比如品味。品位是一种稀罕货色,品位的来源是对于相关知识的精细加工和深入学习,看这些书好好领悟足以培养人对于交互的理解,这就是对于交互设计的品味来源。如何引导操作,提供反馈,如何设计动画,如何理解动销等等,这些书都足以给人提供好的鉴赏评判入口,让人不至于轻易随波逐流。 专题 ——针对性学习 有必要时查询备用 *网站搜索设计 *web表单设计 *web导航设计 *社交网站界面设计 *移动应用UI设计模式 *筑巢引凤:高粘度社会化网站设计秘诀 * SNS网站构建 移动交互 ——以移动为中心思考交互方式 *移动互联 用户体验指南 在围观许多不堪入目的作品后,这本