网站内容规划网页设计(老谭站在网页设计常用的基本规范与设计原则.)

　　网站内容规划网页设计(老谭站在网页设计常用的基本规范与设计原则.)

　　今天我们还是聊聊网页设计中常用的基本规范和设计原则。老谭从多年网页设计的角度解读八项新的设计原则。

　　网站界面设计就是网页设计。它不仅需要从外观上进行创意来达到吸引眼球的目的，还需要结合图形和版面设计的相关原则，使网站界面设计成为一门独特的艺术。任何网站用户界面的设计，甚至UI设计、视觉设计、手机APP界面设计等都必须遵循以下基本原则：

　　一。User oriented（用户导向），即用户体验设计的原则

　　设计一个网页或者APP，首先要明确这个网页的用户是谁，我们必须站在用户的角度和立场来考虑和设计网站。为此，有必要与用户沟通并了解他们的需求、目标、期望和偏好。网页设计者应该意识到，用户之间的差异是巨大的，他们的能力也是不同的。例如，部分用户可能存在视觉缺陷（如色盲），无法区分多种颜色；部分用户也可能存在一定的听力障碍，对网站语音提示的响应速度较慢；而且相当多的用户电脑体验还是很基础的，稍微复杂一点的操作会感觉很费力。此外，用户所使用的电脑机器的配置差异很大，比如显卡、声卡、内存、网速、操作系统、浏览器等。如果设计者忽略这些差异，设计的网页在不同的机器上显示时会造成混乱。

　　二。Keep It Simple And Stupid (KSS)，这里是网站的风格，如fresh、win7风格等。

　　KISS 原则是“Keep It Sample And Stupid”的缩写。简单和易于操作是网页设计最重要的原则。毕竟，网站是为普通网民查找信息和使用网络服务而建的。无需在网页上设置过多的操作，堆积大量繁复花哨的图片。本原则的一般要求：

　　1、 网页下载不超过6秒（普通家庭宽带2M，速度一般为220kb/s）；2、 尽量在网页上使用文字链接，减少使用大图和*敏*感*词*。从而加快网页的打开时间；

　　3、操作设计尽量简单，有明确的操作提示；

　　4、 网站的所有内容和服务都应尽可能在显眼的地方向用户说明。

　　三。响应式布局（Layout）由于终端界面的多样性，导致设计师需要考虑的因素很多。

　　在网页布局方面，很多网页设计师并没有给予足够的重视。网页界面设计和布局太死板，甚至抄袭别人。如果网页布局杂乱无章，仅仅在页面上堆放大量信息就会干扰读者的阅读。一般来说，网页界面的布局设计要遵循的原则是：1、7±2 的米勒公式。根据心理学家乔治·A·米勒的研究，一个人一次接收的信息量约为 7 位。总结一个公式：一个人一次接收的信息量为7±2比特。这个原理在网站建设中被广泛使用。通常，网页上的最佳列选择在 5-9 之间。如果网站提供给浏览者的内容链接超出了这个范围，人会在心理上烦躁。抑郁让人觉得信息太密，透不出来，很累。例如，列设置：Main、MyAol、Mail、People、Search、Shop、Channels 和 Devices 共八个类别。栏目设置：MSN主页、我的MSN、Hotmail、搜索、购物、金钱和人物与聊天，共七项。但是，国内很多网站的栏目设置远远超出了这个范围。2、组处理。如上所述，信息或列不能超过 9 个类别。但是如果你的内容太多，超过9个，就需要分组处理了。如果您的网页上有几十个文章链接，则需要每 7 篇文章添加一个空行或平行线以将它们分组。如果您的网站有超过 9 个内容栏，

　　四。排版和视觉平衡（Visual balance）

　　在设计网页时，各种元素（如图形、文本和空白）必须具有视觉平衡。根据视觉原理，图形的视觉效果大于一段文字的视觉效果。因此，为了达到视觉上的平衡，在设计网页时，需要平衡一个图片和更多的文字。另外，根据中国人的阅读习惯，是从左到右，从上到下，所以视觉平衡要遵循这个原则。比如你的很多文字都是左对齐的<Align=left>，你需要在网页的右侧添加一些图片或者一些更亮更醒目的颜色。一般情况下，每个网页都会有页眉部分和页脚部分。标题部分通常收录

