头像web版交互设计总结

头像web版交互设计总结

NO

头像web版交互设计总结

头像web版交互设计总结

jadl2012-4-22

互联网资源

1.项目背景

QQ会员头像是一个会员比较喜欢的功能,为用户提供了大量优质精美的头像。但内容一直由官方提供,虽然保证了质量,但在数量上更新速度上难以满足用户的需求。

在加上用户分享头像的新特性后,客户端小页面的局限性问题也凸显出来,不再适合大量item内容的展现。由此,头像专区迁入到VIP官网正式立项。

2.设计过程

在头像web版项目中,交互设计首次尝试交互组重点项目设计流程,完整、严格并且有总结性输出的对流程做了验证。

设计流程和涉及的方法如下图所示:

1.用户研究

这部分内容主要回答以下问题:“谁将使用这个产品?”“用户?用户到底是谁?他们是什么样的?”“他们为什么用这个产品?”

1.1用户角色

在头像项目中,首次尝试引进人物角色这一强大的设计工具。通过建立用户模型和人物角色,来解决产品用户群基数大,目标用户不明确的问题。这是一次非常值得、并富有意义的尝试。并且用户角色定义后,为QQ会员以后其他的项目提供了便利。

1.2情景描述的任务分析方法

相比其它的任务分析方法,情景描述法好处在于它容易懂,问题会暴露的更明显,对后续的功能设计更有用。此外也可以来帮助做系统评估。

2.信息构架

这部分起承接作用,目的是为了将前期用研的成果,向界面设计转化。“信息架构”比较术语,可以将它理解成站点结构的搭建或内容组织。

这一步我们要做的,首先是设计一些功能,用于支持角色完成任务或帮助解决之前任务分析中所碰到的问题。因为商城是一次改版、而非全新的项目,所以不需要对所有功能面面俱到的进行分析,只是阐述其中一些关键、有代表性的功能。接下来,是对站点整体结构进行设计和组织,力图使其条理清晰,逻辑关系明确。

最终出产的站点结构,需要可以支持用户完成任务流程,并尽可能的使这个过程自然流畅,符合角色的思维方式。大多数人只有在找不到自己想要的信息或遭遇困惑时,才会留意到站点的结构和分类等。这也就意味着,一个好的信息架构,应该是不会被角色注意到的,但它又确确实实地帮助着角色去完成任务。

2.1功能设计

相比客户端小页面,功能点上面没有增加很多新的特性。

2.2站点架构设计

3.交互设计

当站点的结构被骨架搭建起来之后,就需要更为详尽的细笔钩勒,让整个站点丰满起来。

通过框架设计,解决这个站点的结构,主要区域为item内容展示。侧边栏为公用模块。

接下来,是两人个关键界面的设计:首页和item列表页。这两个界面将为后续的详细设计定义具体的框架和模板。

整个流程中的还有一个亮点,将通用模块的元件化处理,不仅使得复用性增强、效率提高,也为大型设计项目积累经验,使得多个设计师的合作更为有趣和高效。

详细界面设计,从两个方面入手:布局和行为。功能模块如何组织?点击某个功能将会触发怎样的操作?而这些,也就是交互设计师最终将输出给项目组的稿件。

3.1界面架构设计

首页采用三栏式布局,突出丰富多彩的内容。

内页详情页面。右侧边栏为固定组件,左边为主要内容展示区。

3.2模块组件处理

对于一些在原型制作过程中,会重复用到的功能模块,使用Axure将其制作成了元件(master),可重复使用。

这样做有几个方面的好处:

A.原型制作效率大幅度提升(观看制作过程);

B.在需要多名设计师合作的大型设计项目中,可以通过这种方法保证原型风格统

一;

C.有利于培养新同学快速上手。

这里典型的模块为页面右侧边栏,“自定义头像”“分享头像”和“7天自动分享头像”为特性功能点,做成模块化处理,在各个页面都可以很顺利的进行。

扩展阅读:交互设计笔试题总结

1平面设计工作的流程1)进行设计需求分析;2)提供设计构思;3)收集整理资料;4)选择相关软件进行制作;

5)根据领导或客户的意见进行修改;6)成稿。

2用户体验(UE)是一种纯主观的,在用户使用产品过程中建立起来的感受。但是对于一个界定明确的用户群来讲,其用户体验的共性是能够竟有良好的设计实验来认识到。好的用户体验,是一种“自然”的体验。

一、问答题。

3对用户体验及相关行业阅读过的书籍。

4列出至少5个国内外对应网站?

GoogleVS百度FacebookVS人人Twitter(140字符)VS微博eBayVS淘宝AmazonVS京东YouTubeVS优酷土豆grouponVS拉手网

5jpg和gif格式的不同点,各自应用在哪些场合。

1).jpg格式是由一个软件开发联合组织制定的有损压缩格式,用最少的空间得

到较好的图像品质。对色彩的信息保留较好,适合应用于互联网和需要连续色调的图像如照片。

2).gif格式是一种基于LZW算法的连续色调无损压缩格式,它的另一个特点是

可以存多幅彩色图像,可以构成最简单的动画。GIF文件支持透明特性,有大量的软件使用GIF图像文件,它还适用于icon图。

3).png格式是基于公共专利压缩算法的无损压缩格式,支持8位和24位图像。

PNG文件也支持透明特性,8位的PNG图片与GIF图片基本相同,24位的PNG可以支持Alpha透明效果,适合用于需要与背景完美融合场合。

6怎样理解“设计”二字?

7好的设计有什么标准?

8中国web设计与外国的同行比较有哪些优势和不足。

9说说优秀的设计师需要哪些素质和能力。

