记一次阿里爸爸的笔试(下)

这篇文章会出现在我的实习日志里面,所以我特地分成了三篇写。

记一次阿里爸爸的面试(上)
记一次阿里爸爸的面试(中)

第三题是设计题,设计一下淘宝的产品展示详情页,需要同时设计移动端和PC端。时间绝对不够,只能快速的画图然后简单用文字说明。

因为题目里说到了“根据自己的购物经验设计淘宝的产品展示详情页”。所以,先列出我在淘宝上购物比较在意的几点:价格、发货速度、促销信息、产品评价、图文详情、店铺信用、是否存在刷单可能、客服反馈积极程度。
接下来做一个排序。排序标准是,只要某一项好,哪怕后面跟着那项差点也没关系。

  1. 图文详情。如果产品酷,那就一定要买。
  2. 价格。价格实惠很重要,毕竟穷。
  3. 发货速度。还是希望尽早拿到货。
  4. 产品评价。评价水分比较大,所以不会成为主要因素
  5. 店铺信用。看完产品评价也会关注一下店铺的信用。
  6. 是否存在刷单可能。前两项如果感觉明显有水分才会关注这项。
  7. 促销信息。一般来说懒得看,除非特别缺钱
  8. 客服反馈积极程度。大多数情况下不会找客服,不过还是希望客服能及时回复。

设计方案详解:
设计方案详解
流程图:

这个产品详情页是定位于我这样的群体的:不喜欢逛街,对商品质量要求比较高但是比较穷;在网络购买的产品都比较“大件”,所以对店铺的诚信度看的很重;很多时候都是攒了很长时间的钱才能买一件东西,所以希望尽快拿到产品;花了大钱,所以希望客服能尽量解决自己的困难。

技术上比较难实现的是评价趋势,这个要求实时收集每一个评价信息及时间,最后进行图像化处理,数据量比较巨大。

凑合写写吧……换在平时做这种设计没个一个下午是做不完的。做完之后看到网上的微博话题,做完的人也不是很多。我还是事先准备好了大概的流程图和用户画像,真的尽力了……

【转】交互设计师笔试、面试问题收集汇总

原文链接
1.设计一个智能家居的电器火灾报警系统,产出关键流程图和线框图(校招笔试,金山WPS)

2.设计一个制作相册的PC端软件,需要有设置相框、分享给好友功能,产出关键流程图、信息架构和线框图(社招笔试,金山WPS)

3.默认情况下iPhone的消息推送提示会在锁定的屏幕上做完整的透出,有时会泄漏一些隐私的内容,目前设置和修改此项功能的隐藏深路径长,并且界面表达不方便理解和操作。如果让你优化这个流程和操作界面你会怎么做?如果让你用更创新的方式解决这个问题,你会怎么做?(校招笔试,阿里)

4.列举一个你认为最好的用于时尚购物的App,描述其独特之处。如果请你来重新设计,如何在交互设计上表现得更为极致。必须包含:设计分析报告、关键界面图及流程图(校招笔试,阿里)

5.QQ和微信在交互设计上有什么不同?(社招面试,腾讯)

6.列举3种以上日期控件的形式、使用场景及优缺点。(校招笔试)

7.请列举几种移动应用热门的交互模式(例如iOS应用中Path的扇形菜单Morphing Controls,Android应用上流行的抽屉导航 Navigation Drawer)以及各自典型的APP,并分析各自的优缺点。(校招笔试)

8.结合上班族日常生活场景需要,结合电商或移动情境,畅想一套智能家居的解决方案。(校招笔试)

9.结合你所经历过的项目,描述项目成员的职能过程和发挥的作用及配合流程。除了专业上的输出,交互设计师还可以提供怎样的增值服务以体现价值。(校招笔试)

10.假如产品经理让你设计一个直播App,界面上最多只能有三个按钮,接下来你准备怎么做?(校招面试,百度)

11.请列举出某个你熟悉产品体验不好的地方并提出改进方案,至少8个(社招笔试)

12.列举表单对齐的4种方式及其使用场景和优缺点。(校招笔试,阿里)

13.Android和iOS在交互上有哪些不同。(社招面试)

14.假如你设计了淘宝新首页,50%的用户10秒内关闭离开,分析原因(校招笔试,阿里)

15.网页中点击链接后,新打开窗口和当前页面刷新的差异点?背后的原因和适用场景?(校招笔试)

16.什么是响应式网页设计,这种设计有何优缺点(校招笔试)

17.比较两个即时通讯类app,分析各自在用户诉求或交互上的优点和创新点,结合图文针对其中的缺点给出解决方案。(校招笔试)

18.背景说明:北京三里屯有一家Apple Store,每当有新品刚发售的时候,总是有很多客户来排队购买,中间掺杂 着一些黄牛党。平时也会有很多黄牛党在附近倒卖一些紧缺的商品。 作为设计师,设计一款供该商店使用的触摸屏手机APP,供新品发售排队的客户排号用,保证其:
a、公平性; b、尽可能地识别和排斥黄牛党 ; c、易用,店方易管理 ; d、其他的从案例中引申或补全的用户需求。
题目要求: 这款app包括客户端界面本身和一个管理的策略,请用设计文档的形式展示。 其中必须包括:
1)用思维导图归纳的分析、解决问题思路;
2)界面及交互流程。
3)加分项: a、可操作的原型; b、接近高保真效果的原型; c、可运行的IPA程序包或APK程序包。
(校招笔试)

