2021 UCan 记录

  这次在去往 UCan 之前呢,心里带着一些对设计的疑问。因为自己从事设计这门行业也有快三年的时间了,而之前不论是正式工作还是实习,一直没有跳出手机这个行业。所以有时候也会非常好奇,其他行业的设计是什么样的。因为在我理解中,设计不仅仅是一种行业,而更像是一种有一定特征的思考方式。尤其,像我是除了设计之外还懂一些些代码,就很明显的的感受到 Designer 与 Coder 之前的思维方式的不同。

阅读更多

关于 Android R 的第一印象

前段时间发了谷歌发了个 Android R 的开发者预览版,本来想下下来刷个机体验下,不过手头上的 pixel 3a 不知道为什么一直不成功,所以就只能拿虚拟机试试看。用虚拟机对着官网上的新特性一个个试试,再结合外网媒体的一些资料,大概比较全面地总结了一些我能看懂的 Android R 新特性。

阅读更多

每个设计师都应该会的 Mac 端 adb 安装教程

adb,全称“Android Debug Bridge”,直译为 Android 调试桥,不仅可用来调试 Android 应用,平时在安装、卸载一些系统核心应用的时候也需要用到,这篇文章就是教如何在 Mac 下安装这个神奇的工具的。

阅读更多

全面屏人机交互更新

全面屏时代,手机形态有了不小的变化,主要的变化是屏幕上下边框的收窄,次要变化是多形态手机正面屏幕的出现(例如刘海、水滴、升降、挖孔、未来还可能有屏下摄像头),因此交互上需要有些小调整。这个系列属于想到什么写什么。

  首先可以先看下非全面屏与全面屏手机的对比,这里以魅族 15和OPPO Reno为例。
  魅族 15(左) OPPO Reno(右)
  全面屏往往会因为内部元件排布与手机美观程度的原因,将机身拉长,最长预计会停留在21:9这么一个长度。可以看到,对于同样大小的手掌来说,全面屏手机大拇指的活动范围更受局限,这带来两个问题:

  1. 拇指更不容易够到顶部,不仅是斜对角难以碰触,同边的上方也难以精确点击。
  2. 在底部空间操作进行细微操作时,手机重心可能离开手掌,增加手机坠落风险。

  三星的 OneUI 在第一点问题上是提出了一个全局性的解决方案的,即将操作部分移动至下半屏,上半屏仅展示用。只是,对于上半屏,三星仅用了大字号占用上半屏,全面屏带来的更多视野反而被压缩了。
  我的修改意见是,对于难以描述的功能页面,需要附加图形或动画描述的,增加了统一的描述图形并控制高度,由此将操作按钮等下移,下移至适合拇指操作的区域。同时在底部对页面功能进行说明,由此留出底部空间,避免手指移动过下。
  调整至此,又出现了什么问题呢?做出原型后发现,对于一些比较拗口的功能,且功能项较长,将说明放置在页面底部,用户新进入页面的时候容易忽视功能说明而进行误操作。解决这个问题的方式一方面对页面逻辑做好容错操作,一方面对于实在重要的功能,在图形描述区下增加文字描述,仅对容易理解的功能或对功能无关紧要的描述,可以将描述放置在页面下方。

个人交互设计常用软件整理

Sketch 小巧而强大的UI设计工具

  严格来说,sketch并不能算是原型设计工具,而是一个强大的UI设计工具,操作者可以使用该软件设计出精美的UI界面,更可以方便的将设计资源导出成客户端开发所需的切图素材。
  因为是一个UI设计软件,所以sketch并不提供基础的页面跳转等原型设计所需的功能。但是sketch拥有强大的插件功能,借助一些插件例如“Craft”,sketch也能实现基础的页面跳转,按钮互动等原型设计所需的功能。
  sketch尽管不是传统意义上的设计软件,但由于其操作上的简单迅速视觉效果好,同时和开发软件(Xcode、Android Studio等)协作较好,所以是我个人最常用的设计软件。当然在原型部分我则是用插件,以流程图的形式标注出来,或是在其他软件中再次加工。
  

OmniGraffle 交互原型文档制作

  对于原型的设计,光给出图片与原型成品是不够的,所谓交互文档就是需要对产品的细节部分给出具体的说明,例如对按钮状态的说明,对页面loading状态的说明等。
  OmniGraffle是一个很好的标注软件,我时常用来制作产品的用例图、线框图等。同时在Sketch中完成高保真原型设计后,也会导入到OmniGraffle中进行原型细节的标注。
     

Principle 动效设计软件

  一个轻量级的动效设计软件,可快速实现较复杂的交互动效。更加重要的是他和Sketch几乎可以做到无缝衔接,如果觉得Sketch+插件无法满足炫酷的高保真原型设计的话,可以试试Sketch+Principe的组合。
  不过我不怎么用了,有点代码基础直接在开发工具里实现更加快,更重要的是,做完了可以直接用。

After Effect 复杂动效设计

  对于简单的动效,直接在开发工具中实现,而复杂一些的动效就要借助专业工具AE了。AE是用来做专业的影视特效的,用来做动画效果当然是绰绰有余,但是相对其他软件来说,AE的学习成本也相当之高,建议初学者还是先不要尝试。

主流私人云存储服务产品体验分析报告

  这里比较的三款是百度网盘、腾讯微云、Dropbox,其中Dropbox因为某些不可描述的原因,无非在中国境内使用。比较使用的均为腾讯应用宝内最新版本。

多角度对产品整体进行分析