10一句话解释交互设计

11比较一般的网页翻页设计和移动平台产品的翻页设计。

12网站首页常常会放大量的分类信息和导航栏,怎样改进并提升用户体验?

13为什么现在的网站注册名都要用邮箱地址?

二、分析题。

14列出至少5个生活中用户体验不方便的案例,如电梯的上与下。选择上述5个案例之一进行分析并解决之。

15说一下你觉得用户体验最好的互联网产品有哪些,为什么?

16近三个月着重观察的互联网产品列表。

17小A是一个交互设计师,某日接到一个任务,设计一个表单,一共只有三个输入框,而且都是必填项。小A就开始犯愁了:如果有一项是必填的,我可以给它加上”*”,那剩下的两项就不是必填的。但现在三项都是必填的,我怎么把这个信息表达给用户呢?另外,如果我把这个信息表达得过于明显了,用户当然都会偷懒不填的。那我怎么才能收集到尽可能多的用户输入呢?这分寸的把握比谈恋爱还难了,怎么办呢?

请用尽可能简短的文字表述您的解决方案。如果您对这道题目本身有异议,也可以叙述您的见解。

三、画图题。

18画出从淘宝买东西的一个高保真流程图。从将货物添加到购物车到确认订单中间的所有流程和反馈。

20画邮件发送流程图。在发送邮件过程中,若小于50M,正常邮件界面发送,若大于50M,进入超大附件界面,此时进行判断,条件一:开通手机邮件功能,条件二:安装手机邮件插件。只有在这两条件都满足的情况下,才可以成功发送,否则不成功。

四、设计题。

21某公司为合作客户建立信息列表,大约有1000个客户,近五年的记录都在里面。现在让你设计一个列表页面,来显示客户信息。画出原型和写设计说明。

22假设有一个”CEO服装网”,它的主营业务是针对中国的大公司CEO们销售各式服装。请您为该网站设计一个简单的Persona(注意,仅一个)

23未来的社交信息超级聚合器。未来的移动互联用户的信息分散在新浪微博、腾讯微博、QQ、QQ空间、人人、开心、facebook等多处,你需要在iPad(或AndroidPad)平板平台上设计一款聚合软件,吧用户身边好友的信息,其他(通过你对用户情况的分析)信息(如淘宝信息、天气……)整合到一个适合平台阅读的界面中去,需要兼顾其可用性和游戏性。

24北京三里屯有一家AppleStore,每当有新产品刚发售的时候总是有很多客户来排队购买,中间掺杂着一些黄牛党。设计一款供该商店使用的触摸屏手机app,提供新品发售排队的客户排号用,保证:

25公司向针对“节假日回家”这一行为开发一款互联网产品,需要写一个项目策划,用户潜在需求,时间和工作人员分工,功能流程框架,网站首页草图和另外某一屏草图。

不再只是一味的追求视觉或实现产品功能、结构等,而是视觉、可用性一个都不能少。

如何压缩可用的图片?如何设计网页的色彩?如何给页面信息归类排列优先级?如何架构一个页面、一个网站?最后如何熟练使用软件完成设计?

1简单的智力计算题,只要审题仔细的话肯定没问题的2网络常识,外国的社交网站,视频网站考你一下3JavaSrcipt基本知识,设计原则什么的填空题:

1Chrome浏览器内核

Trident内核:IE,MaxThon,TT,TheWorld,360,搜狗浏览器等

Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等Presto内核:Opera7及以上Webkit内核:Safari,Chrome等典型的双核浏览器包括:

搜狗2.0:Trident内核和WebKit内核傲游3.0Beta:Trident和WebKit内核QQ浏览器5:Trident内核和WebKit内核

2Twitter一次能最多能发多少字符13电容式屏幕和电阻式屏幕的比较

1)电阻屏在触模时需要轻触压按,而电容屏即使很轻微的手指触碰感应就能激

活。

2)电阻屏可以用任何物体来触摸,而电容屏是人体热感应工作原理,只能用手

指的热感区来触摸,指甲和手写笔均无效。

3)电容屏可以很容易进行多点触摸,电阻屏一般不能实现多点触摸的。4)电阻屏内部是软的,一般是在4到5层超薄的钢化玻璃中间夹杂细微的炭粒

(显微镜下才能看见),通过按压导致上下两层的炭粒相互接触而接通触屏电路,产生触摸反应,容易产生出油、划痕,易坏,容易触屏不灵,而电容屏都是采用单层加厚钢化玻璃,硬度大,耐旧,使用寿命长。

5)电阻屏在阳光下可视性稍差,电容屏则非常好,在阳光写可视性依然很强。6)热感电容屏的成本比普通按压式电阻屏贵50美金,使用寿命是普通电阻屏的

2倍,因此热感电容屏一般使用于高档高端手机上,电阻屏一般使用于普通手机上。

4举两个社交媒体网站

开心网人人网QQ空间朋友网Facebook豆瓣珍爱百合世纪佳缘QQ空间基于6.37亿活跃QQ用户的中国最大的社交网络。Qzone的问题不在于数量,而是这种基于昵称的社交图谱的质量。

Renren是中国实名社交网站的领头羊。它为中国的SNS设立了标准,但是仍然面对着其他社交网站的挑战,比如腾讯朋友,Kaixin001。

附加题:

用户喜欢在用QQ签名存一些网址,电话等信息备忘,但QQ签名档不是针对此进行设计的,请提出解决方案

友情提示:本文中关于《头像web版交互设计总结》给出的范例仅供您参考拓展思维使用,头像web版交互设计总结:该篇文章建议您自主创作。