19.背景说明:未来的社交信息超级聚合器。未来的移动互联网用户的信息分散在新浪微博,QQ空间,人人, Facebook等多处,你需要在iPad(或Android Pad)平板平台上设计一款聚合软件,把用户身边好友的信息流,其他(通过你对用户情况的分析)信息(如淘宝信息,天气……)整合到一个适合平板阅读的界面中去,需要兼顾起可用性和游戏性。 题目要求:
1)需用思维导图描述分析和解决思路;
2)整理其需求列表;
3)首页界面交互及至少5个主要功能的交互。
(校招笔试)

20.在爱奇艺PC网站或App内设计一个播放列表功能,用户可以将视频添加到播放列表里,产出界面草图
具体要求:
·可以管理已有播放列表,对播放列表内的视频进行编辑和删除
·可以新建播放列表
·可以给播放列表设置名称、修改封面、添加标签和设置简介
·向播放列表添加视频有上传本地视频和添加已经上传的视频两种方式
(社招笔试,爱奇艺)

21.背景说明:小龙银行现有一个大型的网上银行系统,开通网上银行功能的该行的客户可以在线查看本人银行账户的余额情况、收支明细等资料。目前,客户有了新的需求,希望可以通过网上银行向第三方交付费用,比如向煤气公司缴纳煤气费。具体功能要求如下:
(一) 收款人管理
a、 添加收款人、包括收款人名称和账号,可有多个收款人; b、 删除收款人; c、 更改收款人。
(二) 付款
a、 指定收款人,支付款项的账户,付款金额,付款时间和备注;
b、 可以设定重复付款。重复付款是指一定的金额,按每月、每季度或者每年,自动支付给收款人。
(三) 付款管理
a、 查看付款历史记录;
b、 取消已提交但未处理的付款要求。
题目要求:
请按照以上功能描述,给出一个网上付款的界面设计方案。请提供界面流程图和低保真原型图。
(校招笔试)

22.小江凌是个刚入大学的新生,使用Android手机,平常喜欢下载各种App,月底时发现流量超标,也不知道是哪些App消耗了他的流量,请设计一款Android工具,帮助小江凌解决他的烦恼。(社招笔试,腾讯)

23.列举一个你认为最好的订票网站或app,分析其用户类型、核心任务、核心路径、核心页面,并找出你觉得最大的设计问题,结合图文给出设计方案。(校招笔试)

24.列举web或无线设计领域流行的趋势名词,结合实际的案例简要说说你自己的理解。(校招笔试)

25.设计一个未来图书馆,畅想通过多种设计方案满足方便查阅信息的场景。(校招笔试)

26.在携程PC端的订票界面上增加一个接送机模块,
要求:用户可选择是否接送机用户可查看接送机的车型、容纳乘客数、价格车辆类型有经济型、舒适型、豪华型三种,用户可自由选择用户可设置接送机地点,其中机场这个地点根据用户购票情况自动设定,不需要用户设置,也不能修改接机服务用户可设置接机牌文字送机服务用户可在合理范围内设置送机时间要求:不要过分干扰不需要此服务的用户。(校招笔试,携程)

27.移动APP端有哪些独特的交互设计模式?(校招笔试)

28.请举出你工作中遇到最大设计困难是什么,并且说明你是如何解决的(社招面试)

29.假如你的设计方案和上司还有同事发生了争执,请问你该如何解决这种问题(社招面试)

30.在登录界面内,「找回密码」和「忘记密码」哪个文案更好,为什么(社招面试)

31.请列举出5种以上控件或者设计模式可以实现“多个里面选一个”(社招面试)

32.为什么微信没有下拉刷新功能?(社招面试)

33.请列举出你最常使用App,找到其交互的优点和缺点,并对缺点提供改进方案(社招面试)

34.如果在一个特别庄重严肃的场合,你已经提前把手机调整到静音模式,这时候手机还是特别的响了起来。如果你是手机的交互设计师,你会怎么解决这个问题?(校招面试)

35.地铁有车门和防护屏蔽门两道门,列车进站时先开哪个门后开哪个门?列车出站时先关哪个门后关哪个门?为什么?(社招面试,优酷)

36.从产品经理接到一个需求后,你接下来准备做什么?(社招面试)

37.产品经理和交互设计师有什么不同?(社招面试)

38.接到多个需求后,你是怎么分配这些需求的优先级(社招面试)

39.互联网公司交互设计师的价值是什么?如何体现和增强交互设计师的价值?(社招面试)

40.系统介绍一下你目前公司的设计流程是怎么样的?(社招面试)

41.你最近在读或者读过哪些设计类书籍、博客、关注哪些设计资源?(社招面试)

42.你是否了解最小可行性产品(MVP)?(社招面试)

43.你的老板给你说想重新改版首页(或APP)并让你给一个设计稿,你会马上问他哪几个问题?(社招面试)

