UI设计面试问题总结

2020-03-04 01:26:01 来源：范文大全收藏下载本文

UI设计

一、什么是UI设计：

UI，顾名思义，User Interface ，UI设计即为用户界面设计。用户界面是用户和设备交互的重要介质。用户界面设计可分为感觉和情感两个层次，其综合了心理学，设计学，语言学等方面的知识。一个产品的UI设计直接关系着用户体验，随着移动设备的发展，用户体验越来越重要。

用户界面设计很大程度上就是在探究如何让产品更具可用性，如何使用户获得更好的体验，使用户能够更快的通过界面操作完成任务获得良好的感觉。

二、UI设计的三大原则：

1、易用性，使用户能够更容易的使用产品，通过界面完成想要做的操作。

2、在界面美观的基础上，减小用户的记忆负担，使用户在使用产品时不用刻意记忆各种功能，可以很舒服的完成操作，从而使用户得到很好的产品体验。

3、界面的一致性。对于产品而言，在功能完备的基础上，界面的美观很重要，美观的界面不仅使产品本身更具魅力，还会给用户带来愉悦的体验。除此之外界面要高度一致，用户使用界面时往往会有惯性思维，UI要保持一致，以免用户思维方向被打乱，影响产品的用户体验。

三、UI设计常见问题

1、要明确自己的用户群，不同的用户阶层对不同的设计元素有不同的理解。所以我们的UI设计要针对自己的用户群设计。

2、要确保UI能够使用户自由掌控自己的浏览行为，要确保用户能从某个点跳出，能够毫无障碍地退出某个界面。

3、尽可能的减少程序中的bug和错误。从而改善用户体验，beat测试是削减错误的最好的方法。

4、将重点放在重要的内容上，将最重要的东西展示给用户，从而使用户更好的理解你的设计。

5、设计要简约。简约的设计可以增强UI的易用性，可 I 让用户不必关心那些没必要的信息。而过于拥挤的页面不管功能多强大都会给用户带来糟糕的用户体验。

6、要有视觉提示。当我们使用了ajax flash等技术时，当内容加载时应当有视觉提示，始终让用户知道目前在做什么。

7、要确保内容清晰，准确，易懂。

8、色彩的使用。色彩是UI的重要元素，不同的颜色代表不同的情绪，色彩的使用应当和站点以及主题相契合。还要考虑特殊人群的感受，有的用户可能是色盲，在色彩使用上要考虑他们的感受。色彩使用要保持一致，一旦选定了某种配色，整个站点一致使用这种配色。

9、良好的结构。在UI设计中各个元素应当放在他们呢该放的位置，总体结构应当清晰，一致，相关关联，那些不相关的东西应当单独放置。

四、交互实例分析

1、Android Wear与Apple Watch 产品交互设计共同点：智能推送，轻量交互，高易读性。 Apple Watch：

1、个人化 (Personal) ：因为手表是最贴近人体、最“无感”的智能设备，因此天然具备充当个人与虚拟世界交互入口的潜质。每当用户抬起手腕的时候，苹果手表能够自动呈现相关信息提醒和个人健康数据。

2、整体性 (Holistic)：从 iPhone5 和 iOS7 开始，苹果开始追求软硬件结合的一体化极致体验。Retina 视网膜屏，浑圆过渡的鹅卵石状外壳，数字表冠 [digital Crown] 和内置的 Taptic 精确震动引擎都是这一理念的在手表上的进一步实践。苹果建议开发者在开发手表 App 时候尽量使用黑色背景，并把 UI 元素尽量布局到屏幕边缘，也是为了从视觉上模糊屏幕软件与表壳硬件之间边界。

3、轻交互 (Lightweight)：苹果认为手表上的交互应该是快速便捷、无需复杂输入和操作的。通过抬起手腕，提醒会自动显示，手腕放下的时候，提醒自动消失，用户无需额外的触摸交互。扫视界面 [Glance] 把所有重要信息集中在一屏之内展示，并提供快速的操作入口以便某些场景下的进一步交互。 Android Wear：

1、自动触发 (Launched automatically): Andorid Wear 可通过识别时间、位置和用户身体状态在最合适的时间通过卡片的形式向用户推送最相关的信息内容。

快速浏览 (Glanceable)：谷歌认为用户在安卓手表上获取信息的体验应该和用传统手表看时间一样优雅和精准，只需要眼角余光一瞥，一切尽在掌握。只有这样，用户才能更快速地回到现实生活中，活在当下，享受生命每一刻。

