本篇教程探讨了WEB页面设计之如何让界面的改版设计更靠谱，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

1.什么是redesign，以及为什么要做
redesign，顾名思义，意思就是对一个现有产品或页面进行重设计或二次改版设计，通常来说我们需要提前了解一个产品的业务架构，了解他的用户人群，和业务诉求以此来确定设计的方向，改版的范围也可以从小到一个单独的页面模块，大到整体品牌调性的重新设计。
百度网盘重设计
对于大多数初级设计师和学生而言，很难有机会接触到项目的改版，因此，redesign也是成为了很多设计师自我推进和提升的一种练习方法，通过在现有产品的基础上进行优化重设，进行知识沉淀，复盘总结，来进行自我驱动。
但是通常来说，刚刚入行的初级设计师或是还在初学阶段的同学通常会犯的错误就是完全凭主观臆断去评价一个界面的优劣，比如：我觉得不好看，这个风格我不喜欢。
在设计时也是无从下手，东拼西凑，没有做任何的分析工作就开始进行设计，最后在实际工作的产出中也显得无足轻重，没有任何说服力。对于视觉层面完全由个人审美决定，在业务诉求层面，则是完全弃置不顾。而好的设计并不只能以好看为唯一标准，设计兼顾了用户体验，业务属性，用户诉求与业务诉求等等多个方面，本质是权衡和解决问题的工作，孔晨大大也说：艺术制造情绪，设计解决问题。
而一个完整正确的设计流程需要前中后的设计思维，设计前分析，设计中调整，设计后验证，缺一不可。那么现在我就以咕咚的发现页面改版设计为例，与大家探讨如何用方法论去推动设计。
2.设计前（分析工作）
在设计前，我们需要首先明确几件事情，其中最重要的就是你到底为什么改版，长久以来设计师都以具备ucd（以用户为中心的设计）意识为荣，这无可厚非，但是问题在于以用户为中心的设计是别人的事情，而不是你的事情。作为设计师如何权衡商业和审美，如何平衡用户诉求和业务诉求，这才是关键所在。我们口中的用户不等于实际用户，设计目标也不等于用户体验设计或者用户诉求。
这里引用阿里巴巴ued团队早期提到的五导家理论，即通过明确业务与用户诉求的不同来制定合理设计方案（1.明确业务诉求 2.洞见用户诉求  3.定义业务目标，聚焦设计目标   4，设定衡量设计目标的数据指标。5.根据设计目标构建设计方案）
图片来自阿里巴巴ued团队。
实际操作：第一步，确定你的改版设计目标（使用工具：易观智库试用版，艾瑞研究）
根据据2018运动类产品研究报告显示，运动类产品行业现状发展良好，随着生活水平上升，运动人群也呈现上升趋势。咕咚作为最早的布局智能硬件和大数据的公司，也在最近推出了健身3.0alive发布会，未来方向为智能硬件+大数据服务健身课程。这与拥有领先于业内健身课程的keep相比将形成更强维度的竞争关系。
此外，运动行业普遍存在的问题是盈利难，行业同质化特征凸显。就目前来看，增值服务、电商、广告作为互联网盈利“三板斧”，运动APP也都有所涉及，不过做的却似乎并不能让人满意。而电商存在的问题是用户使用你的平台，但不一定会在这购买你的商品，转化率普遍偏低。
行业特点与竟品：
根据报告了解业内成熟竞品，目前大多数运动健康产品的模式基本围绕智能硬件和平台获取数据（咕咚）千人千面推荐商品，完成流量转化。通过社交分享和排名维持用户粘性（悦动圈）。通过健身课程等内容付费服务进行营利（keep）。
行业现状：
由数据可知，运动健康行业整体发展态势良好，悦动圈以及keep环比增幅及月活跃用户较高，用户对于社交分享及运动排名机制，以及健身课程可能更感兴趣。
数据来自易观智库
总结：设计目标：增强发现页面的品牌感，提升商城UV。
用户画像怎么做？
通过易观智库和行业报告的数据进行分析，结合显性画像与隐性画像要点。
    显性画像：即用户群体的可视化的特征描述。如目标用户的年龄、性别、职业、地域、兴趣爱好等特征
    隐性画像：用户内在的深层次的特征描述。包含了用户的产品使用目的、用户偏好、用户需求、产品的使用场景、产品的使用频次等。