44.什么情况下,你会使用可用性测试?(社招面试)

45.你如何确定你的设计已经‘搞定’了?(社招面试)

46.在你完成线框图后,你怎么和开发人员讨论(开发人员可能没有设计基础)?(社招面试)

47.分享一个你失败的项目,你从中学到了什么?(社招面试)

48.你有反对过什么产品需求吗?另外,如果产品经理只是告诉你要做什么,但不告诉你目的和预算,你会怎么解决这个问题?(社招面试)

49.你更喜欢瀑布流还是敏捷开发过程?为什么?(社招面试)

50.六种水果 ,用户可以多选水果,有几种交互组件形式可以实现?
如果是100种水果,实现多选功能,用以上哪一种交互组件形式 所占屏幕空间最小?
(社招面试)

51.移动端:一个Search Input 实现可以搜索 客户姓名、订单号、客户手机 如何设计相关组件和前后流程(社招面试)

52.设计一个地图APP离线下载的交互界面,此流程中可能报错的情景有哪些?(校招笔试)

53.如何看待拟物化设计和扁平化设计?(校招笔试)

54.有一台能制作各种化式咖啡的自动售卖机,设计一款app应用,可以在附近点单,然后以app为凭证去机器取走咖啡。分析目标用户的常见使用场景,总结方案设计的要点。形式不限。
设计app的信息结构和主要流程界面,并阐述重要的设计细节和为什么这么做。 请提交流程图、界面草图和简单说明来描述你的方案,充分、精确、简要为佳。(校招笔试)

55.一、背景说明:
移动互联网高速发展,很多新产品直接以手机登移动平台进行切入并提供便捷的服务,快速满足用户需求。
思考如下场景,在城市核心地段,某餐厅用餐高峰时,就餐人员较多,服务人员压力较大,无法及时帮助就餐客户进行点餐服务。请设计一款供该餐厅使用的APP,用户可以通过此应用快速解决点餐的需求并缓解服务员人手不够的压力。
二、题目要求:
1.请设计一款移动APP,用户通过扫描二维码,可以下载此应用并且进行点餐的操作。
2.具体要求:
针对以上场景,思考用户快速点餐的需求,并完成手机端APP的设计。
分析商家应如何对用户的点餐的需求进行管理并进行后台的界面流程设计。
用户易用,店方易管理。
从案例中引申或补全的用户需求。
3.终端要求:手机/电脑
三、答题要求:
1.请用思维导图工具或收回的方式表达你的方案思路;
2.分析出用户的需求,使用论述,说明或介绍的方式呈现;
3.分析出典型的用户使用场景,使用手绘稿或故事版的形式呈现并加以说明;
4.使用制图软件导出流程图、界面线框图;
5.论述、介绍、说明以精炼、准确、易懂为佳;
6.请用ppt或pdf格式制作
(校招笔试,网易)

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

57.背景说明:用户购买了一款摄像头监控设备,需要将其绑定到易信帐号(一款移动通讯社交软件),激活一个远程监视操控的功能模块,这样就可以用手机控制和查看摄像头了。我们需要设计这个绑定的交互过程。 环境、设备与限制:
a、 安装环境是家里,具有宽带路由器wifi环境;
b、 摄像头设备具有wifi热点功能,可以让其他设备连接该热点,并对其进行设置;
c、 摄像头在设置了家里wifi的用户名、密码之后,也可以连接到家里的无线网络,与网络上的其他设备传输信息;
d、 手机已经安装了易信软件,已经登录了自己的帐号,并且可以使用大部分的手机传感器,例如摄像头(扫一扫)等。
题目要求:
1) 分析
尝试分析可能的交互流程,不仅是易信软件中的,包括手机和摄像头的互动等,从用户拆封摄像头到完成连接绑定为止。要求:详细分析不同可能的流程中,用户认知、习惯、理解和操作上的难点,从用户的观点发现设计的重点难点。
2) 方案
根据以上描述和你的分析,给出你的设计方案,流程图和每个场景或者界面的示意图,并且对上一题中发现的问题进行针对性设计。
(校招笔试,网易)

58.背景说明:微信作为国内最热的移动应用,满足了用户之间沟通,朋友圈交流,资讯订阅等需求,2014年春节的红包发送,引爆一时。现在我的钱包模块集合了众多便捷消费服务。
题目要求:
1) 试论述你对微信红包成功的理念和意义;
2) 阐述你对我的钱包模块设计上的看法;
3) 如果必要,可以提供你对该模块更加合理的方案示意。
(校招笔试)

59.背景说明:移动互联网快速发展,很多新产品直接以手机等移动平台快速切入,引起爆点。Instagram、Snapchat、脸萌等,这些产品都以某一类用户在一定的场景下的需求为切入点。
题目要求:
1) 针对手机平台,设定某一类用户,在某种场景下的需求痛点,设计一款产品;
2) 绘制该产品的信息路径图,并对关键界面进行设计及说明。
方向选取案例:上班族(用户)在地铁上(场景)方便快速读取(痛点)新闻类的产品。 结果:一款集合推送,时间订阅,语音读取的全新产品。
(校招笔试)

