UI界面设计-百度客户端界面设计总结.pdfVIP

UI 界面设计-百度客户端界面设计总结 今天为大家带来的课程是——百度传课客户端 KK4.0 首页设计。 在设计的过程中和设计之后我们应该做些什么，才可以更好的与其他设计师、 工程师进行沟通跟衔接。 第一点，界面设计的整体思考方式。UI 界面设计与单纯的视觉设计会有一 些不一样，考虑的点会比较的系统。第二点，设计稿上应该体现出什么，才会让 你跟你的下游更好过。这里的下游指的是 FE 跟 RD 同学，也就是我们平常所说的 前端跟发开。在设计过程中，我们设计稿上除了体现必要的设计之外，还应该放 些什么呢？ 设计界面的思考方式，在此之前，我们先了解一下设计流程跟分工： 在我们 UI 的上游有PM 和 UE，还有我们下游的FE 和 RD 同学，这些是在我 们整体设计流程中与设计同学接触比较多的一些。 更多课程内容：百度 UE 讲堂 相信大家一定听过一句话：形式追随功能。这里的功能指的就是 PM，他们负责 产品需求也就是功能的探索，形式指的是 UE 交互同学，他们负责根据产品需求 来进行形式上的合理布局跟合理交互。在二者完成之后会交付我们进行设计，我 们设计之后就会把这些东西交给前端开发同学进行实现。 我们设计的思考方式应该是什么呢？只是做美丽的设计好看的设计就可以 吗？其实不然，这里我举一个例子，如果设计师就是裁缝的话，我们应该做一件 合身且美丽的衣服，而不是只美丽。我们好好思考一下这句话，这里的合身指的 就是我们设计跟产品的交互不是单纯好看，只有满足以上这些点的设计才是一个 合格的也是一个好的设计。除此之外我们还应该考虑整个设计的可实现性，还有 在整体的体系设计当中的通用性。这些就是我们应该拥有的 UI 设计的思考方式。 下面让我们看一下百度传课登录界面的界面分析。 左侧是 KK 登录窗口的一个线框图，右侧是我们的设计结果。 可以看到线框图当中大部分元素在设计结果当中有所保留，是因为他关乎于 功能，我们不能轻易拿掉。面积最大的蓝色区域是一张底图，这个需求来源于运 营，一方面我们希望在节日的时候做一些烘托节日气氛的底图，另一方面运营希 更多课程内容：百度 UE 讲堂 望在实现变现的时候，把这块做成广告位。这个区域的大小是由设计师来控制的， 所以最后在设计结果中我们可以看到我们把它变大了。 第二个关闭菜单、缩小和 KK 这些常规按钮和名字的摆放位置。 第三个就是用户头像和用户名称，这两个元素在登录界面设计当中已经司空 见惯了，他要表达“我”的意思以及体现用户的归属感，所以在最后的设计结果 当中可以看到我把它放的很大。 最后一个“正在登陆”这几个文字，它的本质其实是一个 loading，在设计 结果当中我把它变成了一种图形化的语言，也就是这个圆形，它会一直转呀转， 表示正在登陆。之所以把文字变成图形有两个原因，第一这个界面也就是这个元 素的上个界面的相同位置也是一个圆形，它在这种交互变换的过程当中同图形会 比较平滑，视觉会比较舒服。第二个就是正在登陆这几个文字不能很好的表现一 个状态，给人感觉冷冰冰的。可以看到在保留很多元素的同事也拿掉了两个元素， 第一个就是注册，在用户登录的过程当中用户很少进行注册，这两个行为其实在 本质上是相反的，所以把它拿掉。第二个可以看到在底图上面有三个小点，运营 想把它做成轮播图来放更多的图片内容进行变现，但是我们在用户研究的时候发 现，第一个图片太多的时候会增加用户的认知负担反而不如一张图好看美观也更 实用。第二个图片的这种轮播我们不能保证它图片的色调名是一致的，所以它有 可能对用户造成一种视觉的刺激，基于以上两点，我们拿掉了这个功能。 可以看到对于元素的中解读的分析还有它这种功能的深入理解是有益于我 们设计的。 在这里和大家分享两个小技巧：1、拿到需求的第一步是分析，而不是直接 做。有的时候如何设计就在这个分析结果中自然而然体现出来 2、视觉化的语言， 往往比一堆文字看着更让人舒服。但是它有基础，就是你所用的这个图形一定要 是表意明确的不能让人产生歧异。 在设计过程当中元素的摆放我们采用了一种黄金分割的视觉理论，黄金分割 有很多种，在这里我们采用的是 1：1/2 和√5/2 的比例。 更多课程内容：百度 UE 讲堂 可以看到用户头像