互联网产品的点线面改版（视觉篇）

wzhglove

编纂导语：关于设计师来讲，名目改版是常常会遇到的任务。本篇文章中作者环抱视觉、交互、框架三方面具体的引见了从视觉上的互联网产品的点线面改版，感兴致的小火伴们快来一同看看吧，但愿对你有所帮忙。


近期在兼顾一个跨境电商的App改版名目的过程当中，有位“优秀”的设计师与我进行了一系列沟通，让我发现仍有不少设计师更违心间接入手而非先动脑，从而致使后续的设计任务中不足残缺的思绪与指标。


设计师是脑力与膂力结合的发明性岗位，灵感和思绪是不会平空泛起的。
一定是在对现状进行少量的深化剖析和钻研之后，经过本身的了解能力造成残缺的思绪和标的目的。
那末如何从无到有的梳理残缺的思绪，则是设计师们需求在入手以前当真的动脑思考，这也是全部改版名目的根底思绪和依据。
结合以前文章《设计师的点线面场景化设计》所述的点线面设计思绪，全部产品体验次要以品牌为基调，由视觉（点）、交互（线）、框架（面）所构成。因此无论是动脑仍是入手，都将环抱着视觉、交互、框架这三方面进行，全程以数据为依据。


[ 产品体验的点线面 ]
在肯定好改版名目的终究指标的条件下，胜利的产品体验改版，必需动脑入手结合，剖析梳理并结合各业务需要，综合输入设计计划。


[ 产品体验改版的中心步骤 ]
先动脑再入手！
这里的动脑和入手是指的程序，并不是只动脑或只入手，在全部名目的任何阶段，都是手脑并用的。
动脑：动脑就是剖析、思考，现状剖析的进程其实就是找茬的进程，而找茬的进程也就是思考和寻觅解决思绪的进程，把问题点找出来并构思相应解决计划，那末根底思绪和灵感也就有了（连现存的问题都搞不分明，谈何优化翻新）。


[ 现状剖析次要内容 ]
视觉是用户对产品最间接的第一觉得，所以动脑的第一步也是最表层的一步，就是对视觉表示层面的剖析和找茬。


[ 视觉呈现层面的剖析内容 ]
让咱们先看看现版本的App成果，而后开始动脑吧


[ 现线上App成果 ]
一、色 —— 颜色零碎
颜色零碎凌乱，不足一致的规范标准，同一元素在不同场景的色值却各不相反，致使不同场景间切换时需从新顺应，此外从总体页言，关于品牌主色调的应用十分缺乏，没有很好的转达品牌的调性。


[ App各场景罕用色值 ]
从App的各个流程场景里，包罗文字、按钮、模块等，能够取得以上3种主色调、8种辅佐色以及10多种根底色调的色值，即便抛开色值芜杂和不一致的问题，主色调与辅佐色调之间的饱和度、色相等的搭配也非常分歧理，主色调饱和度对比高，而辅佐色却饱和度却非常弱，从总体的视觉呈现来看则显得主色调非常扎眼，而辅佐色却非常单薄。
二、形 —— 图形元素（图标、图片、组件） 1. Icon


[ App罕用icon ]
1）短少品牌基因
Icon是品牌调性的首要转达形式，应该侧重与品牌增强关联，凸起品牌调性；


[ 品牌logo与icon ]
2）释义转达纷歧致
Icon便是装潢和装点，更是气氛与场景的强调，要明晰间接的转达其本应该所饮食的含意；


[ icon的详细运用场景及含意 ]
3）图形款式不一致
Icon是一致的图形标识，即便在不同的场景也应该放弃一致，增加误读，升高学习本钱；


[ icon使用场景及款式 ]
2.内容图片
1）不足一致的内容展现标准
商品图片不足一致的信息传递及展现标准，每个区域的展现内容不一致，用户视觉焦点散乱，无效信息获得效力低；