60.有用户提出反馈“搜索结果页面,需要将页面拖放到最底才可点击下一页,可否实现翻页置顶或自动反应功能”,如何处理这个问题。(校招笔试)

61.请概述你在进行交互设计时通常会考虑的异常情况?(社招笔试)

62.用思维导图的方式总结出iOS和Android的控件和使用场景。(社招笔试)

63.列举一个认为最好的通讯类APP,分析其用户类型、核心任务、核心页面、并找到你觉得最大的设计问题,结合图文给出设计方案。(社招笔试)

64.列举你阅读过的用户体验方面的书籍,说说从中有什么收获。(社招笔试)

65.在社交软件中,如facebook、twitter、google+等,通常将消息通知放在底部标签栏,并且通常在浏览的主界面还有一些交互补偿,如出现“你有新动态”的提示等;而在社交通讯类软件说,如微信、what’sapp、line等,消息通知则显示在页面列表内,请分析他们可能的背景和设计想要达成的目标、并对比消息通知的内容类型及设计的优缺点。(校招笔试)

66.请列举一个你认为时下最具有商业价值的技术(比如AR、Li-Fi等),并阐释你对该技术的理解。作为一名设计师,你会基于该技术,设计一款怎样的产品?你又如何在产品体验、人机交互等方面上做到极致?建议交付物:故事版、流程图、关键界面图、功能列表、核心任务体验地图。(校招笔试)

67.智能家居围绕着人们实际的生活场景提供了一系列实用有趣的智能设备和解决方案,iOS和Android也在系统层面加强了对智能家居的支持。淘宝或支付宝App作为这两个平台上重要的生活助手,在智能家居生态中可以发挥什么作用?请结合实际的生活场景,畅想一种概念设计,并分析可能存在的商业机会。(校招笔试)

68.背景说明:服务遍布在生活中的每一个角落:餐馆、酒店、公共场所、商店、银行、保险公司、文化机构、大学、机场、公共交通……随着社会的发展,人们从来没有像现在这样关注他们所接受的服务,而服务设计也因此走进了人们的视线。
题目要求:
A )请描述一下你理解的服务设计是什么?
B )你觉得服务设计在中国的现状如何?请举一个例子简要描述一个服务场景/流程的优点或者去缺点
C )请针对于上题中列举的服务场景给出你的优化方案,可以用文字/图示/等方式进行阐述说明,重点陈述流程与优化点。(校招笔试)

69.背景说明:随着智能可穿戴设备的日益流行,越来越多的交互反馈不仅体现在视觉层面,更体现为触觉听觉等多元形式。
题目要求:
A )请描述一个利用非视觉反馈方式(如震动、语音、音效等)的典型使用场景。
B )分析在该场景下利用非视觉反馈方式的优势。
C )有一种观点是:未来的人机交互不需要UI,你是否认同?请简要阐述你的观点并说明原因。

70.请参考网易手游或端游的充值流程,发挥想象力设计一套令用户惊喜的充值方式,同时要求能快捷便利的完成充值。请附上流程说明及交互示意简图。请大开脑动,撇开技术限制。期待你满满的创意!(校招笔试,网易)

71.背景说明:浏览器作为PC最常用的软件,满足了用户大多数的上网场景。
题目要求:
1.分析主流PC浏览器的设计(三款以上)
2.设计一款浏览器的主页,并提供思路
3.谈谈你的未来浏览器的见解。
(校招笔试,迅雷)

72.项目背景:迅雷9为了方便用户获取内容以及商业化发展,上线了浏览器内嵌的右侧首页。
题目要求:
1.谈谈你对现迅雷9右侧的看法。
2.提供一个你觉得合理的右侧方案:包含分析过程,首页及关联页面原型。(尽管确保用户体验与商业价值的平衡)
(校招笔试,迅雷)

73.背景说明:海外游日益火爆,对于计划到海外旅游的用户,需要通过地图了解和查询海外当地吃喝玩乐住等信息,以便更好的制定出游计划;并且到了当地之后也会借助地图寻找感兴趣的地方。
假如现在需要设计一个专门针对海外游用户的地图功能,以更好满足海外游用户查询吃喝玩乐等需求,你会如何设计?
题目要求:
1)列举你所认为的海外游地图需要实现的核心功能
2)给出设计的详细分析过程
3)表达用户主要任务的操作流程
4)绘制关键界面的示意图
(校招笔试,大众点评)

74.有一台能制作格式花式咖啡的自动售卖机,设计一款app应用,可以在附近点单,然后以app为凭证去机器取走咖啡。分析目标用户的常用使用场景,总结方案设计的要点。形式不限。
设计app的信息结构和主要流程界面,并阐述重要的设计细节和为什么这么做。请提交流程设计图、界面草图和简单说明来描述你的方案,充分、精确、简要为佳。
(校招笔试,网易)

75.背景说明:如图所示,在现有大众点评APP给商户添加点评功能中,默认不展示口味、环境、服务的打分选择,只有在选择总星级评分后,页面上才会展示细分项,再继续选择;而不是一开始就展示所有的打分项。