一些横幅广告或导航栏和网站LOGO，而页脚部分通常收录

联系信息和版权信息。页眉页脚在设计上也要注意视觉平衡。同时，也不能低估空白的价值；网页上显示的信息非常密集，不仅对读者不利，甚至会引起读者的反感，破坏网站形象。在网页设计中，适当添加一些留白，以提炼和升华您网页的形象和美感，使页面简洁。这不仅对读者不利，甚至会引起读者的反感，破坏网站形象。在网页设计中，适当添加一些留白，以提炼和升华您网页的形象和美感，使页面简洁。这不仅对读者不利，甚至会引起读者的反感，破坏网站形象。在网页设计中，适当添加一些留白，以提炼和升华您网页的形象和美感，使页面简洁。

　　五。可以读取颜色和文字（可以读取颜色和文字）

　　颜色是影响网页的重要因素之一。不同的颜色对人们的感受有不同的影响。例如：红色和橙色使人兴奋，使心跳加快；*敏*感*词*使人联想到阳光，是一种欢快的颜色；黑色看起来更庄重，考虑你想对浏览者产生什么样的影响，选择最适合网页设计的颜色（包括背景颜色、元素颜色、文本颜色、链环颜色等）。为了方便阅读网站上的信息，可以参考报纸杂志的版面设计分栏的页面内容，甚至两栏的视觉效果都比整页更好。另一个可以提高文本可读性的因素是字体的选择。常用字体（Arial、Courier New、Garamond、Times New Roman、中文宋体）最易读，标题用特殊字体比较好，但不适合。文本。如果整页使用一些特殊字体（如Cloister、Gothic、Script、Westminster、Huawen Caiyun、Huawen Xingkai），读者一定会觉得不好看。如果在页面上大量使用这种特殊字体，阅读起来会相当费力，而且浏览者的眼睛很快就会疲劳，不得不转移到其他页面上。

　　六。网页设计的和谐与一致性

　　通过对网站的各种元素（颜色、字体、图形、空白等）使用特定的规范，一个设计良好的网页应该看起来很和谐。换句话说，网站的许多独立页面看起来更像是一个整体。保持网站界面设计的一致性很重要。一致的网站结构设计，让浏览者对网站形象有深刻的记忆和印象；一致的导航设计让浏览者可以快速有效地在网站中输入他们需要的部分；一致的操作设计，让浏览者快速了解整个网站的各项功能操作。如果违反这个原则，就会误导浏览者，使整个网站显得杂乱无章，给人留下不好的印象。当然，网站设计的一致性并不意味着它是死板的和一成不变的。有些网站在不同版块使用不同的风格，或者随着时间的推移不断修改网站，会给浏览者带来新鲜的感受。

　　七。创意、个性、时尚

　　1、符合网络文化企业网站不同于传统的企业经营活动，必须符合互联网网络文化的要求。首先，互联网原本是非正式的、非商业性的，仅被科研人员用来交换信息。其次，网络信息只显示在电脑屏幕上，不打印出来阅读。网络上的通信是隐蔽的，没有人知道对方的真实身份和信息。此*敏*感*词*，会大大增加网站的访问量。2、塑造网站的个性 另*敏*感*词*要与企业形象保持一致，很好地体现企业CI。

　　八。网页负载均衡规划与选择（Planning and selection）是web前端开发

　　1、大小·800*600可以照顾所有网友的电脑，但它是一个小报。·1024*768逐渐成为主流。1024*768 可以比 800*600 多一列信息。·正文页采用自适应设计，可以在正文页上制作更多相关内容。您也可以在主页上尝试自适应设计。自适应设计的核心是让一列具有灵活的宽度。·1024*76模式下，页面长度不能轻易超过10屏。·随着电脑的升级和分辨率的提高，电脑屏幕所能提供的面积越来越大。这是一种需要充分利用的稀有资源。从“小报”到“大报”，纸张成本会翻倍，而将网站改为“宽”的成本要小得多。2、字体大小·目录页使用较小的字体大小，以便放置更多的标题。·正文页的大字体。为了让读者读得舒心。·使用不易仔细看清的斜体。斜体的作用相当于图片，主要是美化版面。·使用搜索引擎友好的标记来表达重要的观点。3、颜色·同一页面上不要超过4种颜色。眼花缭乱，容易产生视觉疲劳。·色彩对比不要太反差。网页布局不是艺术作品，因此请避免通过形式来压倒内容。·文字+背景色可以起到很好的突出作用，相当于一张图片在视觉变化中的作用。4、静态化 · 对访问量大的页面进行静态化，以减少服务器压力，增强站点稳定性。

