搭建电商平台 方案「电商实战」

互联网 2023-02-17 09:15:18

今天给大家普及一下搭建电商平台 方案「电商实战」相关知识,最近很多在问搭建电商平台 方案「电商实战」,希望能帮助到您。

设计规范能够使视觉设计更加统一,前端开发更加高效准确。当接手一个新项目时,我们应该如何着手搭建呢?

前言

设计规范能够使视觉设计更加统一,前端开发更加高效准确。当接手一个新项目时,我们应该如何着手搭建呢?前段时间我为谷小酒项目制定了一套设计规范,现将遇到对问题总结一下,分享给大家,欢迎大家补充讨论。

什么是设计规范

首先,我们要知道什么是设计规范。通俗的来说,设计规范就是对设计元素进行一些规范化的限制规定,诸如颜色,形状,大小等等,方便后续延展时,能够很好的保证视觉上的统一性。对于前端开发人员来说,提供了一份参考,实现时能更加准确,从而也减小了复核的工作量。

设计规范应当避免两个的坑

1.避免写得过于“精细”

规范应该是针对整个项目通用的,所以要善于提炼出重叠的部分。对于某个界面特有的元素,就不要列入了,写的过于“精细”,便成了单个页面的标注和需求,失去了意义,而且在使用的过程中,定的太死也会出现一些问题。我们来看一个例子:

在针对二级导航栏做规范设计的时候,这里并没有考虑到二级导航栏的选项数是不确定的,所以这里的给出的选中条宽度的限制是无意义的。在执行过程中如果严格遵循,也会出现问题。

2.避免将需求文档摘抄一遍

一般情况我们都会先拿到需求交互文档,然后再开始设计。程序也会先看需求交互文档。所以没有必要将需求交互的说明文字再添加到设计规范里面,这样会导致整个文档拖沓冗余。还是举个例子:

在上面的规范中,除了元素大小,颜色,边距,其他均为需求交互文档里的内容。重复交叉的描述大大增加了阅读时间,不利于快速方便地查看。

以上两点是很容易出现的问题,有时候可能为了显得“丰满”,不自觉地就写多了,其实效果并不好,还是简练方便的文档更好用。

如何搭建设计规范

1.搭建时间

新的项目开动后,初期页面审核完成时即可开始整理规范。在整理的过程中可能还会遇到一些小小的改动,需要不断调整。当设计基本稳定时,规范也相应的可以制定出了。

2.搭建的要点

设计规范很重要的一点,就是提炼要点,形成该项目独有的设计语言。也可在自由发挥的部分给出一些指导建议,使得整个项目更具有统一感。比如可以从字体,颜色,图标,控件等角度出发,进行阐述。语言尽量简单明了,使用表格、图片等更有利于查看。

在设计的过程中,采用怎样的尺寸距离,怎样有效提升用户体验是一个值得研究的问题。本章只针对规范的制定进行讨论,不做延展。下面是谷小酒的设计规范,供大家参考:

字体

对于大部分app来说,都会使用默认字体,比如以IOS作为设计标准时,采用苹方。默认字体的好处就是程序上不用另外对打字体包。字体包通常都比较大,会导致系统变慢,不利于流畅的用户体验。但是默认字体也有不好的地方,就是显得大众化没有个性。对于一些强调腔调的应用来说,可能会精心挑选出一款字体。这就要看具体的项目需求,权衡利弊啦。

在这里不仅列出了字体的样式,字号,重要程度,建议行距,使用场景,还为其设置了一组编号。编号的作用在于:程序编写代码时可利用编号一一对应不同的css样式,后期迭代时,只需要修改css样式,就可以将对应字体一并修改,非常方便。这个方法是借鉴了腾讯视频的设计规范,第一时间就觉得非常好用,所以用在了本次项目里。

颜色

一个项目的颜色不宜太多,通常三个,不超过五个。谷小酒以红色#81125为品牌色,搭配黑色#333333,VIP页面为了突出尊享的感觉,另采用黄色#ffda77主打。由于涉及诸多页面和功能,需要有不同的信息层级,所以以此衍生出了其他颜色。

图标

图标不仅要在形式上作出规范,也要在命名上做规范。命名规则: 位置名称_功能名称_ 详细区分标志名称@2x.png。

例如head导航区域左边返回按钮命名:[email protected]

在后期图标迭代时,无需更改图标名字,只替换图片内容即可。

按钮

除了不同地方会出现一些形式不同的按钮外,还应注意统一按钮的不同形态。

弹窗

弹窗分为没有按钮,有一个按钮,有多个按钮三种。本次没有按钮的弹框采用系统自带的。有多个按钮的时候,注意区分推荐操作和次要操作,从表现形式上去引导用户。

二级导航

注意选项的可变化性,灵活制定规范。

列表

列表相对来说比较简单,由于重复使用的场景很多,也在规范中单独列出。

商品图片

谷小酒是米小酒旗下的一款高端白酒,该项目是以酒为主的电商平台,必然有很多商品图片的页面。商品图片除了尺寸还需对文件大小作出限制。图片如果不经压缩,文件太大,会非常影响运行的流畅度。有了这样的限制,方便和平面设计师以及和后台程序沟通。

间距

间距对于信息的分割是不可或缺的。对于同等层级的信息分割需采用同一距离,对于不同页面不同功能的信息分割也建议重复利用这些间距。保证使整个项目视觉上的统一流畅,有条不紊。