题目要求:
1)对现有解决方案进行评述
2)尝试新的解决方案,如有必要,请绘制交互过程中主要环节的示意图
(校招笔试,大众点评)

76.背景说明:超市会有五彩斑斓的促销推荐,繁多的超市商品信息,相信对很多人来说,都难以快速找到商品。请你以零售商和顾客设计一个选购平台app,使商家促销和顾客选购取得双赢,室内导航定位的发展,可为本次设计提供参考。
题目要求:
1)简单描述用户遇到的关键问题,并列出你的设计目标。
2)简述用户的使用场景或者操作流程。
3)绘制解决此设计问题的关键用户界面示意图。
(校招笔试,腾讯)

77.用户之前是【手机+验证短信】登录,现在用户期望今后以【手机+密码】登录,如何设计登录界面?(社招笔试)

78.Lofter、简书等内容型社交平台上的用户可以分成几类?(校招面试,网易)

79.你觉得自己做得最好的项目是哪个?它的目标是什么?中间遇到什么问题,如何解决?你自己的设计方法论是什么?(社招面试,腾讯)

交互设计名词解释

  写这篇文章的目的主要是在阿里的模拟笔试中我发现自己对一些交互设计的专业术语还不是很熟悉,所以写一篇文章用来学习记录一下。
  笔试中提到的交互术语主要有:故事版、流程图、关键界面图、功能列表、核心任务体验地图。

  • 故事版
      故事版比较类似于我平时做动画时候用的分镜头脚本(实际上也不怎么用……),而起到的作用则是类似于人物画像,使用简单的语言描述人物角色、情境及用户使用情景,尽量避免不要给出具体的用户行为和交互动作。
    合理的文字故事板应该注意以下几个方面:
  1. 确定角色,多个角色做多个故事板;
  2. 确定确实必须完成的目标;
  3. 确定故事的出发点或事件;
  4. 明确角色信息及关注点;
  5. 确定故事板的数量,取决于人物角色和目标数量;
  6. 书写故事,从触发到结束;

    事先做好一个表格节省时间。
  • 流程图
      流程图不是一个新术语,这里主要强调一下一定要考虑到所有的情况,流程图的每个节点都是岔路很多的路口,一定要确保清楚所有路口的通往何方。然后在OmniGraffle里面放一些常用的形状,以节省时间。另外强烈安利OmniGraffle这个软件,画流程图简直太好用了,拖动形状能保持线条链接这个就不说了,还能根据形状一键选择,画完之后给不同的形状染上不同的颜色岂不是美滋滋。没有用过Axure,不清楚AXURE的流程图功能。

  • 关键界面图
      这个没什么解释的……我觉得每个界面大概画一下大致位置关系吧,用OmniGraffle,花个2分钟。

  • 功能列表
      直觉告诉我并不是use case,因为太费时间了,大致看了网上的文章,感觉就是之前做的的信息架构,到时候我对一些比较难以理解的点稍微写一下解释好了。工具的话觉得百度脑图比较合适。   
  • 核心任务体验地图
      用户体验地图的组成要素:
  1. 用户画像 persona
  2. 时间维度 time
  3. 情景任务 task
  4. 用户行为 touchpoint (user action)
  5. 用户情感水平 user emotion level
  6. 问题和惊喜 question&surprise
  7. 解决方案/产品功能 product feature
    感觉太复杂了……如果不是必要交付的话就不交付了,虽然只用给出核心任务的体验地图,但是这个更多的还是用在产品稳定期的吧。

简历

从原来的性冷淡风格变成了五彩斑斓的MG动画风格,也算是定下自己以后的设计风格吧。
简历

三星S助手改版建议

1.FAB改进

FAB原版新版对比图
  FAB的用法在Google官方所给的设计规范里规定好了,而且还是专门的一个章节。FAB的全称叫做Floating Action Button。
这是Google对FAB拓展按钮的说明

The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.

  当然Google也提供了另外一种展开方式

The floating action button can transform into a single sheet of material which contains all the actions.

  这里我选择了第一种,因为第一种的动效比较好做,等我有空的时候再试试第二种。

2.天气卡片改进

天气卡片对比
  原版的天气卡片存在一些问题:文字缺乏组织,看起来不规整;天气数字太过纤细;以上两个问题导致卡片上半部分重心偏左;下方天气列表图标夹在两个文字中间显得较为局促;更新按钮后面文字太多,信息冗余。
  所以我将信息重新组织,提升了展示效果。

3.空气质量卡片改进


  原版空白实在太大‘单独一个空气质量(优)浮在空中实在太过单薄;PM2.5作为一个重要参数只是在左下角小小的出现,与整体卡片闲的格格不入;余下地点信息、刷新文字与天气卡片改进同理。
  仪表盘的设计在很多天气应用上都有见到过,所以也就这么设计了。不过在过程中倒是碰到些难题,sketch不能像PS一样很精确的控制锚点的位置或是画出任意精确的角度,所以那个空气质量的40度一格的2/3标尺挺难的。

一些游戏开发设想

最近和同学参加了一个游戏设计比赛,这里放上一些开脑洞的想法。

