网页设计

网页设计是一个耗时较长的过程，有很多的规则需要确定，所以创建一个word或者 Typora文档，来记录确定下来的网页设计方案，是很有必要的，否则时间一长，容易忘记。

需要明白的是：用户/访客对电脑技术的了解没有我们多，所以设计网站的时候要充分考虑到用户的程度，考虑到网站的便利性。网页设计的第一原则，就是用户的体验至上。

切记：用户都不宽容。网站上无论是小错误，比如拼写错误或者无法显示的图片；还是大错误，例如销售有瑕疵的商品，都会给用户留下不好的印象。用户记住坏事比记住好事的时间要长的多，一旦留下了坏印象，意味着您可能失去了一个潜在的用户。所以无论是在网站的设计过程中，还是将来网站的运营中，都要竭尽全力地避免发生这样的错误。

1.2 色彩

网页的色彩种类不宜过多，即使您的网站的受众是小朋友，也不应该把网站搞得色彩缤纷，过多的色彩会喧宾夺主，让用户无法专心于网站的内容上。建议只用三种色彩，正文一种颜色，链接一种颜色、需要强调的文本一种颜色，选择的颜色与背景的搭配要和谐。色彩的选择还要保持统一，用同样的颜色、小图标来表述同样的事情，增加用户的记忆，避免用户迷惑。比如使用红色来代表出错，绿色代表正确，黄色代表警告。但要注意有些人是色盲，而有些浏览器会改变字体颜色。

应该按照您准备创建的网站的类型来选择合适的色系，选择正确的色调会给网站添色不少，暖色还是冷色很大程度上取决于网站的内容，而不应该仅仅是您自己的给人喜好。有很多的网站提供了配色选择，如下推荐一个：

The Color Wizard

1.3 背景图像

很多人会选择好看的图片来作为网站的背景，比起雪白的背景，自然要好得多。过大的背景图片会增加页面的加载时间，虽然随着科技的发展，网速越来越快，这点影响很多时候都是可以忽略不计的。实际上，你只要不要采用好几个MB的图片来做背景，一般都不会影响页面加载的。但一个较小的背景图片总是好于过大的背景图片，推荐作为背景的图片不应超过10k（这不是硬性规定）。如果是采用花纹或者单色来作为背景的话，可以将其裁剪一部分（从而使图片变小），比如100*100像素，然后利用 css 的 background 的 repeat 铺满您指定的网页区域。

图片一律采用小写英文单数命名，采用有意义的英文名最佳。曾经遇见这样的错误，本地Wamp平台不区分大小写，西部数码的服务器区别大小写。boxLoginSuc.jpg，因为L小写，结果该图片在西部数码的服务器上不被识别，图片无法显示。某一图片2.JPG 不被服务器识别，要改成2.jpg才行。请不要使用中文来命名图片，有时会导致图片无法显示的。

网站使用的图片格式一般有：png、gif、jpg。png的背景是透明的，一般网站上用到的箭头、购物车小标识、小星星（用于评价）、心形图标都会采用png格式，这样的格式体积小，图片清晰。如果想创建 png 格式的图片，photoshop CS6 中点击 文件--存储为Web和设备所用格式，会弹出一个对话框，右上角“预设”选择PNG-24，勾选“透明度”，即可。photoshop 2020 中点击"文件"，选择 “导出”，“存储为Web所用格式”，也可采用快捷键 Alt + Shift + Ctrl + S，将图片保存为适合网站使用的格式。常用的格式是jpg，“预设” 选择 “JPEG高”，勾选 “优化”，“品质” 选择 “60”。如果 “品质” 选择 “100”，显然所得图片会更加清晰，但图片会变得大很多。网站的图片会相当多，加载图片是需要时间的，越小的图片加载越快，但图片变小肯定影响其清晰度。作者认为，60的“品质”能够很好地平衡这两者间的矛盾。

图片的规格，最为常用的应该就是黄金比例，即宽度与长度比为0.618。0.7、1 : 1的比例也是很常用的，取决于网页的实际布局。不止是图片的规格，整个网页的布局也请尽量的使用以上的比例，会让您的布局更符合美学的。

图片的使用是网页布局中很关键的部分，合理地在文本内容中加入图标、照片、插图等，会使网页变得生动活泼，更具信息性并易于浏览。穿插在大段文字间的图片，能够缓解用户的视觉疲劳，保持继续阅读的兴趣。展现实景的照片有助于作者更好地阐述事实，能使用户更好地理解文章。在图片的使用上，要保持灵活性。在同一个页面使用时，尽量使用不同长宽比的图片，使布局不至于死板。可以给图片加上简洁的相框，或者采用漂亮的图案来代替无序列表前沉闷的黑点，都能给页面增加新鲜感。如果要在图片上面放置文字，可以为文字添加一个半透明的背景，效果非常不错。可以在图片的某个角落加上网站logo，也是一种让用户加深对本网站记忆的方法。

