近几年来，独立站很火。连带着各种建站课程，建站服务都水涨船高。
但建站中很重要的一步，网站视觉设计，似乎鲜有人提及。
即便提及，要么一笔带过，要么就说的非常高深莫测。
但其实，这块非常重要，因为同类产品和网站多如牛毛，客户在google里一搜一大把，凭什么要看我们的网站？所以网站第一眼看上去精美、简洁、高大上、有良好的第一印象、能吸引住眼球，无疑是极度重要的。
有数据表明：高达38%的用户在看到设计难看的网站时，会直接退出网站！
然而，这块却是个是重灾区。因为视觉设计本身就是主观的、艺术的，你可以觉得美，我可以觉得丑，而我们跟西方人的审美差别又很大，这就导致很多不符合西方审美的“中式网站”，其实都是自嗨，西方人看起来是非常糟糕的，导致跳出率很高、询盘转化率很低，但我们自己却往往还没意识到。😢
比如下面这几个网站视觉设计，会让我们的潜在客户看了，把头摇得像风扇：
反面案例：
反面案例：
正因为独立站视觉设计如此重要、又存在如此多的问题，所以小哥想聊聊这个话题，揭开它的神秘面纱。
如果你希望有一个独立站，能够符合西方人的审美、独一无二、让人一眼看去非常高大上而且印象深刻、又能够提高询盘转化率，那这篇文章值得你认真阅读！
以下，enjoy！
本文的主要内容如下：
视觉设计有多重要？
为什么做出好的网站视觉设计这么难？
对齐审美：什么样的视觉设计才是“美”的？
网站视觉设计之前，需要做网站架构设计
用主题模板建站的话，还需要网站设计吗？
视觉设计需求文档怎么写？
怎么找到合适的网站视觉设计师？
网站视觉设计师的市场价格是多少？
怎么跟网站视觉设计师有效沟通？
怎么检查网站视觉设计师的设计质量？
网站视觉设计的整体SOP流程图
小哥自用的几个优秀视觉设计师推荐
我们一起看看下面这组数据，你就能明白一个好看的网站到底有多重要了：
1. 一个正常客户对你的网站形成第一印象，仅需要50毫秒，也就是0.05秒。
2. 高达38%的用户在看到设计难看的网站时，会直接退出网站。
3. 斯坦福大学的一份报告表明，75% 的人根据网站的外观来判断企业的可信度。
也就是说，如果你的网站设计非常糟糕，一个正常客户在0.05秒的时间内就能得出这个结论。其中75%的客户会因此觉得这个企业不可信，而38%的客户会直接退出网站，停止浏览。
看完这些数据，你还敢不重视网站视觉设计吗？
你可能会说，我的内容很好啊。
好看的皮囊千篇一律，优质的内容万里挑一，我相信客户不会这么肤浅。
但是，很抱歉，人类本质上就是视觉动物。
很多客户可能还没来得及细看你的内容，就被你糟糕的网站设计和布局劝退了。
你可能还怀疑网站视觉设计需要牺牲网站实用性。
可是，这不是一个非黑即白的世界。
网站视觉设计完全可以好用又好看。
当然，会有很多人批评那些中看不中用的独立站。
但你仔细想想，中看是缺点吗？
不是啊！！！
不中用才是缺点。
你可能觉得“网站设计只有大品牌才需要做，也只有大品牌才有能力做。”
可是，大品牌有大品牌的设计，小品牌有小品牌的调性。
好的网站设计可以传递品牌的独特性，专业性，以及留下良好的第一印象。
你可能担心设计费用太贵，但一个网站差不多5-6个重要页面，好一点的网站设计师全部做下来也就500到800美金左右。
大多数中小企业完全能负担起几百美金的网站设计费用。
如果你是soho，或者刚刚开始创业，网站设计可以等到网站盈利之后，再考虑改版升级。
注意，我说的是可以之后再做，但绝不是完全不做。
这其实真的是一个灵魂拷问。因为不是所有人对这个问题都有感触。
要说清楚这个问题，我们必须先理解两种技能的差别：艺术和技术。
● 艺术就比如音乐、美术、心理、文学等等。艺术类技能非常吃天赋，没有天赋，很难做到80分。而且无法凭借努力缩小差距。看看那么多学钢琴的、学绘画的、搞表演的，有几个高手？不同人的水平差距之大、犹如天渊之别，大到让人绝望，而且成功的概率是非常低的。用数据的话来说（抱歉忍不住又想到老本行😝）是典型的均值低、方差大（对这个感兴趣的话，我们可以另外找机会聊一聊，非常有趣）。
● 技术就比如工程、数据、手艺、技巧。技术类技能相对来说不那么吃天赋，没有天赋，也能凭借努力做到80分（当然要想做到更高分数也还是需要天赋的）。相对来说，不同的人之间差距没那么大，均值高、方差小、视觉设计就属于典型的艺术类技能。
上面这段有点烧脑，如果不理解没关系，我们用通俗的话来说一遍：
视觉设计和审美感觉比较吃天赋，而且不容易用后天努力来弥补，所以你会看到一些人对网站美丑没有太强的鉴别能力，而且不容易改变。
表现在实操中，就是你会发现，你找的美工，绝大部分（超过80%）设计出来的东西审美不行，匠气十足，没有高手那种轻灵、跳脱、创意、和谐的味道。
再加上很多朋友（请原谅我实话实说）自己的审美比较弱，那做出来的网站，就难免看着不太好看。而且最悲催的是，往往自己还意识不到。
所以我们下面会举一些好看和不好看的网站作为例子，让我们首先来对齐审美，然后再看具体的操作。不然就会出现：我觉得不错，你觉得不行的情况。😝
西方人喜欢的网站风格，是简洁、大气、精致、独特。
光用几个词语很难表达出直观的感觉，我们举一些例子吧。由于文章篇幅限制，这里只给出5个案例。
案例1：
https://tractive.com/en-us/pd/gps-tracker-dog
👍优点：主题色始终保持一致，整个网站看起来很和谐。
👎缺点：一是页面元素文字铺的太满，二是不够impressive，这也是大多数网站的缺点：不难看，但也缺少独特性。
案例2：
https://www.arlo.com/en-us/home
👍优点：页面留白多，显得大气。而且主题色的应用也比案例1更加的精心。
👎缺点：还是不够impressive，给人一种千篇一律的好看。
案例3：
http://demo.roadthemes.com/ginza/?storefront=envato-elements
👍优点：页面布局和元素精简，留白多，显得高级。主题色红色没有大面积使用，而是仅作点缀。配色和配图都极度的和谐，符合家居品牌的调性，给人一种极度舒适的感觉。
案例4：https://www.roguefitness.com/
👍优点：大胆的色彩搭配以及明暗的对比，页面的直接铺满，都给人一种大气且野性的美感，极度贴合品牌调性，给人留下非常深刻的印象。
https://www.meetsocks.com/
👍优点：动态效果的应用给整个网站加分很多，一下就让人觉得印象深刻，觉得很用心。
👎缺点：网站其他部分的设计跟以上两个部分的水平相差较大，无论是主题颜色搭配还是图片选择，都还需要继续优化。
好了，对齐审美之后，我们就可以进行下一步了。\
网站设计严格来说，应该包括网站架构设计和网站视觉设计两部分。
网站架构设计：设计网站的页面构成、及页面上各功能模块。
网站视觉设计：在确定了网站架构的基础上，让网站视觉设计师设计网页外观。
前者负责好用，后者负责好看。
但由于篇幅较长，我会分成两篇文章来讲，本篇主要讲述网站视觉设计部分。
在阅读顺序上，建议你先看独立站圣经的《网站架构设计》一文，再读本文。
实际上，对于重要的网站，不建议你直接用主题模板，除非你预算紧张或者时间紧急。
其一，主题模板没特色。
每个行业每种产品其实都有自己不同的风格特点：
● 机械类的，需要沉稳大气；
● 时尚类的，需要别致有设计感；
● IT类的，需要现代科技风；
● 生活类的，需要舒适宜人。
而一个通用的主题模板的设计，是很难传递行业特点的。
另外，你想想，这么多人都用同一套模板，长得都差不多，客户很难对这个网站有深刻印象。
而有别于同行的独特性，实际上是极度重要的。
哪个采购不是阅网站无数、阅产品无数的？看的都要吐了好不好？
你的网站好不容易做内容营销做seo做外链，吭哧吭哧排名爬上去了，有曝光了，被采购看到了。结果呢，没特色。。。。特色。。。。色。。。。。采购看看跟其他网站长的差不多，啪，把页面给关了。。。。。。
其二，网站架构和通用型的主题模板很难兼容。
网站架构是个性化地决定每个网站由哪些页面组成，每个页面展示什么内容。
但主题模板是预先就设置好了页面和功能模块。
主题模板一旦选择不好，你就会发现实际用起来要改的地方太多了。
本来是为了省事，结果事更多了ORZ
其三，一些功能齐全的主题模板，往往会拖慢网站速度。
正因为意识到个性化的需求，有些主题模板就加了很多页面很多功能，希望覆盖住大多数人的需求。
但是对不起，这在解决一个问题的同时，又带来了其他问题：功能齐全的主题，往往会有很多多余功能。
而这些多余功能带来的速度问题，是你后期怎么优化也很难解决的，除非换一个模板。
而换一个模板，很多时候意味着要重做整个网站。
你，愿意吗?
讲真，一份清晰的设计需求文档，会极大减少双方的沟通成本。
由于视觉设计是一个偏艺术的事情，需要描述出我们的期望和感觉。而对期望和感觉这类词语的理解，因人而异、千差万别。所以这类工作的沟通难度比技术类工作的沟通难度更大！
因此，在跟任何网站设计师沟通前，为了确保沟通高效、减少歧义，你应该认真准备好以下材料：
● 页面线框图，比如小哥在跟视觉设计师沟通之前，通常会画出下面这种线框图，让视觉设计
师清晰的了解网站架构：
我们在独立站圣经的《网站架构设计》一文中会对重要页面的设 计理念、设计逻辑和具体模块做详细说明，这里就不赘述了。
● 需要用到的图片文件
● 详细的设计需求文档
看着文档有点多，别急，我们下面一个一个说。
线框图应该是你结合网站架构设计思路做出来的，你可以用专业软件来做，也可以直接手绘。这一步在建站中很重要，决定了你的网站是否实用。
记住：线框图的核心是用户体验、和业务逻辑！
关于线框图的绘制方法，用工具绘制的，就如同上面我们展示的设计图一样。但是小哥要说明一点：完全不建议大家去专门用软件来绘制线框图！因为说到底，这对于大部分人是一次性技能、或者几年用一次，完全没必要为这个还去学一个工具的操作。小哥的一贯理念就是：够用就好！放心吧，手绘图一样好用。就像下面这张一样：
关于怎样设计网站架构、和绘制线框图，你可以看看独立站圣经的《网站架构设计》一文，我们在那篇文章里有讨论。
线框图做好了之后就可以提供给设计师，这样设计师就可以很清楚的知道网站由哪些页面构成、每个页面的功能模块长什么样了。
首先，至少要包括你的网站logo源文件。
如果还有什么其他图片，你希望提供给设计使用，比如产品图片，工厂图片，也可以一并提供给设计参考。
另外，图片的提供应该遵循以下原则：
1.明确图片的使用位置
千万不要提供了一堆图片，但就是不告诉设计师在哪个页面哪个部分使用。你自己是最了解每个部分是放什么内容的，哪些地方需要什么类型的图片，你自己应该一清二楚。直接通过文件夹命名+图片命名的方式，告诉设计师就可以了。
2.图片质量要高
网站图片，尤其是重要页面的图片使用必须要很精心。低质的图片还不如不用。因此你给到设计师的图片应该是你精心挑选过的高质量图片，而且尽量提供最清晰的版本。
3.源格式
能给源格式的，尽量给图片源格式文件，方便设计后期加工。
4.页面自动调用图片的部分
有些地方的图片，比如需要调用博客的预览图，产品预览图等，这部分其实没有太大必要给设计师图片。为了页面设计效果的完整呈现，你可以让设计师自己随意找一些图片替代。
5.如果你对自己的图片素材不满意，可以不提供。
很多2b的厂家，有一个很大的问题就是，没啥好看的图片素材。如果这种情况，你可以让设计师自行找一些符合设计风格的相关图片。
你只要在需求文档里提前跟设计师说明，需要ta去配所有的图就可以了。
反正至少先把网站设计出来。
之后如果你有可供更换的图片，可以后期再进行更换。千万不要因为没有合适的图片素材，就卡在那里了。
准备好图片文件之后，上传到google drive或者drop box，把下载链接放到设计需求文档里供网站设计下载。
设计需求文档，很多人听到【需求文档】这个词就觉得很高大上，不知道该写什么。
其实写需求文档很简单。
首先，我们可以把一份需求文档拆为3个部分：
● 项目介绍
● 网站整体风格要求
● 线框图细节说明
然后每个部分怎么写，小哥会给出模板和说明，不怕你学不废会。
你需要简单介绍下公司信息，让网站设计师知道这个网站是做什么行业，什么产品，以及目标客户是什么就可以了。
● 比如，你是做挖掘机的，那你的网站风格肯定有别于做水杯的网站。因为产品属性不一样。
● 比如，你是做商用产品的，那你的网站肯定也有别于家用产品。因为消费场景不一样。
● 比如，你是做2b的，那你的网站风格也肯定有别于2c的网站。因为目标人群不一样。
通过你对自己行业，产品，以及目标客户的一个描述，有经验的网站设计师大概就知道这个网站适合做成什么风格了。
以下是一份简单的介绍模板，你直接套你的行业产品和目标人群就可以了。
Project Introduction
xxx is a xxx manufacturer/factory in China, who provides xxx.
where to use our products: xxx
The target audience of the site listed as below:
-- distributor of xxx
-- dealer of xxx
-- wholesaler of xxx
Note: we didn't sell products to end user ('end user' means those who use the product directly).
如果你觉得还有一些其他的有用信息也值得设计师参考，也可以写上去。
但是注意：千万别说一大堆废话，比如公司成立于xxx年，获得了xx证书，等等。😝
这些对设计师没有任何参考价值。
通过简单的项目介绍，设计师心里大概对网站风格有一些想法了。
但是网站风格是一个很抽象的东西，你需要对整体风格和格式做进一步的阐述，让设计师更加理解你的想法。
而且最重要的是，一定要选2-4个你心仪的网站，给设计师作参考！千言万语，不如一个案例，尤其当你说的是非常抽象的审美感觉的时候！
比如以下这版：
Overall Requirements
1. u can provide web design in .figma so that our developer can be able to extract all the necessary pictures, sizes, fonts...
2.pc & mobile layout is needed for each page
3.style guide shall be given in the final file to guide the our later development work
4.overall style: high-end, simple & clean, dynamic.
5.interactive elements shall be included in the design, and show how they will work. Include but not limited to:
- hover/stick effect for header
- mouse over effect for images
- mouse over effect for other elements, like buttons...
- more...(depending on your design)
7. brand color: #b70100
8. website font: Futura PT
9. our preffered site style:
- good industry sites: example1.com, example2.com, example3.com...
- good b2b website sites: example1.com, example2.com, example3.com...
We expect a perfect comobileination of industry website & B2B website style...
10. images u can use in design: https://drive.google.com/drive/folders/xxx?usp=sharing
11. deadline: 10 working days
If you need more info, confirm with me anytime.
以上就是我一般会给到设计师的风格和格式要求。
如果你对某一元素，比如字体，没有指定的要求，那你也可以让设计师根据整体设计风格自行决定：u can decide it according to the overall design style...
风格和格式搞定了，那该说说内容了。
线框图是对一个页面内容大方向上的描述，设计师可以通过这个了解页面的主要模块及功能。
但具体每个模块包含哪些元素，有哪些要求，设计师是不清楚的，我们还需要进一步的描述。
拿之前提到的我们某个网站的首页线框图举例：
首先，我会给该页面每个模块编号，方便设计师知道我在说哪个模块。
其次，依次对每个模块进行说明。比如：
1. header
main menu: product category1, product category2, product category3, product category4, product category5, Blog, About, Contact
sub menu: u can fill something like【submenu1】【submenu2】,etc, put it under any main mennu, so that we can confirm the design effect.
other elements on header: logo, site search function, language translate options, cart function...
effect for header part: always stick to the top; highlight the main menu according to the current page u are at;
some preffered header style: screenshot1, screenshot2...
2. banner
banner 1:
image: find an image about xx product, the style should be close to below screenshots.
scrrenshot 1, screenshot 2...
title: Your Reliable xx Factory
description: Our xxx is built to last....
button: Buy Now
banner 2:
image: use below image as banner image material, if necessary, pls also do some beutification on it to make it suitable for overall style.
screenshot 1 (u can find the clear and psd version in image folder)
title: OEM for Your xx Business
description: Your one-stop xxx supplier...
button: Buy Now
banner effect: pls design a hover effect on banner; pls design the switch effect between 2 banners; all the text is coded on the image so that we can edit it easily;
some preffered banner style:
一般这种需求文档给出来，设计师就可以直接拿去用了，不需要再浪费时间反复沟通和确认。
另外，如果你对某些细节点暂时还不太确定或者比较纠结，比如banner上的文字写什么，button的文字到底是写buy now还是learn more，等等等等。
这些你不确定的文字部分，能不能让设计先随意填充呢？
最好不要。
实在没有想法呢，就参考竞争对手，总之给一个初稿出来。
虽然，你写什么文字内容对设计师都没什么太大区别。🙈
但是你给出初稿的话：
一来，设计知道每个部分大概的文字量。而文字量的多少是会影响到模块的样式的。
二来，方便你后期优化文字部分。有一个初稿版本对照，后面优化起来不需要苦思冥想当初设计这个部分到底是写什么内容。
本节内容另找机会讨论。
本节内容另找机会讨论。
本节内容另找机会讨论。
我首选肯定是figma格式（.fig）。
大部分专业网站设计师都可以提供这种格式，也很方便跟开发对接。
而且，一般figma格式给出来，开发就没有太多需要跟设计一对一沟通的部分了。
根据小哥的合作经验，设计师的交付时间大概是这样的👇：
Day1 - Day3：交付首页pc版。（如果设计师需要排期，那从ta开始给你设计的第一天算起。）
Day4 - Day6：反馈并修改首页pc版设计。
Day7 - Day10: 交付剩余页面的pc版。
Day11 - Day13: 反馈并修改剩余页面pc版设计。
Day14 - Day15: 交付所有页面mobile版本Day 16：反馈并修改mobile版本Day 17：提供所有页面pc+mobile的figma源文件+图片版本文件
你应该注意到了，网站设计的交付是分4个批次交付的：
Day1 - Day3：交付首页pc版。
Day7 - Day10: 交付剩余页面的pc版。
Day14 - Day15: 交付所有页面mobile版本
Day 17：提供所有页面pc+mobile的figma源文件+图片版本文件
关于交付时间点，你要提前跟网站设计师确认清楚。
那为什么分成4个批次交付，而不是一次性交付呢？
首先，首页pc版的设计，能够测试出来这个设计师的审美风格。
如果审美不合格，后边就不需要浪费时间了，赶紧换人。
其次，如果审美还不错，那通过反馈修改首页，你可以进一步测试设计师的沟通协作能力。
如果沟通协作也没问题，那这个设计师就可以正式合作了。
首页风格确定好之后，网站整体风格也就定下来了。
然后，就可以用同样的风格去设计其他页面pc版。
最后，所有页面pc版确定之后，再让设计师提供所有页面mobile版本。
有人问，为什么mobile版本最后一次性交付，而不是跟对应页面的pc版一起交付？
答案是，避免反复修改，提高效率。
你想想，如果一个页面的pc版和mobile版一起交付，那每次改pc版，mobile版本都要改。
那为什么不干脆等到所有页面pc版确定好了之后，再交付mobile版本呢？
pc版确定好了，mobile版本的问题其实就很少了。
至于整个项目的完成时间，我给出的时间其实略有余地。
但不管怎样，一般的独立站在半个月左右应该就可以完事了。
当然，在实际沟通的过程中，你可能遇到：
● 有的页面特别满意，直接过。
● 有的页面修改点很多，改了一个星期。
这都是有可能的。
我只是给出一个时间范围供你参考，你可以根据自己的实际情况做出调整。
ps：如果项目紧急，在写需求文档的时候，就算预计两个星期完成，也最好只写一个星期或者10天完成。这样即使过程中有任何的延误，也大差不差会在半个月左右完成。
说完了交付时间的考虑，那现在该聊聊页面的反馈修改了。
从交付时间这一part就可以看出来，反馈修改一般分为3个阶段：
Day4 - Day6：反馈并修改首页pc版设计。
Day11 - Day13: 反馈并修改剩余页面pc版设计。
Day 16：反馈并修改所有页面的mobile版本
那在检查交付内容的时候，有哪些要注意的点呢？
最直观最简单的检查方法，就是好不好看！
查看首页的时候，你就当自己在浏览一个新网站，好不好看真的一眼就看出来了。
如果设计的巨丑，你甚至觉得没有继续修改的必要了，那就直接跟设计say goodbye。
审美不好的设计，最好从一开始就不要合作了。
因此以下这段话，你在合作之前就一定要跟设计说清楚：
Just one more thing to confirm before cooperation is: if we are not happy with the design of home
page and we can't see any chance to make it better.
In this case we can send you a written statement that we will not use any part of the design you provided and will end the contract.
Are u agree with this and willing to initiate the refund if the worst condition occured?
当然，你可以视情况给一些辛苦费用。
如果你觉得审美还不错，那就进行下一步检查。
如果说整体视觉效果可能有点唯心主义，那对照着线框图和需求文档一一对于检查无疑更具有理有据。
这个就不用我教你怎么检查了吧。但凡跟你的需求文档不一致的地方，都可以提出来要求设计去调整修改。
比如：pls help confirm the brand color again: #b70100 is our brand color, if you are not applying #b70100, pls change to it.
你一定要意识到，自己的需求文档是有局限性的，不可能包括所有问题的说明。
很多问题只有在你看到之后，才知道要怎么改。
比如按钮太小不容易点击：
for all the switch buttons, it's too small and make it not easy to click, pls change the design of switch effect. Including below parts: ...
再比如产品分类展示区域不够大气：
category section: delete all the buttons and then make it no margin, so as to make each category section bigger and more obviously; and the images for this part seem too dark and not easy to recognize the products, pls change them.
这部分的问题，虽然需求文档没有说明，但它是结合实际设计效果给出的修改建议。只要你的建议不要前后矛盾，反反复复，一般设计师都会配合修改的。
因为设计图是静态的，很多人会忘记检查这些互动元素。
比如banner切换效果，鼠标悬浮在图片上，悬浮在按钮上的效果。
比如点击效果，比如点击主目录后的下级目录展开效果，点击搜索框，点击语言切换的效果。
所以我一般也会在最开始的时候跟设计师强调这段话：
pls let us know the hover effect of below elements:
- header menu (what's the style of submenus)
- search icon (how it looks like after click the search icon)
- language icons (what it looks after click it)
- hover effect of image and button
以上就是平时我自己在用的检查方法，希望可以帮助你控制整个网站设计质量，交付出让你满意的网站设计。
本节内容另找机会讨论。
本节内容另找机会讨论。
小哥希望通过以上分享，能让你不再忽视网站设计、也不再把网站设计捧上神坛。
如果对网站设计还有什么疑问，或者有一些体会，欢迎在下面留言跟小哥讨论！
最后，感谢你的阅读！
添加表情
分享至微信