单车Crash

  • 游戏类别:竞技类游戏
  • 游戏视角:第三人称俯视
  • 游戏玩法:

    1. 碰碰车玩家操纵单车与其他单车碰撞,碰撞产生分数奖励并对其他玩家造成单车耐久度上的损害,碰撞单车的不同位置可以产生不同的效果,侧面碰撞伤害加成50%,背面碰撞伤害加成20%。
      游戏的地图中会有一些机关能对战局造成影响,例如减速区域、火焰区域、加速区域、隐形区域等,玩家可以灵活利用地形以获得优势。
      选择不同的单车还会有不同的单车技能,例如选择小红车可以使自己的耐久度增加10%,冲刺时造成的伤害更大等等类似。
      地图中会不定期刷出战斗用道具,使用道具可以获得增益效果或使得对手获得减益效果。
    2. 占地为王玩家操纵单车在地图中行驶,玩家行驶过的格子会被染成相对应的颜色,倒计时结束时地图中颜色最多的那一个玩家获胜。在游戏中玩家之间可以互相撞击,类似碰碰车模式,不同的是玩家损耗度如果满了则会昏迷8s,同时丢失最近的一个格子(重新成为无人占领状态)
      PS:这个模式还可以尝试线下玩法,借助现实中的共享单车的定位功能,在规定时间内占领街道多的玩家则获胜。
    3. 生死时速类似常见的赛车游戏,不过融入了自行车的一些特性。举个例子,变档:自行车赛车有体力限制,在体力允许的情况下,玩家可以选择冲刺,冲刺时间速度增加,体力消耗完毕仍旧可以冲刺,但是车辆耐久度快速下降。正常行驶时体力会慢慢恢复。除此之外上坡会少量减少体力。用户选择低档可以稍微延长冲刺时间,同时上坡所需要的额外体力消耗减少。用户选择高档,冲刺时间大幅减少,冲刺距离增加,撞人造成的少还增加,车辆会变得极难上坡,上坡会造成车辆耐久度的损耗。
  • 运营玩法
    游戏每次开局需要消耗车辆,车辆数量可以通过时间慢慢恢复,或者通过RMB购买,或者通过骑行相对应的共享单车来获得。


二向纪元

  • 游戏类别:横版射击竞技游戏
  • 背景故事(看看就好):故事发生在很久远的未来。

    有句话说,越是先进的战争,越比我们现在所能想象到的战争要快得多。公元6666年,太阳系不幸的成为了两个超级文明的战斗的中间地带,而当有一方处于劣势,意图全面撤离战场的时候,为了防止优势文明的穷追不舍,劣势文明立刻将太阳系及其所在恒星链全面二向化,用维度的围墙阻止了优势文明的进一步追击。地球文明来不及反应,只能匆忙将逃生火箭射向太空,带着仅存的人类火种,希望能在另一个星球上延续文明。

    公元7654年,已经移民外星球的新人类派出了一只精英队伍,前往已经被二向化的太阳系旧址,力图找回几百年前出逃时无法带走的人类文明,为了应对尚不清楚的危险,这只队伍里的人都分别具有一些特殊的才能,他们也带有能够使自己全面二向化的特殊装备,已经做好了踏入未知维度的全面准备。

    但是,从三维踏入二维会造成二维空间的不稳定,这对当时依靠维度技术防御优势文明的劣势文明是非常不利的,因此劣势文明不允许地球文明频繁穿越太阳系这块空间,所以他们雇佣了宇宙中的赏金猎人,来阻止地球文明。

    两方势力都没有想到的是,多年前太阳系的二向化,没有杀死地球上的所有生物,有一些生物依靠着自身强大的适应性,在二维中进化成了全新的物种,依靠着旧人类留下的科学技术,这个相对野蛮的物种成为了二向地球的新主人。

    三方势力集合在地球旧址,故事也从这里开始。

  • 游戏玩法:玩家通过操纵不同特色的角色,在一定空间内互相攻击。左手控制人物移动,右手控制设计方向及技能。
  • 人物设计:

    1. 刺客该隐:武器为苦无(飞镖),伤害中等,无击退效果。被动技能:二段跳,连续移动速度逐渐增加,至多150%,从背后攻击敌人伤害加倍。小技能:毒镖,向八个方向射出毒镖,毒镖即中敌人后造成流血效果。大技能:无影杀,隐身,跳跃高度增加,二段跳后可接滑翔,在地面移动速度减慢,持续十秒。
    2. 狙击手张三:武器是狙击步枪,伤害高,击退效果较强。被动技能:视野扩大20%,武器具有穿墙效果,穿墙后伤害减少一半。小技能:燃烧弹,向脚下投掷燃烧弹,火焰会向平台两边扩散,并附有较弱击退效果。大技能:弹无虚发,张三可飞到空中任意位置,并取消子弹的穿墙减伤,攻击速度增加。
    3. 弓箭手OD:武器为弓箭,伤害高,击退效果中等。被动技能:被击中的敌人会在一定时间内获得一个“中箭”效果,如果OD击中了带有中箭效果的敌人,则会额外造成50%伤害。小技能:倒刺箭,击中敌人之后将敌人拉至自己身边,敌人可以选择相反方向挣扎已脱离倒刺,不过会受到不小的伤害。大技能,凤凰:射出一只凤凰之箭,凤凰之箭飞行一段距离之后爆炸,在圆形范围内造成火焰伤害,可提前引爆。
    4. 战士麦德勒:武器为战斧,伤害中等,击退效果强。被动技能:缓慢恢复生命,如果保持一定时间内静止则快速恢复生命,静止时受到伤害减少20%。小技能,升龙斧:将敌人击飞至空中,同时恢复伤害40%的血量。大技能,七重:向前上方冲刺,如果遇见敌人则开启七招连招,第七招造成巨大伤害,第三招以后的攻击可以被其他伤害打断。
    5. 术士亚当:武器为双手,伤害较低,无击退效果。被动技能:攻击造成减速,减速效果可最多叠加三层。小技能:冰龙,可穿墙,对接触到的敌人造成强烈的击退效果,对接触到的友军减少技能一半的CD。大技能:傀儡,选中场上的任意队友,在其位置制造出另外三个复制人持续五秒,复制人与本体行为一致,伤害减半,复制人受到的伤害不会影响本体。