1.5 字体

字体的选择对网页风格的形成贡献很大，采用不同字体大小的字、精心选择的字体颜色可显著提高页面的吸引力。正文字体颜色采用#515151灰黑，而不是#000全黑，视觉效果要好得多。正文字体大小选择1.4rem，相当于14px。使用 rem 来设置字体大小，浏览器默认字体大小为16px，设置html {font-size:62.5%; }，10 ÷ 16 × 100% = 62.5%=10px，即1rem=10px。rem只相对于根元素html的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。当需要修改字体大小时，您只需要修改根元素html的font-size就成比例地调整所有字体大小，而不需要逐一修改所有字体大小。这就是采用相对大小的rem，而不是采用像素px来作为字体大小单位的好处。当然不是所有的字体都一定要使用rem来作为单位，不排斥部分字体采用px或者百分比来作为字体大小的单位。不只是字体大小，元素的高度height、宽度width、margin、padding等等都推荐采用rem作为单位，非常有利于网页布局在不同大小屏幕之间的适配。

“添加到购物车”、“马上购买”、“下载”、“登录/注册”等按钮，可以比正文适当的大，采用不同于正文的颜色来吸引人，放置在能够引起人注意力的地方。

1.7 网页宽度与长度

很多网站都喜欢将网页宽度设置为全屏，全屏可以充分利用屏幕，能在同等高度的情况下容纳更多的内容。缺点在于，容易给人压抑的感觉，过多的信息量反而会让用户失去进一步阅读的兴趣。建议网页宽度采用1000、1200像素，适当留白。

一个好的页面布局应该保留适当的空白，切忌在一个小小的空间内堆砌过多的内容，拥挤不堪的页面会给用户带来不必要的压力，导致他们快速逃离。避免把有意思的内容放在侧边栏上，这样会分散用户对主要内容的注意力。

网页页面不宜太长，不要超过3个屏幕（1600像素左右）。除了文章，其他类型的页面如果总是让用户一直不停的滑动鼠标的滑轮来查看页面，会是一个非常不好的体验。如果页面过长，可以考虑通过锚点来提高用户体验；或者将过多的内容分页。

网页结构宽度最好采用相对宽度，css 中将 width 设置为百分比，当屏幕宽度变化时，整个网页结构就能等比例缩放。采用 margin 设置适当的页边距，否则当屏幕变小时，内容会紧贴着屏幕边缘，影响视觉效果。

1.8 链接

确保清晰地链接站点的每个区域，并在页眉放置通用的链接，使访客很容易发现这些链接。通用的链接一般包括购物车、访客帮助和用户登录/注册等。给每一个链接加上描述（当鼠标经过链接文本时），减少用户的挫折感。

不要只是用颜色来区别段落中的超级链接文本，应该还要用字体、字体大小的不同来区分。

外部链接一般放在网站底部区域。在商品分类、商品详细、购物车页面的链接应该是能够带用户直接到最终答案的页面。在这些页面要减少链接层次，把需要提供的信息全部都展现出来，尽量避免用户需要点击多次链接才能看到他们想要看到的内容。也不要在页面内提供过多的导航选择，过多的选择意味着无法选择，会让用户产生挫败感，降低对网站的好感。

1.9 表单

在每个表单内，用文字描述来清楚地告诉用户他应该在该表单内填入的内容。如在邮箱的表单内写上：请填入邮箱地址。

留言处的表单内，可以给用户提示一些问题，来引导他的留言。比如：您喜欢什么样的有机食品，您更在乎价格还是质量？您喜欢杂粮吗？等等

1.10 文件命名

网站站点内的文件夹名称、文件名称尽量起得准确，富有逻辑性，不但便于自己后续网站的编写工作，也有助于网络搜索引擎容易捕捉到。采用英文，还是不要用拼音（以后可能会有意义），因为拼音没有意义。

1.11 文字内容

网页上的文字尽量精炼，言简意赅是最好的。没有人愿意花时间看一大段毫无吸引力的文字。更多的情况是，一看到大段的文字，他就把网页关掉了。务必记住：您写得越多，用户记住的越少。应该采用高质量、可读性强的文章，而不是一大段复制粘贴而来的文理不通的网文。

如果是销售商品，应该提供足够的产品资料，强调产品有别于同类的特点，尤其是要提供用户最为关心的产品关键数据。顾客必须得到商品尽可能多的信息，因为他们不能真正看到 、感觉、触摸到商品，他们只能依靠网站提供的信息来做出购买决策。用数字、数据来描述产品，而不是大段落的文字，文字越简洁越好。用户表扬和评论很重要，罗列出某些也在使用该产品的大客户、大酒店（如果有的话），都能在一定程度上促使用户做出最终购买的决定。

