无论是手机网页设计还是传统网页设计, 网站都需要以内容为中心。网站是用来给浏览者看信息的, 是向受众提供某种信息或服务, 因此网站建设最重要考虑的就是用户的需要。针对不一样的用户势必产生不一样的设计方向。网站是以内容为王道的设计, 不是仅仅选个喜欢的字体、颜色、图片就能做好的。网站页面的各种构成元素都要是为了更好地显示内容, 更好地与用户交流而设计。一个成熟、专业的网站, 需要设计师对网站的风格、功能模块、内容、交互等进行整体策划。
1、风格一个网站是依据这个企业的形象、性质、内容、功能等原因, 甚至对浏览者的预判综合考虑得出的设计风格。Window 8的风格是一个单色块, 配上简洁的文字或图标, 去掉各种投影、水晶成效等特效, 凸显以内容为主。这种以内容为主的简洁化设计风格愈加时尚。但不见得所有些用户或者所有些用户都适用这种风格。不同性质的网站有不一样的需要, 科技网站、艺术网站、音乐网站、商业网站等, 都会有一些不一样的个性。设计师不可以由于某种风格时尚, 或喜欢某种风格, 就想尽方法在目前的设计项目中体现出来, 最后这种风格的视觉成效总是有点不伦不类。2、版式网站的版式设计是受内容限制的。一个网站的内容不是单一的, 越是综合类网站, 内容分类越是冗杂, 那样对于冗杂的内容来讲, 哪类内容放在首页?哪类内容放在次要的页面?甚至什么内容放在首页的首屏?这类内容的分布排列对网站建设起着要紧有哪些用途。绘制这类内容逻辑分布的过程就是绘制线框图。线框图不止是用来给设计师进一步美化的依据, 也是前端开发职员书写浏览器程序的时候参考。一个懂网站建设的人, 从线框图就能看出这个网站的根本。一个页面的板式设计需要从内而外的矩形。以前端技术的角度来剖析, 网站建设其实就是在一个大的矩形 (显示器) 上用HTML语言切割成各种小矩形。每个矩形里面切割更精确的矩形用来达成每个内容地方的摆设。从设计的角度来剖析, 栅格系统设计、栏的定义都是方块的设计, 就像做拼图一样, 用各种方块按着需要来进行各种大小、地方的排列组合。就算是圆形的图片, 其根本也是一个矩形, 只不过圆周围是透明的而已。所以一个网站的基础版式分布, 就是规划各种矩形的排列组合。3、字体网站的进一步美化过程, 其实就是在线框图的布局基础上, 用颜色、字体、图片等方法进行画面的装饰过程。一个出色的网站肯定有着出色的字体设计。出色的网页设计人员会用单纯的字体样式排列出很适于阅读, 又能体现出网站风格的视觉成效。网站字体的选择不可以随设计师爱好随便运用, 要考虑到当不一样的用户打开该页面的时候, 假如浏览者计算机上没安装这种字体, 用户浏览器默认的字体是不是能非常不错地显示该内容?所以, 网站字体都会选择系统势必会有些常规字体。但像按钮、栏目的题等特殊部分, 因为不会常常变动更新, 可以选择比较特别的字体, 但需要转换成图片, 前端开发职员以图片的形式来运用这个部分。一个网页假如选择宋体字, 字体大小不适合小于12像素, 由于宋体字中横过于细, 太小会干扰字体的显示。由于不少字体只专门处置了常见的几个偶数字号, 所以为了便于每个浏览器兼容, 显示成效一致, 网页字体大小的选择通常是偶数, 有的浏览器会默觉得挨近的偶数字号显示。4、图片一个优质的图片能给商品或企业带来好的印象。目前不少网站首屏都是应用愈加大的图片, 并且通过手工或自动切换图片显示。这类图片可能是一个出色的摄影作品, 也会是一个出色的平面广告等, 这类图片都是精心设计过的, 拥有好的品质。为了让用户有更好的网站体验, 不少图片都是以小图当预览图, 点击之后才显示相应的完整图片, 如此有哪些好处是能在不确定用户需要什么图片的时候尽可能迅速地让用户看到, 有益于网站SEO体验和增加网站浏览速度, 有的网站图片提供放大镜成效, 当鼠标移动进入到图片的地区时会展示相应的局部大图, 这种成效通常在淘宝等购物网站较多, 便于用户查询产品细节。另外, 目前不少以图片为主的网站都以瀑布流的方法展示图片, 这种成效在HTML5和Javascript技术普及后愈加多。5、交互性一致性的交互方法可以让用户更好理解整个网站的操作, 从而提高浏览效率, 不可以到处都是不一样的交互方法, 会带给人凌乱的感觉。交互需要提供反馈。比如鼠标移动到一个新闻标题链接按钮的时候, 需要肯定的反应会带来好的操作体验。界面要一直维持和用户的交流。又如一个注册页面, 目前容易见到的交互方法是运用AJAX技术, 当输入完用户名的时候会自动和数据库中的信息进行比对, 测试是不是有人注册, 然后在用户输入框旁边直观地显示, 这带给人以很好的交互体验。网站交互设计还要便捷用。达成目的功能的最少操作数、鼠标最短距离移动原则等。交互性的最根本的目的其实就是为了更好地让用户愉悦的体验网站。所以所有设计原则都是以此为标准, 从技术和设计的角度去调整。