动效是对于行为的设计

我们平时所说的UI设计,大多数指的都是对整个应用程序界面的设计,所呈现的信息是静态的,这样子的设计是对于“状态”的设计。设计师们去设计每个页面的不同的状态,然后呈现给用户。而触发状态的操作就被称作行为,动效设计师就是通过动画效果去引导、响应用户的行为,联系界面之间的元素,从而在用户的交互行为上提升用户的体验。
  前段时间看到了国外medium上面的一片关于动效设计原则的文章,写作者是一位在五年时间内为四十多个国家和上百个顶尖机构提供咨询服务的动效设计师。文章总结了一些利用动效设计去提升用户体验的设计原则,一共总结了十二条原则。相较于Google与苹果提供的动效设计规范,这篇文章更为精炼,所提出的规则也更为普适,下面我就分别介绍一下这十二条设计规范。

  image

1. 原则1:缓动

  所有展示时效行为的界面元素(无论即时还是非即时),都需要缓动。缓动可以加强体验中的自然感,并创造出符合用户预期的连续性。   

2. 原则2:偏移与延迟

  让用户在看清楚之前,就感受到眼前的东西是什么,它们之间是如何区分的。这种功能非常有帮助。在用户看清楚出现的元素之前,设计师已经通过这种时间上的差别说明了元素之间的分离关系,而无需通过视觉上的强烈对比来向用户介绍界面上的元素。

3. 原则3:父子关系

  这个概念我第一次接触是在AE——一款影视特效制作软件中,大致的概念就是子对象跟随父对象变化,共享包括缩放、位置、不透明度之间的属性。父子关系常用来表示两个对象之间的关系,以增强可用性。例如,当用户操作一个元素的时候,另一个元素也跟随着用户的操作而变化,用户会知道这两个元素是关联在一起的。通过父子元素属性之间不同的响应关系,父子关系的动效被分成了“直接继承”、“延迟继承”、“逆向继承”

4. 原则4:形变

  形变的效果应该算是动效里面最容易被识别的一种了,毕竟一个正方形变成了一个圆形这样的,傻子都能看的出来,实在是太引人注目了。形变对于用户体验提升的作用是在一个元素功能发生改变的时候,利用连贯的状态的改变抓住用户的注意力,使得这个元素的内涵更好的被用户感知与记忆。

5. 原则5:值变

  值变顾名思义,就是数字与文本的的改变,而且是动态的改变。比如说,如果一个值是直接进行改变,那么用户无法体会到数值的动态特征,无法明确体会到这个值变化背后的含义。速度数值的快速变化让用户和这个速度直接建立起了关系,设计师不是直接抛出一个数字给用户去感受,而是让这个值以它特有的特征去展示给用户看。

6. 原则6:遮罩

  遮罩的概念类似与PS中的蒙版。不同于静态设计中遮罩是用于辅助设计的,在动效设计中遮罩的变化配合背景的运动,既没有让用户丢失视觉上的焦点,也让app状态的改变变得更加的流畅自然。在不改变元素内容的情况下,通过遮罩来改变元素本身,是相当不错的动效设计技巧。

7. 原则7:覆盖

  用堆叠元素的相对位置来描述他们的扁平空间关系。在iOS 7推行扁平化设计后,元素之间的相对关系变得有些模糊,如果设计师的功力不强,有些用户会分不清元素之间的层级关系。Google的MD对此的解决方法是用带有Z轴的卡片作为内容的载体,卡片的阴影作为层级之间的区别。动效设计的这条原则则是使用了层级之间的覆盖向用户传递了元素之间的Z轴关系。

8. 原则8:复制

  当新的元素从已有元素复制出来时,用连贯的方式。
  当新元素从现有的元素上被创造出来的时候,设计师首先需让用户感知到有“生产”这个变化的发生,其次需要将用户的焦点从现有元素转椅到新元素上。所以这就需要已有元素的动画(吸引注意力),新元素更强烈的复制动画(转移焦点)

