从手机产品登录页面设计想到的

一、架构设计和流程设计

我一直追求简单而高效的设计,尤其欣赏臭鱼这一篇文章《为产品结构的设计,为用户任务的设计》。他用图1很好的诠释了这个观点:首先要保证产品逻辑结果清晰、准确,其次要为用户任务架起一些快捷操作的桥梁。

图1  “产品结构设计”和“为用户任务设计”的关系

好的流程设计能使产品具有更清晰的架构,更良好的体验。我的老大曾经举过一个串珠子的例子,说PM给我们的功能列表都像是一堆零零散散的珠子,而我们要做的,就是把这些珠子串起来,把功能串起来,最后呈现给用户的才是一个完整的东西,有着清晰的架构和流程。

(更多…)

手机产品交互体验评估方法

一、评估的目的

交互设计是一个迭代过程,通过交互设计评估,可以及早发现设计中缺陷,进而能进一步完善交互流程。通过评价,也可发现交互设计中可行、友善、合理或优秀的地方,从而为后续产品的交互设计提供借鉴。

二、评估的标准

手机产品交互设计的评估标准还是是否满足用户体验,当然,体验是一个很虚的东西,没有一个具体的量化标准,那我们就落在实处,从可以量化的维度打分。具体从那几个维度入手,我认为可以分为如下几个,见图1:

图1 交互体验评估维度

(更多…)

手机产品用户界面设计指南

周陟曾经说过,设计师不一定要读大量的书记大量的数据,但是一定要有获取知识的渠道,同时,一定要了解平台。

在做手机产品的时候,更是如此,手机产品跟互联网产品最大的不同,就是不同平台都有自己的特性,Android、iPhone的触屏系统和Symbian、Windows mobile的按键系统就有很大的差异,同时Symbian系统自己都有五花八门的分辨率,按键和触屏两种系统。那么我们从哪里去获取平台之间差异的知识,又怎样去了解这些平台呢?

(更多…)

手机产品纸面原型

MoobileFrames(需要翻墙)这个网站是一个手机产品原型图草图汇集地,有很多有创意的方案,你可以看到一个成功的产品在襁褓阶段是什么样子,是怎么成型的。牛掰的设计师是怎么思考,怎么操作的。手机产品在功能逻辑层面的复杂度一点也不逊色于互联网产品,但是在界面表现层却一定要简洁明了清晰高效。纸面原型是一个很好的收集零碎想法,探索可行方案的手段。我也有自己制作纸面原型模板,打印出来,推广给合作的UE、PM同学,大家在产品的创意构想阶段,广泛的采用了这种简单、高效的办法,进行了很多有意义的探索。 (更多…)

移动搜索产品的用户体验

随着移动设备的变得更加易用更加强大,用户在移动端的搜索请求也会如pc端一样,成为用户移动旅程的起点。搜索和本地相关的信息,手机的优势甚至更突出一些。

那么有哪些手段可以更好的提升移动用户的搜索体验呢?我从产品设计角度总结了以下8点,仅供参考,欢迎补充。

1、更精准的结果和更精准的广告

移动搜索和pc上的搜索最大的不同,就是移动搜索需要更高的精确度,用户必须在头三个搜索结果就看到他需要的内容,否则挫败感会非常之强。不可能像在pc上,头几条都是广告,或是都是自己内容推广。因为一个小小的屏幕上,如果不滚动屏幕完全看不到自己想要的内容,那么必然会让用户怀疑搜索的准确性。这跟个pc上不要把重要的内容放在基准线之下是一个目的。手机上也很难像pc上一样,分两栏显示,或者进行排版,一般都是列表。那么我们势必要提供给用户更精准的结果,对广告的要求也更高,移动搜索广告最好是搜索结果+广告的双重身份。

(更多…)

手机产品设计8种交付物

点此查看大图

手机产品设计在流程上跟互联网产品设计出入不大,在交付物上也有交叉点。很多新入行的朋友一直困惑于手机产品设计该怎么进行,该交付什么样的产出物给团队其他人员。小公司产品经理可能一条龙式的包揽了需求分析、竞品分析、功能设计、交互设计等,交给技术人员的直接就是PRD(产品需求文档)。大公司由于职能细分,可能会有项目经理、产品经理、产品设计师、产品架构师、产品策划、交互设计师、视觉设计师等细分职位,那么设计沟通就成为更不可少的步骤了,时间都被浪费在流程和会议中了,大家经常会纠结于功能或者设计的细节,忘了我们的核心用户,忘了产品的核心价值,无数次的pk,最终力求找到每个人认为的最符合用户需求的设计方案。

(更多…)

通过HTML5来改进微博手机版本的体验

HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化。都说html5+javascript是flash或者silverlight这类客户端执行环境的杀手,html5推出的最炫的一个功能是标签(cavans),还有视频(video)和音频( audio)等。现在页面版的都还在用flash,flash对于手机来说,速度和资源消耗都成问题。但是利用html5,可以顺利地在iPhone等不支持Flash的平台上将swf显示了出来,尽管并不是所有Flash都能放,但足以证明javascript+SVG的威力了吧。利用html5不但能够更好的完善微博的现有功能,还能结合其他的一些功能,进一步的提升使用体验。

(更多…)