2、智能推送与搜索 (Suggest and Demand)：基于 Google Now 的引擎，安卓手表力图成为用户最随身的智能助手。谷歌的账号服务系统可以学习用户的喜好，只推送最相关最及时的资讯。只可惜目前谷歌的服务在中国大陆无法使用，大大降低了安卓手表的实用性。

3、零打扰 (Zero or low interaction)：很多时候 Android Wear 会自动识别你的需求，帮你自动输入内容，用户仅需要确认或者取消。UI 元素采用大块点击，大动作滑动和手势识别，并不需要精确的触摸操作歌打了个有趣的比喻，说每次推送消息给用户，就好像现实生活中有人突然拍一下你的肩膀一样，是种很亲密的行为。但如果这样的行为被滥用，用户很快就会厌烦，并且将你抛弃（Android Wear 可以自定义哪些 App 有权限推送消息到手表上）。

UI 交互架构：Android 的“二维卡片” vs 苹果“立体空间” 安卓手表系统的设计风格延续了谷歌 Material Design 的原则，色彩鲜明细腻，强调卡片式的交互结构。安卓系统采用情景式卡片 [Contextual Cards] 推送，卡片又分为两大类：一种是标准的通知卡片 [Bridge notification]，只提供信息，无需进一步交互。比如短信、天气、新闻等；另一种是可执行卡片 [Actionable cards/Contextual notification]，如可随时暂停的计时器，音乐播放控制器等。卡片上内嵌了可点击操作的按钮，用户除了阅读，还可以进行进一步的快速交互；当同一程序向用户推送了多条信息，这些信息会自动组合成堆叠卡片 [Card Stacks]，用户可点击展开或收拢。在用户有主动搜索的需求时，还可以通过语音询问或者从命令列表中选择预制的快捷命令进行搜索，安卓称之为线索菜单 [Cue Cards]。

那么问题来了, 这么小的屏幕，这么多的卡片，用户又如何浏览和选择？安卓为此制定了 2D Pickers [二维选择] 的法则，即纵向上下滑动在不同种类的卡片间快速切换。而从右向左滑动可以进入某个具体应用卡片的详情进行进一步操作，如查看详情、快速回复、在手机上打开等。从左向右滑动则是返回前一张卡片，直到退出返回默认表盘界面。卡片一旦退出，则自动删除不再出现。

当然，除了情景卡片和线索菜单，安卓也给开发者提供了全屏“沉浸式”交互的可能，如果开发者认为确有必要，可以给用户提供入口，进行全屏交互。

与安卓类似，苹果也提供了卡片式的页面模式 [Page-Based]。用户可以在不同的页面之间左右切换浏览。这样的方式简单明了，但当页面数量较多的时候，来回频繁切换也会影响效率。因此苹果建议开发者尽可能的减少页面数量。

层级模式 [Hierarchical ] 是苹果与安卓最大的不同。在层级模式中，通过菜单导航栏引导用户快速找到相应功能，用户可随时点击左上角的返回按钮或者从屏幕左边缘向右滑动返回上一层级界面。可以想见，对于相对复杂的用户场景，这种模式比扁平的页面模式更为高效。除此以外，苹果提供了压力触摸 [Force Touch] 操作，相当于给同一界面赋予一个快捷操作菜单。在特定界面，只要手指用力按压屏幕，这个快捷菜单就会浮现。这样做既保证了界面布局的简洁完整，也不影响单手指操的效率。另一个亮点是通过快速拨动数字表冠 [Digital Crown]，用户可以在不同 App 和层级界面中进行浏览和进行 Zoom-in-and-out 式的缩放操作，进一步提升了交互的空间层次感。

2、76 Synthesizer

苹果在应用设计中最喜欢使用的Skeuomorphic（模仿过去的现实物品，强调界面与用户过往经验的一致性，例如iPad虚拟键盘上F键和J键上的虚拟定位小横杠）设计，让用户感觉自己和应用之间的互动更加直观自然。这样就会让用户从冷冰冰的科技产品中体验到与应用互动的乐趣以及亲切感

3.Camera Genius

整个界面看起来就和真实的单反数码相机一样。明确强烈的视觉层次感，再加上高分辨率以及高质量的Retina视网膜显示屏，整个UI看起来非常逼真、简单明了，用户使用起来相当方便。超清晰和引人入胜的移动UI界面，和 Web页面完美呼应。

4.FL Studio Mobile

FL Studio Mobile是FL studio iPhone版，使你可以在iPod、iPhone和iPad上创建完整的多轨工程，它让你的iPhone就像是全功能的录音室，漂亮的大混音盘，先进的创作工具，让你的音乐突破想象力的限制。