9. 原则9:景深

  允许用户瞥得到非主要元素或场景。
  iOS中又一个可以算是苹果标志性的元素,也就是毛玻璃。利用毛玻璃这个元素,用户既可以把焦点放在毛玻璃上,同时也能看到这一层级下面的元素。(实际上毛玻璃最先被用于微软的Vista系统,最新的流畅设计体系也有对于景深的运用,不过被官方称作亚克力,虽然感觉效果差不多)
  与遮罩元素相同,景深也是可静可动的,设计师可以使用景深原则来在用户体验中提供一个全局或客观的视图。

10. 原则10:视差

  “视差”在动效体验原则中描述的是界面元素以不同的速度运动。
  在保留设计完整性的前提下,视差原则有利于让用户聚焦于主要操作和内容。一般来说,两个速度相同的物体,靠近自己的那一个运动的快一点,远离自己的那一个运动的慢一点,设计师可以利用这个现象来提醒用户界面中什么元素比较重要需要用户产生交互。不同于景深,视差不需要刻意去遮挡背景元素,并且获得超越平面设计的层次感。

11. 原则11:翻转

  通过具有空间架构的描述方式来表现新元素的产生与离场。
  用户体验的关键在于连续性和对元素的掌控度。界面上的一个元素,突然凭空消失了,这算怎么回事呢?焦点的突然丢失,会带来体验上的慌张感,这时候就需要翻转来进行元素缓慢的离场。翻转又分为三种:折叠翻转、浮动翻转、对象翻转。

12. 原则12:滑动变焦

  用连续的空间描述来引导界面元素和空间
  (感觉是个炫技的动效,比较全局,适合于app间转场,不适合界面的局部动效)
  然后我仔细看了一下他所给出的动效设计的例子,对于这些原则,前十条我的确是挺赞同的,后面的翻转和滑动变焦则有些不赞同。元素翻转我除了在Flipboard红版报,在其他的app中还真的没有看到过。而Flipboard也是为了更加模拟出杂志翻页时的效果,暂时也没看出来还有什么其他的交互上的考虑,所以翻转这点我持保留态度。治愈原则12,同样我除了在iOS的解锁动画上看过,也没有在其他地方碰到(且那个效果在iOS 7刚出来的时候,也有用户投诉说太炫了造成不适感)。感觉除了营造空间感之外也没有什么作用。

来说一说实习的两家公司的区别

  也在三星呆了一个礼拜了,这个礼拜主要的工作就是画了一个三星S助手做活动所需要的html界面,本来的话是两天左右的工作量,但是三星的手续特别的复杂,笔记本需要装好安保软件,浏览器需要配置代理,然后就算一切都搞好了能够上的网站也有限,百度网盘之类的云存储就不用想了(顺带一提,三星出入不能携带储存设备,手机需要遮挡摄像头,出入都要安检),即便是日常使用的素材、软件网站也没有办法正常访问。软件是只能使用正版,而且需要向公司提交申请。
  然后因为我用的是mac,没有安保软件,所以也要向上面申请一下不装安保软件上网。申请的邮件还是韩文的,貌似直接发送到韩国总部,除了中文其他都没看懂。
  貌似小米是没有那么多规矩,最多也就是一个公司内网不允许外部访问需要搭建vpn(废话),其他的和你自己买个笔记本办公没什么区别,听到过最严的规矩也就是泄露未发布手机谍照要罚款100万。
  然后在小米内部工作的确很自在,公司有个论坛,还有个类似朋友圈的东西,还有跳蚤街,各种各样的俱乐部,三星就没有那么多好玩的东西。估计这也是互联网公司和传统企业的区别吧,三星虽然手机做的很好,但是和华为一样,都是传统企业起家,互联网思维和正统的互联网企业相比差了不少。
  我在三星做的项目是S助手,是一个三星手机上的聚合类生活应用,在公司里隶属于终端创新Lab。有趣的是我们部门的老大一直都在向我打听小米生活的事情,不过这个真的是不太熟。话说回来三星的S助手占据了整个手机的高频入口——通过长按home就能进入,甚至在桌面都没有独立的app。在其他手机上这个操作通常是唤起语音助手,或者是进入多任务管理界面,把一个app的入口放在长按home键的,说实话我还真没有想起其他手机厂商。
  但是这个app的质量呢,说实话没有我想象中的那么高。app做了机型锁定,所以除了三星手机之外其他手机没办法锁定,暂时还没试过改配置文件的方法,以后有机会试一试。体验过这个app之后,我的第一印象是这个app功能很全面,基本可以满足生活中的所有需求,但是问题是,满足的那些需求,广度很广,但是深度欠缺。而从app的设计来说,整个app也没有一个统一的设计语言,更不要提和系统的融合了,小米在这方面做得就不错,就算小米系的应用多种多样,但是设计的语言大多遵循MIUI的Design,所以少有割裂感。
  突然想不出啥能写的了,就不写了。

两个人物小动画

第一个动画是我很喜欢的一个妹子,我给她设计了这个卡通形象,然后做成了动画。

第二个动画是一个朋友的头像,他自己画的,我觉得很好玩就把他搞成动画动起来了。