　　无法访问的网页是最糟糕的网页。·页面中的动静结合，可以同时获得轻负载和即时交互的好处。·哪些页面、哪些地方需要一开始就静态考虑，大量访问后，再考虑就来不及了。从动态到静态的过渡会出现很多历史问题。5、栏目·首页选择4个栏目？还是3列？· 在正文页面上多使用 2 列。· “纵向逻辑”是指从上到下排列相似的内容，而不是从左到右。如果读者对这个内容感兴趣，他会从上到下一行一行地阅读。这样可以充分利用第一屏，使得​​首页更容易被从上到下阅读。·避免一列太强和一列太弱。通过图片、红色套利等方式进行调控。平均使用读者的力量。让读者不敢错过左、中、右任何一栏。6、图·有图有真相，图胜千言。必要时使用它。因为编辑图片和带宽的成本远高于文本。·对于目录页上的图片，越做越小，多用特写；小分辨率，尽你所能。文字页面图片清晰美观。文本页面有布局。·正文页在5屏以内，尽量不要分页。让读者一口气读完。7、 导航栏与站点地图·导航栏为网站门牌号，不可随意更改。否则，读者会迷失方向，无法找到原来阅读的内容。·导航栏分类名称的排列顺序要兼顾重点和读者的阅读逻辑，即分类和放置。

　　·导航栏最多三行。最好的两行。太多的线很重。·更多导航是站点地图。站点地图的摘要版可以放置在站点底部，成为底部导航。网站的底部导航是必要的。优点是：一、可以放多行；二、 可以在网站底部形成阅读焦点。将阅读器从第一个屏幕带到最后一个屏幕，在此期间会添加大量点击。·主导航和频道导航：每个页面都有主导航，频道导航只出现在这个频道页面。8、 主页更新成本·主页设计不仅要考虑美观性和协调性，还要考虑每24小时更新一次的要求。更新是网站的生命，必须尽量减少更新主页的成本。·交叉自动同步更新的设计，有效降低各种首页更新的成本，让读者实时感受丰富的内容。·更新的实时主页是网站的资源，因为是资源，更多的标题会涌入这个主页。这样，良性循环，这个主页就会流行起来。不及时更新的主页是网站的鸡肋，会越来越孤单，最终会被抛弃。·每个主页都被设计为至少有一个让读者点击进入的理由。即时更新比独家内容便宜。·交叉自动同步更新的设计，有效降低各种首页更新的成本，让读者实时感受丰富的内容。·更新的实时主页是网站的资源，因为是资源，更多的标题会涌入这个主页。这样，良性循环，这个主页就会流行起来。不及时更新的主页是网站的鸡肋，会越来越孤单，最终会被抛弃。·每个主页都被设计为至少有一个让读者点击进入的理由。即时更新比独家内容便宜。·交叉自动同步更新的设计，有效降低各种首页更新的成本，让读者实时感受丰富的内容。·更新的实时主页是网站的资源，因为是资源，更多的标题会涌入这个主页。这样，良性循环，这个主页就会流行起来。不及时更新的主页是网站的鸡肋，会越来越孤单，最终会被抛弃。·每个主页都被设计为至少有一个让读者点击进入的理由。即时更新比独家内容便宜。因为它是一种资源，更多的标题会涌入这个主页。这样，良性循环，这个主页就会流行起来。不及时更新的主页是网站的鸡肋，会越来越孤单，最终会被抛弃。·每个主页都被设计为至少有一个让读者点击进入的理由。即时更新比独家内容便宜。因为它是一种资源，更多的标题会涌入这个主页。这样，良性循环，这个主页就会流行起来。不及时更新的主页是网站的鸡肋，会越来越孤单，最终会被抛弃。·每个主页都被设计为至少有一个让读者点击进入的理由。即时更新比独家内容便宜。