[ 列表商品展现组件 ]
2）图片尺寸分歧适
1:1的图片无奈较残缺的展现头发的总体外形，仅展现面部规模的外型，图片区域内容会显示过于拥堵，若要残缺展现长发，则图图两则会留白太多，图片展现不丰满；


[ 商品图片尺寸及中心内容区域 ]
3. 广告图片
1）图片尺寸偏大，屏效低
首页作为全部App的第一流量入口，Banner尺寸占领整屏超过二分之一的比重，其余首要内容显露不充沛，使全部首屏略显薄弱。


[ 首页Banner位与屏幕尺寸占比 ]
2）视觉焦点扩散，图片内容布局不足标准性
Banner图之间不足一致的内容区域划分，不同图片之间的中心内容及按钮等设置纷歧至，图片切换阅读时视觉焦点起始地位纷歧至，阅读效力低。


[ 首页Banner图片内容 ]
4. 模块组件
1）视觉焦点散乱无章
在无限的屏幕空间内，并无建设无效的视觉阅读程序，在繁多个商品展现组件里，残缺的阅读繁多个商品的信息，需求8个视觉焦点，而在列表页这类商品组合页面里，多个组件结合在一同，视觉焦点更是多、乱、杂，用户在列表页面的信息阅读会非常低效。


[ 商品展现组件视觉焦点及列表视觉燥点 ]
2）信息展现不残缺
信息传递不残缺，内容缺失，用户无奈经过组件的阅读获得残缺的商品信息，无奈让用户疾速获得残缺且有决策帮忙的信息。


[ 商品展现组件的信息内容展现 ]
3）信息排版分歧理
同一类型的内容信息散布在组件里的不同区域，没有公道的整合排版，没无形成区域性信息阅读习气，一样大大升高了信息的获得效力。


[ 商品展现组件的内容归类 ]
三、字 —— 内容文字
与颜色零碎问题同样，字体的使用标准十分凌乱，相反的文字在不同场景之间的字体大小各不相反，每一个独自场景的字体标准各自独立，超过十种字体大小运用，仅数字价钱的字体就有6种大小，没无形成总体的使用标准。


[ 数字字体字号及运用场景 ]


[ App常见字体字号及运用场景 ]
四、质 —— 品牌质感
品牌质感弱，没有体现 品牌调性及品牌相干显露，任何产品的推出都不克不及脱离品牌而独立存在，都必需以品牌为基调，视觉的呈现更品牌调性的首要展示形式。
1.广告图
广告图是中心的营销展示形式，包孕全部平台的营销伎俩和理念，也是吸援用户发生消费的首要场景，在用户发生消费的同时也需求增强用户对品牌的印象以及认可感，需求在广告鼓吹图里有足够的品牌显露出以及强调品牌的调性。


[ 广告图款式 ]
2. Icon，图片、模块、缺省页、加载等
将伴有用户在App的全部使用生命周期，是随处可见的操作，同时也是品牌理念植入的中心场景之一，而且是反复性最高的场景之一。
现版本的App各场景中，无论是Icon仍是Loading这些常见的视觉元素，仍是缺省页疏导页这些流程性的场景页面，根本上都没结合品牌logo以及总体调性。


[ Loading、缺省页、为空形态、Icon ]
3.商品图
商品图片是用户对商品最直观的意识场形式，是最中心的用户决策场景，除了商品的价钱等信息，品牌的调性呈现，一样在影响用户消费决策心思发扬极其首要的作用。
目火线上的商品图片没有任何调性可言，包罗模特的选用，衣着的搭配等，纯正是网友YY的图片，彻底无奈体现品牌相干的专业和调性，如最右侧的商品图，模特搭配了红色上衣有大片的白色，很容易吸援用户的视觉焦点，而致使用户无奈第一视觉落点在假发产品上。


