手机网站和传统网站设计中的视觉元素

  无论是手机网站界面设计还是传统网站界面设计,网站都需求以内容为中心。网站是用来给阅读者看信息的,是向受众提供某种信息或效劳,因此网站设计首要思索的就是用户的需求。针对不同的用户肯定发生不同的设计方向。网站是以内容为霸道的设计,不是仅仅选个喜欢的字体、颜色、图片就能做好的。网站页面的各种构成元素都应该是为了更好地显示内容,更好地与用户交流而设计。一个成熟、专业的网站,需求设计师对网站的作风、功用模块、内容、交互等停止全体筹划。

  (一)作风

  一个网站是依据这个企业的笼统、性质、内容、功用等要素,甚至对阅读者的预判综合思索得出的设计作风。Window 8的作风是一个单色块,配上繁复的文字或图标,去掉各种投影、水晶效果等特效,凸显以内容为主。这种以内容为主的繁复化设计作风越来越盛行。但是不见得一切的用户或许一切的运用者都适用这种作风。不异性质的网站有不同的需求,科技网站、艺术网站、音乐网站、商业网站等,都会有一些不同的特性。设计师不能由于某种作风盛行,或喜欢某种作风,就想尽方法在以后的设计项目中表现出来,最后这种作风的视觉效果往往有点不三不四。

  (二)版式

  网站的版式设计是受内容限制的。一个网站的内容不是单一的,越是综合类网站,内容分类越是冗杂,那么关于冗杂的内容来讲,哪类内容放在首页?哪类内容放在主要的页面?甚至哪些内容放在首页的首屏?这些内容的散布陈列对网站设计起着重要的作用。绘制这些内容逻辑散布的进程就是绘制线框图。线框图不只仅是用来给设计师进一步美化的依据,也是前端开发人员书写阅读器顺序的时分参考。一个懂网站设计的人,从线框图就能看出这个网站的基本。一个页面的板式设计需求“从内而外的矩形”。从前端技术的角度来剖析,网站设计其实就是在一个大的矩形(显示器)上用HTML言语切割成各种小矩形。每一个矩形外面切割更准确的矩形用来完成各个内容位置的摆放。从设计的角度来剖析,栅格系统设计、栏的概念都是方块的设计,就像做拼图一样,用各种方块按着需求来停止各种大小、位置的陈列组合。哪怕是圆形的图片,其基本也是一个矩形,只是圆周围是透明的而已。所以一个网站的基础版式散布,就是规划各种矩形的陈列组合。

  (三)字体

  网站的进一步美化进程,其实就是在线框图的规划基础上,用颜色、字体、图片等手腕停止画面的装饰进程。一个出色的网站一定有着出色的字体设计。出色的网页设计师会用单纯的字体样式陈列出十分适于阅读,又能表现出网站作风的视觉效果。网站字体的选择不能随设计师喜好随意运用,要思索到当不同的用户翻开该页面的时分,假设阅读者计算机上没有装置这种字体,用户阅读器默许的字体能否能很好地显示该内容?所以,网站字体都会选择系统肯定会有的惯例字体。但像按钮、栏目的题等特殊局部,由于不会经常变化更新,可以选择比拟特别的字体,但需求转换成图片,前端开发人员以图片的方式来运用这个局部。一个网页假设选择宋体字,字体大小不宜小于12像素,由于宋体字中横过于细,太小会影响字体的显示。由于不少字体只专门处置了常用的几个偶数字号,所以为了便于各个阅读器兼容,显示效果分歧,网页字体大小的选择普通是偶数,例如12、14、16、18像素等。13、15像素等大小的文字,有些阅读器会默以为接近的偶数字号显示。

  (四)图片

  一个优质的图片能给产品或企业带来好的印象。如今很多网站首屏都是运用越来越大的图片,并且经过手动或自动切换图片显示。这些图片能够是一个优秀的摄影作品,也能够是一个优秀的平面广告等,这些图片都是精心设计过的,拥有良好的质量。为了让用户有更好的网站体验,很多图片都是以小图当预览图,点击之后才显示相应的完整图片,这样的益处是能在不确定用户需求哪个图片的时分尽量快速地让用户看到,有利于网站的优化体验和添加网站阅读速度,有些网站图片提供缩小镜效果,当鼠标移动进入到图片的区域时会展现相应的局部大图,这种效果普通在淘宝等购物网站较多,便于用户检查商品细节。另外,如今很多以图片为主的网站都以“瀑布流”的方式展现图片,这种效果在HTML5和Javascript技术普及后越来越多。例如百度搜索引擎、站酷首页都是如此。

  (五)交互性

  分歧性的交互方式可以让用户更好了解整个网站的操作,从而提升阅读效率,不能四处都是不同的交互方式,会带给人混乱的觉得。交互需求提供反应。例如鼠标移动到一个旧事标题链接按钮的时分,需求一定的反响会带来良好的操作体验。界面要一直坚持和用户的沟通。又如一个注册页面,如今罕见的交互方式是运用AJAX技术,当输入完用户名的时分会自动和数据库中的信息停止比对,检测能否有人注册,然后在用户输入框旁边直观地显示,这带给人以十分好的交互体验。网站交互设计还要方便运用。完成目的功用的最少操作数、鼠标最短距离移动准绳等。交互性的最基本的目的其实就是为了更好地让用户愉悦的体验网站。所以一切设计准绳都是以此为规范,从技术和设计的角度去调整。

提供最优质的资源集合

立即查看 了解详情