除了文本信息外，图片对销售而言也是一个非常重要的部分。提供高质量的图片可以使顾客清楚地看到他们要购买的东西，但在网站上面如果添加过多的图片，就可能会使潜在的顾客等待过长的时间（加载显示图片需要时间），所以必须在这两方面找到平衡。商品照片无需太多，优选几张最能体现商品外观、应用场景的照片即可，过度堆砌照片，只会分散用户的注意力，对促成商品交易用处不大。

主页一般都会采用幻灯片来显示内容，以便充分利用页面。制作幻灯片时，最重要的是要让用户明白总共几个页面，每个页面要有显著的差别，可以从：标题，颜色，页面修饰几个方面来区分。

注意避免存在不能回到主页的网页，任何页面都应该至少有一个回到主页的链接。网站导航链接的层次不要过深，最多不要超过3层。一般较为合理的设计是3层，即导航链接―列表链接―链接的具体内容。

3 页眉页脚设计

页眉页脚会做成两个独立的php文件，命名为header.php与footer.php，用于包含在各个网页中。因为用户大多默认重要的链接在页面的顶部，所以重要的链接应该放在页眉。

页眉一般包含：网站名称/logo、登录/注册、帮助、会员中心、网站的主要栏目等。

坚持一个原则：不需要就不显示。举例来说，如果用户尚未登录，那么就没有必要显示需要登录才能使用的链接，例如“会员中心、购物车”等功能。

网站名称/logo可采用corelDraw设计，它是一款非常优秀的图形图像制作设计软件，名片、宣传册等也可以用它来设计。花些心思来制作您的logo吧，一个能够给人非常深刻印象的logo会为您的网站添色不少，有助于网站的传播。利用广告标语、logo商标、字体、图片、描述等来使网站品牌被用户记忆、接受。要突出品牌唯一性，才能加深访问者的印象。

页脚还会包含联系方式，社交按钮如微信等也应该放在页脚恰当的位置。页脚最重要的内容是网站地图，就是整个网站最主要的网页链接地址。应该把网站地图放在页脚处，而不是单独的一个页面。

网站编写完毕后，最好进行验证，可验证HTML 、CSS、XHTML等的语法、结构是否规范。通过W3C的验证，会让您的网站更具可靠性、更规范。在编写网站的过程中，就可将本地文件上传至 W3C 进行验证，提前了解哪些语法是不可取的，有利于规范后续网站的编写。

网页/CSS 验证

将如下两段代码（验证标识）复制到您的网页合适的位置，一般都是放置在页脚。当网站上传至远程服务器，正式运营前，还需要进行最终的验证。点击某个网页的页脚验证标识，就会自动验证对应的网页。只能一个个页面验证，无法整个网站进行验证。尽量根据验证反馈进行改正，如果网站可以正常运行，某些语法无法验证通过，也不必过于较真，可以忽略不计的。

1 css 验证

css 验证标识：

2 网页验证

网页验证标识：

要鼓励成为会员，比如成为会员后第一次购买享受九折、下载资料的权限、得到小礼品，这样才能让人有兴趣愿意花时间来填写资料完成注册。如果您的网站可以提供一些富有吸引力的信息订阅，也会带来潜在的客户，应该与注册一样尽量便利。

要让注册非常便利，要让他们觉得是在填写一张表格来完成商品的订购，而不是被迫成为会员。不应该要求用户填写太多个人资料才能注册，只需要一个用户名、一个密码就可以创建一个新账号，没有必要非要用户填写联系方式、家庭住址等较为敏感的个人资料。切记：有需要才索取，无谓的索取只会让人反感，不会有人愿意为一个自己刚接触的网站提高那么多的个人信息的。对于购物必须的用户联系方式与送货地址，完全可以在Ta完成订单后再索取，而不必非在注册的时候索取。此外，注册步骤也很关键，要让用户能够清楚的明白他的下一步应该做什么，不要下一步下一步地没完没了，注册步骤必须尽可能的短。

登录/注册框内的内容也应该简洁，以midhe的登录/注册对话框为例，项目“用户名/密码”不用再写在方框的旁边，而是直接写在方框里面，大大节约了空间，使得留白能够更多。为了显示对用户的尊重，“用户条款”的链接是必不可少的。

尽量不要使用验证码，很多人会有困难。非要使用，也要尽量简单。对一些有视力缺陷的人，需要使用语音代替。一个正常人都无法识别的验证码会让用户觉得您根本没有为他人着想的品质，相信我，在您的网站发展到值得被人攻击前，你都不需要验证码。验证码只会考验您潜在的客户，让他们失去耐心。

5 帮助