通过易观智库行业用户画像分析，由数据可知运动app普遍集中24-40岁的人群，为提升产品活跃度和年轻化，将咕咚的用户群年龄拟定在20-35岁之间。
用户群体标签：年轻化，喜欢购物和热卖产品，喜欢跑步和健身，喜欢社交分享，对生活质量有较高要求，对流行文化感兴趣，喜欢看剧，工作压力一般，购买力较强，偶尔去健身房。
4w场景分析结合典型用户画像（可通过调查问卷，以及用户群体分析得出大致画像）：
4w场景分析，通过who，when，where，what，四个关键问题描述建立用户使用场景模型，进一步挖掘用户诉求。
张丽。20岁，某高校学生，热爱跑步，通过跑步认识了本地跑友，加入跑团，对马拉松感兴趣，积极参与跑团训练和附近马拉松赛事，喜欢得到马拉松赛事荣誉的成就感。平时喜欢网购和看剧，也会看一些时尚杂志。用户诉求：希望能买到便宜的运动产品，希望可以与好友分享运动成就。
张丽在星期天的早上结束运动后分享成就到朋友圈
——增强运营区设计，与其他产品形成流量互换。
刘鹏：27岁，马拉松爱好者，专业跑者，喜欢到处参加马拉松比赛，在跑友圈子里小有名气，创造了自己的跑团，备赛之余，致力带领跑团发展。喜欢社交。用户诉求：希望跑团越做越好，自己的团队越来越壮大。
刘鹏在周五工作结束后进入运动团组织夜跑活动。
——优化运动团和赛事设计，让用户更有参与感
张名：35岁，企业员工，跑步是一种习惯，长跑多年，为了健身，也为了缓解工作压力，通过跑步认识了一些跑友，基本在固定时间跑步，每周3次。不怎么网购，但为了身体健康，喜欢定期的买一些营养品增强体质。并习惯用app记录身体数据——用户诉求：希望可以提醒查看自己的身体健康数据。
张友一如往常在周日晚上七点后查看自己一周的运动数据。
——智能场景，千人千面
专业的用户研究不是设计师应该处理的工作，这里我们仅做简单梳理即可。
改版前界面设计梳理。
缺少banner运营区，单一的金刚区虽然明确了用户使用频率和重点，但缺少点击欲望。
瓷片区运营氛围冷淡，标题文案没有吸引力，缺少购买欲。
赛事板块配图过于复杂，辨识度低，参与感差。
活动运营配图表意不明，参与感差，点击欲望低
运动团配图高斯模糊数值过大，背景看不清，用户参与度低
总结需要明确的设计指向：
目标：增强发现页面的品牌感，提升商城UV。
方向：品牌年轻化，增加运营活动的趣味性和点击欲望。优化运动团设计，让用户更有参与感。增加智能场景，千人千面。
第二步，确定设计风格和用色
情绪版：通过情绪版导出设计风格方向
情绪版的使用方法：
定义两个主要关键词（符合产品调性的词语或是与用户年龄段相符的用户特点），再根据两个主关键词展开联想进而确定两组衍生关键词（符合主关键词调性特点的词语），根据衍生关键词去找寻符合调性的图片建立图片库，将图片库马赛克化，确定选用的颜色。最后根据品牌特性，色彩情绪或强光测试做进一步调整。
由于这次是做的单一页面的改版，由情绪板整理了几种用色规范主要就使用于banner中。但它同样可以是你整体设计风格，图标细节推导的有力论证。
3.设计中
在设计时我们要秉承的设计观是界面易读性与业务诉求凸显。
首先通过十字交叉分析法确定每个模块的优先级后进行模块间的排版顺序，从用户维度和业务维度两个方向出发，构建十字坐标系。
明却对于用户的重要性（通过kano模型）分析哪些功能是体验上的加分项，哪些是减分项，哪些是去掉之后不影响体验，哪些影响，来对各个模块的重要程度有大致排序。再结合产品纬度（业务诉求）进行最终排序
之后根据分析结果梳理原型排版
通过分析我们已经有了改版的优先级排版原型
现在需要将之前的改版目标和指向带入设计里面。
(1).结合情绪版用色方向进行头图banner设计。
文字采用错层阴影样式，更具促销感，按钮凸显增强点击欲望。
Banner中加入了运动商城热卖的手表和鞋子吸引用户注意，采用插画设计配图，更友好年轻化
(2).金刚区改版
设计目标：增强品牌感，提升咕咚商城uv
改版后重新调整了icon设计，和颜色，更加年轻化。运动商城和运动团更名为咕咚商城和咕咚团，并在icon中融入品牌元素，加强用户品牌认同。
咕咚商城加入优惠标签，提升商城uv。
思路参考及验证方法
图片来自：张双老师《6分钟看完，7个步骤提升UI设计进阶思维·白话版》
(3).瓷片区改版
改版后的瓷片区增加了促销标签和倒计时标签，增强用户购买欲和紧迫感。加入底色增强运营氛围。
文案层面试用“限时抢购”类似字眼加强紧迫感，“大家都在买”“80%用户的选择”顺应用户从众消费心理，增强好奇心。
千人千面，精准匹配。例如通过用户运动频率大数据推算蛋白粉（上次在商城购买过）的使用余量，进而推送相关优惠活动。
(4).智能场景，千人千面。
（张友一如往常在周日晚上七点后查看自己一周的运动数据。）
在发现页面设置智能场景，根据用户行习惯进行提醒。
小banner融入吉祥物元素，增强品牌认知
(5).精选活动改版
优化配图，通过插画设计形式表意准确，避免无意义配图，活动名称由《你敢挑战吗》（15秒出拳赢现金大奖）改为《“拳”是钱》简单好记。
增加奖池设计，增强用户情绪，吸引用户点击。
(6).运动团改版
运动团改名为咕咚团，增加弹幕轮播，将团内用户精选动态进行轮播，吸引用户参与，灵感来自转转讨论组。
改版后界面设计梳理
4.设计后：如何验证
衡量指标：
a.咕咚发现页面是否能留住用户，使用时间及频率是否有所上升
b.Banner点击率是否达到业内平均水准。
c.咕咚商城和瓷片区uv是否有所提高
d.运营活动和运动团参与人数是否明显上升。  
由于是redesig练习，很多数据没有办法直接验证。这里我们可以找几个朋友帮忙看一下界面，通过几个小问题验证设计结果。
比如:
你觉得这个界面什么地方最吸引你？
你能理解这个区域是做什么的吗？
你是否会使用某个功能。
还可以通过明确几个具体任务，例如：请完成某某操作，请使用某某功能。统计用户完成这些操作的时间，验证认知成本。
追踪。如果结果不理想，我们需要根据调查结果建立体验优化池，进行二次改版设计。    

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！