目标用户

  由于Dropbox的特殊性,暂时先讨论百度与微云的用户

  在份额上面,百度网盘占据了绝对的优势并形成了规模效应。同时,在360宣布退出个人网盘行业后,微云实际上已经成为了中国网盘市场的第二名,当然与第一名相比差距依然巨大。
  至于两个网盘的目标用户:
  首先这是百度网盘的现有用户画像

  百度网盘的现有用户多为处于一二线城市的年轻商务人群,但由于百度以接近垄断的份额存在于网盘市场,接下来的目标用户应该是其他网盘的使用人群。其中,360云盘因为一些变故,原有的大量用户被迫寻找新的替代产品。因此,百度现在的目标用户应该是360的原有用户群体,有大量存储需求的个人、企业用户
  
  微云:在网络上并没有发现较多的微云用户分析。但是从微云的推广渠道来看,微云面向的用户主要是腾讯产品的重度使用用户,为自家产品的用户提供一个文件的临时存储空间,因此和腾讯产品的主要使用用户是有高度相似的
  那么最后再来说一下Dropbox,Dropbox是国外最常用的网盘工具,国内用户相对较少,用户多为对上传内容有安全性需求、同时具有一定购买力的商务人士。   

###核心功能

以移动客户端为例。
百度网盘除了正常的云存储功能以外还提供:

其中,高频功能为“手机备份”、“离线下载”、“闪电互传”、“数据线”等

腾讯微云:
微云没有那么多的功能,除了基本的存储,特色功能应该是“笔记”以及良好的照片管理。

Dropbox:
很纯粹的云盘工具,除了云存储功能没有其他核心功能。

运营策略

百度网盘的卖点在“分享”,相较于其他网盘,百度网盘将他自己的社交属性发挥到了极致,群组、通讯看吧的加入,让好友间互传文件变得十分容易。百度一直都在围绕着社交属性做网盘,也是如此方便的分享功能,让几年前百度在和360之间的云盘之争中胜出。
微云的运营策略的简单很多,近段时间几乎没有见过微云做过什么宣传。在云盘容量,下载上传速度上也没有什么优势,今年更新频率明显下降了很多(最近一次更新是在8月22日),在腾讯内部应该属于边缘化的产品,主要给结合其他的app给腾讯用户提供更好的用户体验(例如QQ浏览器的离线下载功能)
Dropbox在国外面临着onedrive、iCloud等垄断厂商的压力,除了将自身的用户体验做到极致以外,他在近期重点在推Dropbox Business与Dropbox Paper功能,前者面向企业提供安全的云盘服务,后者提供高质量的云文档编辑。应该是国外个人云盘市场趋于饱和,所以Dropbox在近几年都会面向企业提供服务。

使用场景

使用场景这个每个人都有不同的使用方法,实在是不好说什么。
对于我来说,百度网盘用于下载网上的文件,良好的分享体验让下载变得更加容易。
腾讯微云用于临时保存腾讯系应用的文件,例如浏览器与QQ之间的文件互通。
Dropbox用于提供自己重要文件的保存,在360事件之后很难再信任国内网盘,同时国内的隐私政策也很难让人放心。

三个产品在上传、共享、下载中的亮点

首先给出百度网盘这三个操作的流程图

然后是微云

最后是Dropbox

三家在便捷性上都做的很好,三步之内基本都能解决这些主要的操作。
然后再来分别讲一讲三家的设计亮点。
  首先是百度的,之前说过,百度的分享功能很棒。好友分享可以直接实现在百度网盘内部联系人的资源共享,简直就是卖片神器;同时分享界面很贴心的增加了一个文件分享有效期的操作,对于社交+工具的百度网盘来说,成千上万次的分享中,对私密分享的需求一定很大,因此这个功能很贴心,同时,PC端与网页端也默认提供了密码分享的功能,这都是百度在私密分享中做出的努力。
  然后说微云,微云因为对于上传有大小的限制,因此在上传界面中对用户进行了一个提示。值得注意的是,微云在上传类型中加入了“笔记”、“OCR”等功能,严格来说这已经不是上传了,但是这样的操作十分方便办公人士进行文档的协作。
  Dropbox,国内系的网盘产品其实都差不多,设计特点大同小异,国外的就不一样了。Dropbox Android版(手头暂时没有iOS设备)严格遵循MD规范,将三大操作都集中在了FAB中,因为还有其他功能所以使用sheet展现。在设计中也是遵循精简的设计原则,对于上传界面,甚至直接调用了系统的接口。如果使用的是Android原生系统或者是LineageOS等,那么整个app的视觉与交互会和系统高度统一,降低使用成本。另外,Dropbox相对于以上两家,更像网盘,更纯粹,在下载文件时,没有使用“下载”这个字眼(可能会让人以为这是个下载工具?),而是用一个开关“可以离线访问”来表示,这代表着用户在打开这个开关后,网络允许的条件下,这个文件还是会不断的与服务器交互,保持自身版本的最新,这个对我这样的设计同学来说简直就是良心功能。

小结

  正如我刚刚所说的,我日常用百度下载文件,微云结合腾讯产品使用(也就相当于办公了,比较联系别人用的还是微信),Dropbox存储重要文件,三个软件各有特色。

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

原文链接
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
    感觉太复杂了……如果不是必要交付的话就不交付了,虽然只用给出核心任务的体验地图,但是这个更多的还是用在产品稳定期的吧。

三星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标尺挺难的。

动效是对于行为的设计

我们平时所说的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刚出来的时候,也有用户投诉说太炫了造成不适感)。感觉除了营造空间感之外也没有什么作用。