这个栏目包括：网站简介、如何使用网站、如何管理帐号、常见问题、积分细则、用户条款、隐私安全。尽量使用户能够很容易得到帮助，提供联系方式最好在页眉，也可以放在页面底部，记得提供多个多种联系方式，电话号码与微信同样重要，很多用户会喜欢留言，而不是直接的电话交流。400开头的电话号码曾经风靡一时，但现在太多的负面新闻已经让它不太可能获得用户的信任。还有固定电话，骗子或者垃圾推销电话过多，导致现在的人基本上不会再接任何显示为固定电话的来电了，所以最好提供手机号码。另外，微信提供了一种很好的在线聊天途径，而且能够传送图片，所以很适合用来与用户沟通。QQ曾经很常用，现在基本上被微信代替了。不过还是提供吧，还是会有人习惯了使用QQ的。电子邮件地址，不是最佳的选择，尤其是对于中国人而言，很多人没有使用邮箱的习惯，而且许多人都不愿意花时间等待问题的回复。但至少这可以为顾客提供一个发泄不满的通道，网站也可从容准备正确的回应和响应。

6 购物网站设计建议

购物/交易的流程应该直接、简单，用户一般都比较懒，千万不要考验用户的耐心。用户在网站上查找需要的商品、感兴趣的文章、新闻资讯，弄明白站点注册方法时不会想付出任何辛劳，一旦所花费的时间超出他们内心的预期，他们会毫不犹豫地离开。他们不想尝试繁琐的结账过程，不想一页一页地查看文本，收集信息。所以网站应该简化流程，清楚地安排网站内容，突出关键信息，使他们易于查找。

许多研究显示，网上购物者放弃其购物车的情况约占整个购物活动的很大比例。分析这些被放弃的购物车的情况，会有助于我们对网站的流程、购物体验做出有针对性的改进，从而提高网站购物的成功率。

添加附加的购物建议，一旦顾客把某种商品放在购物篮中，就可以在当前商品的旁边（下边）显示其他顾客已购买的相关商品的建议。

顾客想知道，网站接到订单后，商品何时准备发送，何时送到。他们希望得到一个跟踪号，以查看货物送到什么地方了。设计良好的网站必须提供一种途径给客户，让他们能够检查他们的订单的状态，如：已发货，已取消，已送货到家等。

顾客付款后都会迫不及待的想要马上看到自己订购的商品，作为网站运营方，对顾客这样的心情必须理解。及时送货会是一种美德，也是让顾客产生这家网站很可靠印象的最简单的方法。把商品交到顾客手里的一般期限是两三个工作日（路途遥远的话可以适当延长）。如果能更短，顾客会更加满意，否则就需要确保顾客知道这需要较长的时间，并给顾客提供合理的解释。唯一的例外是，顾客预订了某个需要时间定制的商品。为顾客提供许多送货选项也很重要，即可以让顾客来决定商品何时送到，以及送货的费用是多少。

互联网时代，只用通过点击鼠标就可以来比较几乎所有商品的价格，谁都希望最少的钱买到最多的东西。对价格应该进行研究，以确保自己的价格与网上销售的同类商品相近。但并不是所有的顾客都仅根据价格来做决定的，很多人更喜欢高质量的网站提供的带附加值的服务，所以如果缺少价格优势，就应该考虑提供带附加值的的服务（能够给顾客的生活带来方便）。

应给顾客提供一种方法，便于找到他们需要的东西。准确而快速的搜索引擎就足以完成这个任务。把这个功能添加到网站上有许多方法，例如用PHP手工编写代码，或者关联一个第三方软件。改进搜索引擎的另一种方式是确保可以包含拼写错误的术语和不太常见的术语，从而给顾客提供尽可能好的搜索结果。

只有少数大型网站有能力销售大量不相关的商品，但我们这种小型购物网站可没有这种机会。所以一定要选择与网站相关的商品，否则顾客就被搞糊涂了，被不相关的商品转移了注意力。而且，过多的品种会增加进货资金的压力。

需要给顾客提供通道来表达他们的意见或提出问题，同时我们也能获得一些有用的反馈。给顾客提供一种激励机制，鼓励他们完成调查或提供某种反馈。例如免费送货、下一次订单的折扣，或者某种小礼品等。把调查的问题控制在20个以内，使顾客能方便的完成调查。不要仅要求顾客提出评论，而应该要求顾客具体给出某一方面的评论。确保我们得到有价值的反馈。

7 值得参考的网页设计

青若想胜于蓝，就需要先明白何谓蓝。创新始于模仿，要想设计好网页，首先需要先接触那些设计美好的网页。花点时间查看各种各样类型的网站（包括但不限于您准备创建的网站类型），看看您喜欢这些网站的什么方面？不喜欢什么方面？通过模仿，不断的模仿，最终会创造出截然不同的网站。如下是一些设计较好的网站，希望能给您们带来一些灵感。

Abel & Cole

有机食品销售及配送网站，风格清新。

zazzle overstock