UI计划履历分享：用实战教你界面改版
本文笔者将用本身的一个真实案例，来与各人剖析产物界面改版从需求到计划的完备过程。http://f11.baidu.com/it/u=834419602,1161340318&fm=173&app=49&f=JPEG?w=640&h=360&s=BF8879231B32719ADAA499C2030070A1&access=215967316
之前为各人分享过许多工作的案例，许多同伴表现劳绩颇多，之以是分享工作案例是为了给各人解说计划思绪，让各人明确：为什么如许计划？出于什么目标？要办理什么题目？这些正是UI计划的根本地点，把握了计划思绪就能应对各种题目。接下来本期的分享，仍旧会用真实案例剖析从需求到计划的完备过程。
接需求与案例剖析：
http://f10.baidu.com/it/u=1101798405,759840794&fm=173&app=49&f=JPEG?w=640&h=449&s=0AA87C2301CEECEA5ED5A1DA0000E0B0&access=215967316
我司的运营小姐姐@我要改个产物的UI，下战书找我聊需求。
一、预备工作
提前相识产物，从视觉、交互上感受一遍，标志产物中有疑问的地方，如许大概对产物有个概念，为接下来的沟通做好展垫。
二、相识业务
起首必要运营小姐姐解说一下业务逻辑，相识产物涉及到的各种脚色，产物利用场景等等，期间把疑问逐一相识清晰，尽大概对业务、脚色、利用场景有充实的相识。
通过沟通，相识到：这个产物是一个H5问卷背景，业务上用来检察问卷统计的效果，利用的人群是公司的运营职员，产物时常会打包卖给客户，客户的利用场景不定，多数用户会用手机端检察统计效果。
三、沟通需求
接下来，沟通中我会先听她解说需求，讲完后我会问她一些题目，确保我明白的精确。
需求沟通后，此产物题目为：界面太乱，很难用，必要改的悦目惬意好用。
这时间就要想到，她是不是用了其他体验好的产物，假如是的话，这个产物大概是紧张的计划参考，然而相识后并不是由于用了其他产物，是不停以来就欠好用，没时间改而已。
接下来的需求沟通就要落实到页面中，必要一起探究产物，不明确的地方要相识清晰，从中总结优化的地方。
下面开始案例分享：
第一个页面改版：
http://f11.baidu.com/it/u=1080802033,1823853898&fm=173&app=49&f=JPEG?w=640&h=647&s=4D2C3472190B514D507590CE0000A0B1&access=215967316
上图为“统计问卷”首页，A、B、C处为页面中较为突出的点，此中C处最为显着，沟通后得知C处图表的切换是为了截取图表做ppt，仅此而已，以是此处UI计划上必要弱化。
实在用户之以是以为页面看起来不惬意，是由于想看的元素被弱化，而不应看的却过分计划，如许用户在看页面过程就会很费神，由于获取信息要躲开视觉上被过分计划的地方。
比方A处，用了页面中唯一的橘黄色，当初计划者应该是为了能强化区别上下题目标分界，但也成了突出的视觉干扰项。
实在分析后，页面中用户要看的是两个地方，一个是B处答题的比例数据，另一个是旁边的“小记”数据量，而B处进度条的计划过于突出，与笔墨没有精良的视觉比重。
联合以上题目举行改版：
http://f12.baidu.com/it/u=2839202408,2322004787&fm=173&app=49&f=JPEG?w=640&h=696&s=480A7532511F41CC124D34DA0000E0B2&access=215967316
办理A处题目：
把每道题计划为卡片式，如许能很好的区别上下题的界限，题号从突出的橘黄色改为玄色，使得页面视觉上不那么跳跃。
办理B处题目：
弱化变细进度条，与笔墨视觉比重相称，不会显得突兀，排版上下分列改为左右分列，如许可以或许缩减表格的高度，页面可以表现更多的内容。
办理C处题目：
图表切换是个弱功能，利用频率较低，以是放到卡片的右上角弱化计划，用切换的方式展示。
不但仅是以上的题目，排版的细节也会大大提拔产物的质感。
http://f11.baidu.com/it/u=1861939210,1548895916&fm=173&app=49&f=JPEG?w=640&h=696&s=C0966F3A511F41CC124D25CA0300E0B2&access=215967316
旧版全部元素的排版间距险些没有什么规律，这也是导致用户对产物有乱糟糟印象的缘故原由。
改进后，用间距往表达元素之间的关系，间距计划经常会用到“黄金比例”或“五分原则”，黄金比例不必多说，五分原则就是相干的元素用周边0.5倍的间隔表达密切关系。
http://f12.baidu.com/it/u=597649307,2970421652&fm=173&app=49&f=JPEG?w=640&h=199&s=7D2634729DA44D0156DDB8D70000C0B3&access=215967316
当计划好第一个页面后，必要先给到需求方评审，确认没题目后再继承，如许就尽大概包管了背面的计划是符合他们必要的。
http://f12.baidu.com/it/u=2124525050,3159694303&fm=173&app=49&f=JPEG?w=640&h=449&s=78A83472415B446D185591DA0000E0B1&access=215967316
上图只是个终极的效果，过程中做过一些小改动，最初发给需求方计划的页面，必要做简朴的计划注解，如许才会更轻易被明白，且具有说服力，终极确认没题目再继承其他页面的计划。
第二个页面改版：
http://f10.baidu.com/it/u=1593349653,1332509177&fm=173&app=49&f=JPEG?w=640&h=695&s=0D2074325B0B56491441DCDE0000C0B1&access=215967316
上图是给做问卷的人设置红包奖品的页面，看完后我表现心疼我们的运营职员。
A处本可以切换项目，但如今的计划显然是不可点击切换的状态。B处是这个项目总金额统计，现在排版色彩紊乱且拥挤。C处是给问卷设置红包奖品的各个属性信息，然而元素间没有条理，仍旧紊乱拥挤。D处按钮没有主次关系，排版拥挤。E处是个“增长奖品”按钮，如今看起来没太大题目。
http://f10.baidu.com/it/u=1413242838,1401056538&fm=173&app=49&f=JPEG?w=640&h=696&s=409A573A411E45CC544160DA010050F2&access=215967316
改版后页面连续了首页的卡片风格，保持同等性。
办理A处题目：
“子进口切换”用户很难明白，由于不是确切词，比方换成“项目切换”“问卷切换”就很轻易明白，（关于文案的计划之前总结过一篇文章，文章底部有链接）固然也是可以往掉的，由于运营职员对每个项目都很认识，没须要注解。
办理B处题目：
重新界说排版后，显而易见会比之前要清楚透气许多，动态变革的金额用颜色突出夸大，未设置金额为次要信息，用灰色表现。
办理C处题目：
改变排版样式，视觉上有主有次，“设置数目”跟“个数”为重复信息，只留一个即可。
办理D处题目：
按钮“已启动点击禁用”拆分为“点击下线”按钮，和问卷状态（举行中），“睁开”按钮放到最左边，和“编辑”并列。
办理E处题目：
“新增奖品”按钮，假如增长设置奖品列表，就会把按钮挤到不可视地区，如许的计划不是特殊保举，以是计划成悬浮按钮，旧版本已经创建用户的按钮功能认知，悬浮按钮上面配加号图标，用户就会很轻易明白。
第三个页面改版：
http://f12.baidu.com/it/u=2875695278,2853316494&fm=173&app=49&f=JPEG?w=640&h=696&s=E09A7032111E41CC007490C80000C0B2&access=215967316
上图照旧第二个改版页面，此次要改版的是，点开“睁开”按钮表现的属性，现在的题目是有许多重复的信息——比方时间，上面已经表现时间，最下面又出现同样的时间。
最严峻的题目是：全部灰色字的解释，不符合逻辑，不应该在睁开的属性下面提示，由于这已经是编辑好的内容，再往提示就意义不大了。
模仿一个场景，好比：上图红圈的地方，已经设置好了奖品名称为“荣幸红包”，睁开后有个灰色字提示“用户中奖后，用于表现给用户看”。假如发现明白错了，然而在此页面是不可以改正的，以是灰色字应该在“新增奖品”的编辑中提示，用户在输进信息的场景下，提示才是最公道的。
http://f10.baidu.com/it/u=1604668719,3760885320&fm=173&app=49&f=JPEG?w=640&h=696&s=E08A7432411F65CC005494C8000030B3&access=215967316
页面改进后，往掉重复的属性信息，往掉灰色字的提示，（往掉这些内容是提前跟需求方探究过的）末了用最少的空间展示了全部的信息，更清楚明白。实在睁开后的卡片高度，完全也是可以思量往掉“睁开”“收起”的功能。
第四个页面改版：
http://f10.baidu.com/it/u=3532402737,1570709528&fm=173&app=49&f=JPEG?w=640&h=695&s=0C227C32118F414D1255E1DF0000C0B3&access=215967316
当我看到这个页面时，不知道为什么要有A处的信息，以是再次讨教需求方寻求答案，给我的答案是“子进口”“IP”是为了给开辟职员提供便捷查询。比方：这个中奖者存在刷红包举动，可以通过A处的信息举行查询。
很显然这并不公道，由于对用户来说没有效，还造成了认知负担，假如存在不良举动，提供编号信息就可以搞定了。
B处的计划，让页面没有条理，更是一个信息干扰项。
http://f12.baidu.com/it/u=3583436921,2900976081&fm=173&app=49&f=JPEG?w=640&h=696&s=4C8A743A591FD1CE107C10C90100C0B3&access=215967316
页面改进后，依然相沿首页卡片式的计划，往掉“子进口”“IP”“昵称”多余属性，往掉昵称是由于答问卷一样平常不会获取到用户昵称。
“中奖”和“未中奖”卡片，计划上有显着的视觉比重差别，往掉未中奖的绿色标示，只突出中奖者。
末了一个页面改版：
http://f12.baidu.com/it/u=1329089021,914342899&fm=173&app=49&f=JPEG?w=640&h=696&s=50B03C72ED36668A185565DA0000B0A2&access=215967316
上图是做问卷用户答案页，页面的弹窗偏小，利用起来很憋气，A处不知道什么意思，扣问后可以直接往掉，B处是一个不公道的“确定”按钮，缘故原由是用词错误，应该叫“封闭”更符合，由于这个页面是检察信息，并没有实行某些使命操纵。
http://f12.baidu.com/it/u=3373203161,4071874936&fm=173&app=49&f=JPEG?w=640&h=696&s=F812EC1AA7266EAA44FDC4DF010080B2&access=215967316
改进后加大弹窗，往掉页面中的多余元素颜色，上下标题用留白间距隔开，往掉“确定”大按钮，由于太占面积，改为右上角“封闭”按钮。
末了，当我们看到一个页面时，假如只看到美与丑，那是不客观的，这大概是对UI计划最大的误解，UI的美不但表现在外貌上，另有内涵的体验中。
UI计划一样平常都会带着一种目标举行计划，目标尽不但是计划的悦目，更多的是创造一个精良的产物体验，同时可以或许助力业务，实现产物代价。
UI计划师对于业务要积极的往相识，对需求不要总被动吸收，要故意识的往探究发掘，对业务的熟知，需求的正确拿捏，是你开始计划前最好的基石。
本文由 @吴星辰 原创发布于大家都是产物司理。未经允许，克制转载。
题图来自Unsplash, 基于CC0协议
http://www.fyguaji.com
页:
[1]