《UI设计交流文档》PPT课件.ppt

深圳XXXX技术有限公司产品部：XXXX,UI设计,目录,01 UI简介,02 UI设计理念,03 UI设计原则,04 UI设计流程,05 正谱教育UI的设计想法,01 UI简介,UI即用户界面（User interface）在人和机器的互动过程中，有一个层面，即我们所说的界面（interface）。泛指用户的操作界面，UI设计主要指界面的样式，美观程度。,01 UI简介,如果说程序是一个人的肌肉和骨骼，那么UI设计就是人的外貌和品格!都是一个成功软件产品必不可少的重要组成部分!,从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。,用户界面设计的三大原则,02 UI设计理念,设计理念在不同的软件产品中会有一些不同的具体表现形式，根据产品特性不同、应用场景不同而表现出不同的侧重点及具体特性。但是核心的理念特征却一直保持统一，那就是“内容重于形式”。,UI设计包含用户研究、交互设计、界面设计三大类,一切以用户为中心，设计出简单舒适易用的界面,02 UI设计理念,不同的产品如一个儿童娱乐产品就需要将界面做的花哨一些或者用大的图片充斥;一个应用软件就需要突出使用方便和强大的功能设计要简洁。,同类不同的内容如一个可爱的幼儿教育产品(像儿歌动画类)就需要将界面做的活泼生动可爱一点;如果是一个中小学生的专业助教类产品就要做的简洁明了一些。,03 UI设计原则,设计原则,统一性,设计目标一致,外观元素一致,交互行为一致,合理性,用户习惯,接受程度,简易,可用性,可理解性,可达到性,可控制性,03 UI设计原则,界面没有任何的操作提示，用户就明白通过左右滑动屏幕来查看更多卡片，还知道卡片是以扇形为运动轨迹。,干净简洁的界面可以让用户更加沉浸在阅读的世界里,界面清晰最重要 界面清晰是UI设计的第一步，要想让用户喜欢你设计的UI，首先必须让用户认可它、知道怎么样使用它。让用户在使用时预期会发生什么，并方便地与它交互。,全力维护用户的注意力在阅读的时候，总是会有事物分散我们的注意力。因此，在设计界面的时候，能够吸引用户的注意力很关键，千万不要将界面的周围设计得乱七八糟。,03 UI设计原则,用户不知道如何查看很多的卡片，除了查看第一张卡片的详情，其他的卡片脱离了用户的掌控。,图标的作用是以图形化的视觉形象给用户快速引导，如果只是装饰，就不如不要。,让界面处于用户的掌控之中人类往往对能够掌控自己和周围的环境感到舒服，不考虑用户感受的设计往往会让这种舒适感消失。保证界面处于用户的掌控之中，让用户自己感受主动权。,直接操作的感觉最棒 当能够直接操作物体时，用户的感觉是最棒的。在设计界面时，我们增加的图标往往并不是必需的，比如我们过多的使用按钮、选项等等其他繁琐的东西仅仅是为了填满界面，这些都是画蛇添足。,03 UI设计原则,界面的交互非常清晰，点击向下展开，再次点击向上收起。,界面非常漂亮，但登录被弱化，并且表现形式雷同输入的提示文字，用户不易察觉。,界面过渡自然界面的交互都是关联的，所以要认真地考虑到下一步的交互是怎样的，并且通过设计将其实现。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目的。,表里如一如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。,03 UI设计原则,元素排版整齐且统一，功能清晰明了。,界面以用户的阅读习惯将层次拉开，从左到右，从上到下，元素之间互不干扰。,区别对待一致性如果屏幕元素各自的功能不同，那么它们的外观也理应不同。反之，如果功能相同或相近，那么它们看起来就应该是一样的。,强烈的视觉层次感强烈的视觉层次感是通过界面上视觉元素提供的清晰浏览顺序来实现的，也就是说，用户每次都能按照同一个顺序浏览同一些元素。弱化的视觉层次没有给用户提供如何浏览的线索，用户会感到困惑和混乱。当一切都是粗体时，就没有主次之分了。,03 UI设计原则,将零散的元素进行组合，并以生活中常见的物品展示，用户更易理解。,通过鲜艳的色彩来提醒需要用户关注的内容,恰当的组织UI能够降低认知难度正如John Maeda在他的书中所说，对屏幕元素的恰当组织能够使页面显得简洁，这能够帮助用户更容易并且更快地理解你的界面。,颜色不是决定性因素物体的颜色会随着光线的变化而变化，颜色是一个变化的性质，不应该在界面上起决定性作用。但是现在有很多天气、记事、时钟类APP极简的设计，常常采用色彩进行区分也非常赞。,03 UI设计原则,用户只单纯地想播放音乐，所以列表页只需要当前播放状态、演唱者、专辑名和歌曲名，无需太多的信息。,零状态结果本身对用户体验极其不好，更需要情感化或引导性的设计来降低用户焦躁的情绪。,渐进展示在每个屏幕上只显示必要的内容，如果用户在做选择，那么给他们显示足够的信息，然后在各自的页面上展示详情，避免在某个界面过度展示所有细节。,零状态的界面第一次访问界面是最重要的，但经常被设计者忽视。为了帮助用户适应，应该提供启动的方向和引导。,03 UI设计原则,要想做到这点非常不易，但是无厘头Yo做到了。,视觉效果非常好，但是用户体验上非常糟糕，当前状态与主界面关联太弱，弧形轨迹阅读太累。,优秀的设计是无形的优秀的设计是没有痕迹的，如果设计是成功的，那么用户可以只关注自己的目的，而不是界面，不依赖于界面。,界面是被人使用的只有用户使用你设计的界面时，才是成功的。如果一件衣服很漂亮，但是穿起来不舒服，那么设计是失败的。,04 UI设计流程,配合阶段,分析阶段,设计阶段,验证阶段,UI设计流程,竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声都好，别沉迷于自己的设计中，让真正的用户说话。,好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要，了解产品的现有交互以及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。,04 UI设计流程,分析阶段,需求分析,用户场景模拟,竞品分析,对于一个产品来说，必然有对用户需求的分析内容，更多的是从MRD与PRD获得，或者从产品需求评审会议上得到需求分析的内容，当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话，那么用户需求就是本次设计的出发点。,输入物：MRD(市场需求文档)、PRD（产品需求文档）、市场调查报告、竞品分析文档,输出物：设计初稿(或许只是几个简单的界面),面向对象，产品面向的用户不同对于产品的设计要求不同，不同年龄层的用户对于产品的要求不同，产品的用户定位将对UI设计师影响因素。,面向事件驱动则是对产品响应与触发事件的设计，一个提示框，一个提交按钮这类都是对事件驱动的设计。,04 UI设计流程,设计阶段(设计方法),面向场景,面向事件驱动,面向对象,面向场景是针对该产品使用场景等模拟，模拟用户在多种情况下产品使用的模拟。,输入物：交互文档（高保真原型）,输出物：设计终稿(所有的设计稿),04 UI设计流程,配合阶段,UI设计师交出产品设计图时，更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作，对于不同的开发人员的要求，切图方式也有不同，UI设计师需配合相关的开发人员进行最适合的切图配合。对做好的UI产品要制定一份UI规范，作为产品的UI设计规范，适用于公司内部UI团队和开发人员作为参考标准。,输入物：设计终稿（高保真效果图）,输出物：设计修改稿(设计稿切片标注)、UI设计规范,04 UI设计流程,验证阶段,产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户最直接的经手人，对于产品的理解会更加深刻。,输入物：产品,输出物：产品(面向用户最终版本),05 正谱教育UI设计想法,风格定位通过了解公司产品需求再去体验学习同行产品的设计（如智慧云课堂产品，体验学习同行品牌：AiSchool、乐望、极域、NEC）,大致了解同类产品的设计走势和风格。公司产品UI设计的主要方向为扁平化设计。为了达到更好的用户体验，界面设计以简洁为主，页面层级也尽量少层级设计。,色彩方案根据公司品牌色蓝色，蓝色针对教育行业也是比较合适的心理色彩。故本次产品整体色彩走向以蓝色为主，橙色及其他色为辅。色彩组合偏简洁，一个简洁的配色方案不会使人眼花缭乱，并且使内容更容易被理解。,主色辅色,THANKS FORWATCHING,2017,