[ 商品展现图片 ]
4. 现状总结与优化标的目的
品牌质感弱 —— 定义品牌调性，增强品牌显露；颜色零碎凌乱 —— 一致主色调及辅佐色调，合并近似的色值，一致标准颜色零碎；视觉焦点散乱 —— 标准内容散布，公道布局阅读门路；信息展现不残缺 —— 提取中心信息内容，标准展现规范；内容排版分歧理 —— 归整内容信息，公道罢了模块区域；字体标准凌乱 —— 标准注释与数字字号，合并近似的字体大小；入手：经过动脑找茬，肯定了问题点以及优化标的目的，接上去就是入手解决这些问题了，入手其实就是输入解决计划，设计师的解决计划天然就是经过设计输入，精准的解决问题并晋升用户体验。（定位到问题点，就必需输入解决计划，以此为根底进行翻新）。


[ 解决计划的要点 ]
五、品牌调性 ——定义品牌中心症结词，重构品牌logo
以高贵天然时尚的女性假发产品为中心症结词，结合头发的曲线与字母UN，输入全新logo，并以logo为根底延展设计整套Icon、loading等。


[ 品牌全新logo及症结词 ]


[ 新logo设计思绪 ]


[ Icon设计思绪 ]
六、颜色标准 —— 定义中心色调，建设颜色使用规范标准
以皇冠为形象，体现女性的高贵，并以此为根底掏出拍完的金色为主色调，以及皇冠中的宝石的橙色为强调色，加之彩色灰为根底色，定义全新的颜色使用标准。


[ 主色调与强调色的取色来源 ]
七、字体标准 —— 定义罕用字体，建设完美的字体使用标准
以品牌logo为基调，将logo字体延展至全部App作为注释字体使用，价钱作为中心的信息之一，需求与注释有一点区别，故挑拣一款与logo外形类似又与注释字体同局粗黑的字体作为数字字体。


[ 中心注释字体与数字字体 ]
八、内容归整 —— 定义图片内容标准，设置阅读门路 1. 广告图
广告Banner图必需包孕品牌logo、中心文字信息、中心图形展现、行为按钮，且按钮地位、文字地位及图形展现地位需在相应的地位规模内，总体图片格调以简洁风为基调，重点凸起中心内容及按钮指引。


[ 广告图内容标准 ]
2. 商品展现组件
缩小商品组件展现区域，一致标准展现商品侧面、正面、反面三种视图，将商品称号、商品价钱、折扣信息等信息归类排版，保藏、评分等商品评估信息此外归类搁置，公道设置总体视觉阅读程序，进步商品信息获得效力。


[ 商品展现组件视觉落点 ]
3. 商品图片
商品图片尺寸调剂为长条形，更好的残缺的展现假发产品，也更合适手机阅读，严格挑拣商品展现模特及拍摄，一致以淡灰色为配景，侧重于强调产品自身的展现，晋升阅读效力以及一致输入品牌风格。


[ 商品图片拍摄标准 ]
到此，针对详细问题点的解决计划曾经根本上输入了，接上去则需求将各个点的解决计划封装成残缺的页面，并输入残缺的视觉设计标准，其真实做好问题梳理和解决计划的思考，最根底的视觉设计标准就曾经有了初型了。


[ 新设计计划成果图 ]
从局部到总体，把各个细节点都斟酌到极致，针对性的解决细节问题，侧重于繁多页面上的问题（点），而后把关联的页面及细节串起来，造成用户的残缺门路（线），最初以品牌为根底，把一切的症结点与门路流程合并起来，造成全部残缺的产品体验，这也是以前的文章里提到的，点线面的设计形式的另外一种体现。
篇幅无限，文章只能举例阐明，在实际的名目过程当中还需求包孕得多内容，包罗各种竞品调研、数据剖析验证、沟通协调、优化调剂等等。
设计师作为用户体验模块的最间接参预者，需求具备善于发现问题的眼睛，并能迅速反映提出完美的解决思绪，这是需求长时间的动脑和入手结合并加以落实到实际名目傍边，不停试错能力练就一双火眼金睛，设计师的价值也绝非是输入优秀的设计图，而是要输入一整套残缺的设计理念。