图片样式

网站设计中的UIMAX的设计规范

还记得小编承诺的“网站设计根底学问与标准”三部曲吗?看完上篇是不是不断等待更新呢?在小编的“夺命连环催”下,UIMAX设计师百忙之中奋笔疾书,网站设计根底标准中篇炽热出炉。

网站设计与APP类的设计最大不同点在于,没有诸如“iOS设计指南”等官方类标准能够参考,不过这并不代表我们无章可循。基于网站前端开发W3C的规范,分离以往经历并自创主流优质网站的设计趋向,我们能够总结出一些十分适用和落地的设计标准(套路),主要内容构造如下:

页面根底元素和控件标准

我们每天所阅读的各类网站,设计作风不尽相同,但都脱离不开一些根底元素和控件。要理解网站的设计标准,必需先弄明白这些根底元素与控件的常用标准。在解说控件设计标准的同时,会分离HTML的开发标准,这样能够更全面的了解网页是怎样运用控件“组装”起来的。

下图为网站内复杂多样的控件示例:

1. 文字

文字分类

网站的文字普通分为两类:标题文字和正文文字,对应HTML为标签和

标签。

 

标题文字:网页标题同Office软件中的方式根本相同,分为6个级别,但表现在页面设计上就没那么多了,普通在页面中我们对标题的设计为2-3个级别(字体尺寸)的差别。主要有:当前页面的标题、版块标题、段落标题等。

 

下图为常规的标题运用位置示例(红色区域内文字为标题):

 

正文文字:用处比拟普遍,能够说除了少数几个标题运用到标签之外,剩下我们在页面上看到的一切文字均运用

标签,经过不同的尺寸、字体、款式展示在页面中,能够构成段落,也能够是单行的文字,以至banner中超大字体的slogan。这其中Banner的大局部艺术体文字都会与图片一同切图输出,这里不做赘述。

字体品种

网站普通运用中英两种字体(涉外网站的其它语种需单独设定)。字体品种设定在代码中通常会指定中英两种,如下图为某常规网站中设定了多类字体,这些字体是设计者以为的最优选择。

我们设定多类字体的益处是当用户的阅读器“读取”网站代码中对字体的描绘时,会依据次第选择自身系统中包含的字体。例如第一种没有,则顺延到读取下一种。当全部字体在系统中都没有,则阅读器会依据设备系统来默许指定一种系统字体,汉字普通为宋体或雅黑,苹果为苹方字体。

受限于电脑、手机等系统内嵌默许字体的限制,我们在网站设计中普通运用常规字体较多,特别是中文字体。英文字体库比拟小,能够嵌入到源码里,因而能够运用个性字体。

中文字体运用较多的字体为:微软雅黑、宋体、黑体、华文等,其中又分为粗细不同的字形。英文能够选用的字体就比拟丰厚了:Helvetica、Arial、Verdana、Sans-serif等。

文字尺寸

网页关于文字尺寸的设定有三种方式,设计师在设计的时分普通采用像素的方式即可,假如需求思索更佳的适配,开发人员会依据标注自行运用后两种字体设置方式来优化显现。下图为UIMAX设计案例标准中关于字号和颜色的规则制定:

  • 运用像从来设置字体大小

W3C对网页最小字体并没有硬性的规则,只是我们在设计网页的时分思索到可阅读性,普通最小为12px。

常规文字:12px、14px;

标题、页头:16px、18px

大标题、横幅等:18px、20px、22px、以至能够更大

需求留意的是由于在未开启ClearType的状况下,一些中文字体在非偶数字号下的显现效果欠佳,所以普通倡议运用12、14、16、18、22px等偶数字号。

  • 运用em来设置字体大小

1em 等于当前的字体尺寸。假如一个元素的 font-size 为 16 像素,那么关于该元素,1em 就等于 16 像素。在设置字体大小时,em的值会相关于body 元素(父元素)的字体大小改动。

  • 分离运用百分比和em

在一切阅读器中均有效的计划是为 body 元素以百分比设置默许的 font-size 值。

 

2. 图片

页面的根本构成元素即图片与文字,数字图片的格式品种更是多达20多种。

 

上图中前面标识圆点的四个品种为我们在设计中经常运用的。是的,只需求这4种就根本满足了网页设计的需求。这四种分别是:.jpg / .png / .svg / .gif。在这里我们不讲复杂的格式理论学问,我们直接上干货,偏重实践运用来讲一下几种图片类型的特性和普通运用办法:

  • .jpg是照片类内容比拟复杂的图片最合适的格式,它能够用最少的磁盘空间得到较好的图像质量。.jpg格式是没有Alpha透明层的,因而无法做到背景透明,当决议用.jpg格式作为图标切图输出时要慎重。

  • .png格式是具有Alpha半透明层的,因而十分合适作为图标输出格式大范围的运用,同时也十分适用于纯色或微突变的图像,能够做到图片很大,但最后输出的图占用空间十分小。

    下图的比照为图像保管格式选择示例,左图像内容和颜色复杂,合适.jpg;右为纯色插画,.png格式能够保证图片占用存储少且质量高。

     

  • .svg格式是一种矢量格式,与.jpg和.png的位图格式不同,我们能够了解为用代码或数字描绘的图像。当.svg的图像嵌入到网页中,能够不受尺寸限制随意设定,却不会影响图像质量。 往常.svg格式已大范围运用在H5页面中,保证了图像在各种分辨率下都明晰。不过.svg存在一个弊端,那就是图像内的颜色不能过多,且最好为纯色,否则“图像描绘代码”会十分复杂,放在网页中会影响速度和兼容。由于这一特性,.svg格式是界面中单色图标的最佳选择。

    下图所示为.svg格式图标,倡议运用单色。

     

  • .gif格式大家应该都比拟熟习,虽然能够表达静态图像,但是我们每天都见到的动图格式根本都由它来承当。能够在网页设计中运用此格式来添加页面兴趣,但一定要留意图片大小,普通的图片为几十到几百KB大小,当.gif动图到达MB级别时,要慎重运用。想具有高级的动画效果,普通我们会运用H5的方式来完成,这里不做赘述。


3. 图标

图标是网页设计中不可短少的元素之一,合理的运用图标能够更好地引导用户。图标依照作风能够分为多个类别。如下图所示:

 

图标的作风没有好坏之分,只是鉴于当前主流设备系统的平面化作风潮流下,在网站中比拟常见的也是平面和线性图标居多。这两类图标既能起到引导用户操作,又不会像平面图标那样过于突兀,因而得以大范围的运用。

 

需求留意的是,界面中系列图标作风和尺寸要坚持分歧。下图为淘宝与京东首页功用入口处的图标,均坚持了各自统一的作风和尺寸。

 

4. 导航

导航是网站最重要的根底控件,网站的主要频道和功用都会表现在导航中,任何网站都不可或缺。导航在网站中能够不止是一个,通常都会有主导航和次级页面导航、分类导航等等。

 

主导航的位置通常在页面第一屏最醒目的位置,页面顶部或者侧边,大局部依据网站的行业分类不同会有区别。例如企业类网站的主导航普通在页面顶部,而电商网站通常会在首屏的左侧,后台类网站以至会有层级复杂的树目录款式导航。

 

下图为苹果公司官网明晰的导航。

 

下图为电商网站的导航,能够看到顶部居中显现的频道导航和左侧商品分类导航。

 

下图为UIMAX设计的后台类界面,能够分明看到导航统一在页面左侧明显位置,便当用户直观操作。

 

这里我们还要提一下“面包屑导航”也叫“途径导航”,它的功用是分明的告知用户当前页面所处的位置。假如网站的构造比拟复杂,运用面包屑导航是不错的方式,能够避免用户迷失途径。下图为华为官网上明晰的面包屑导航。

 

说了这么多导航的分类和特征,但在设计网站导航时,要多和交互设计师坚持沟通协作。由于导航作为重要的框架级元素参与在交互设计中,明晰明白的导航指引对网站又至关重要的作用。

 

5. 标签

Tab标签既能够作为一种独立的版块构件,又能够是一种导航的切换方式。我们单独拿出来解说,是由于它在网页中呈现的频率十分高,是很重要的一种界面层级的引导和切换方式。

 

什么时分会运用?当我们想在一个页面中表现多个类别的内容信息,同时不想切换新页面的方式展示,由于翻开新页面会而形成用户视觉阅读的不连接。此时,我们会运用页面内的Tab切换。在网站和APP中我们都会晤到大量的Tab方式,设计师在运用的时分需求留意两点:

1、标签不宜过多

Tab标签普通来说是将信息分红若干个类别,并且这几个类别是处于同一个层级不同维度的。但分类过多,就要思索开新页面或者其他方式,不然十多个以至更多的标签放在一同会让用户手足无措,同时也会影响页面加载速度。下图为常见的Tab标签应用。

 

2、标签款式要坚持统一、易辨认

其实不止是标签,网站一切相同类控件都要坚持款式的统一,这样不只关于开发来说会愈加标准,而且关于用户运用也会有统一的指引。下图为门户资讯类网站也普遍运用Tab标签。

 

6. 焦点图

焦点图即页面首屏轮播图,是页面中最抢眼和占比最高的元素。从某种意义上来说,焦点图的作风表现就根本肯定了网站的整体作风表现,想经过网站传达给用户什么样的定位,焦点图是最关键的点之一。 下图为天猫的首页焦点大图。

 

设计师在设计焦点图时要依据网站的定位来肯定作风。在尺寸上,焦点图有全屏大图式、部分版块式、排版组合式等等,用哪一种要依据网站功用架构来肯定。并且焦点图不只仅呈现在网页的首屏,在子版块中也能够采用这样的方式来展示更多内容。下图为京东金融的焦点图,采用组合的方式构成。

 

焦点图采用全屏方式的设计也越来越常见,普通是采用自顺应屏幕宽度的方式来适配,这样在各种尺寸的屏幕上都能够得到不错的效果。下图为特斯拉官网的焦点图,采用适配宽屏的方式设计,加上明晰的产品图,能够让用户在第一时间感遭到公司和产品的“高质量”。

7. 搜索

搜索功用控件在绝大局部网站中都存在,依据功用的重要层级不同所放置的位置也不同。

关于企业网站、个人网站、门户网站来说,搜索主要为站内的资讯和信息效劳。这类网站的搜索功用普通不会很复杂,并且运用频率不会很高,层级比拟低,有时分会放在不是很醒目的位置。下图为优设网的搜索控件,由于运用频率不高,被汇合在了并不醒目的位置。

但关于电商网站来说,搜索功用可就是重中之重,以至是高于主导航存在的功用控件。用户运用频率十分的高,并且功用比普通资讯等信息检索要更复杂和智能化。下图为主流电商网站的搜索控件,都在十分明晰醒目的位置。

我们通常以为搜索控件就是一个简单的输入框而已,其实一个好的搜索控件或者说搜索功用是在用户需求的时分呈现,不需求的时分又不会影响用户视觉。

上图为UIMAX设计的NBA中国官方网站 搜索功用控件。在默许状态下搜索只是一个图标;当用户需求时,点击图标即可展开搜索输入功用;而当用户下拉阅读页面时,常常是不需求搜索的,这时分在“跟随式导航”中则不显现。如此一来,让搜索功用变得又高效又灵敏。

8. 挑选器

挑选器普通在网站中是用来挑选信息和产品,以便当用户定位到所需维度的关键项目。下图为电商网站复杂的产品挑选功用控件。

挑选器普通有单选、多选、复合式选择、自定义选择等多品种型。用处根本是在填写表单、问卷、产品检索、信息检索等功用中。

需求留意的是挑选功用常常是能够分离多个功用控件一同运用的,例如Tab标签的方式也能够作为一种直观的挑选控件来运用,再比方表单中的“下拉框”这个方式也是常见的一种挑选款式。总之在设计时我们不能过于板滞,要灵敏运用。

例如上图中的左侧Tab选项和顶部的Tab选中项都能够了解为不同层级不同纬度的“挑选功用”。而酒店级别一栏的下拉选项,同样为挑选功用的一种方式。至于用哪种方式可以更好的便当用户运用,就要与产品交互设计师共同去研讨制定,中心是“让用户快速且明晰的完成信息挑选”。

在设计款式上每品种型根本坚持分歧,例如选中项能够是圆圈、也是能够对勾,总之要让用户一眼就能分辨出本人所选中的选项即可。普通不会做特别复杂的款式,要避免设计过度,以功用为主。

9. 按键

Tab标按键是一种比文字链接更醒目的控件,当需求用户重点关注的时分,能够采用按键的方式。按键理论上能够散布于网页的恣意位置,但它是一种高引导力的操作控件,因而要酌情运用,过多运用容易招致用户留意力分散。

按键的三要素分别是尺寸、颜色和状态。尺寸大小上普通不作请求,是依据页面整体规划和版块规划自主决议,便当用户点击即可。请留意同网页整体尺寸请求一样不能够有单数,且一切按键尽可能取整数。

按键的颜色和款式普通也不做请求,依据网站的整体配色来决议。留意当鼠标滑过和点击的时分,按键的颜色要变化来反应给用户,普通是在原色的根底上做明度的微调。

下图为苹果中国官网和小米官网的按键比照,两者在颜色款式尺寸上均各异,但都遵照各自网站的整体色彩款式。

按键的颜色和状态关系很亲密,当按键不能够点击时,普通为置灰处置。例如下图京东商城,不能点击的功用按键为“幽魂按键”状态。

10. 表单表格

表单和表格是网页中常见元素,表单主要是在注册、办公、问卷等功用中运用到,表格在各种项目列表中普遍运用。下图为常见表单表示,当前输入状态与必填项目的记要很明晰显现。

表单设计时需求留意的主要事项为状态和提示。随时告知用户填写状态胜利或失败,以及为什么失败,之后能够怎样做的提示。配色上普通出错为红色,警示为黄色,经过为绿色。这一点是不是很像路口的红绿灯。

下图为表单的各种提示状态:

表格的运用也十分普遍,各类信息的列表普通都采用这种直观明晰的方式。普通会由表头和列表构成,还会带有挑选、展开、按键操作、页码等功用。表格在设计时需求留意排版和主次信息文字的搭配,让用户能够明晰的查看和操作。下图为UIMAX设计的后台管理界面示例,能够看到表格和我们下面将要提到的图表设计。

11. 图表

图表是对数据可视化的更高级表达方式,往常已越来越多地被运用。普通图表由现成的数据可视化组件开发而成,因而关于设计师来说,可能会有一定的局限性,在设计完成后常遇到效果无法完成,例如复杂的款式。这时分就需求提早理解一下你所设计的站点平台采用哪种图表完成方式,图表能够完成的款式都有哪些。

图表或者是数据可视化的设计要留意作风和整体站点相适配,以数据自身的良好展示为目的,款式和颜色都是辅助更好的表达数据层次,让用户更易读。数据可视化的图表普通来说主要有柱状图、饼图、曲线图、折线图、散点图、仪表盘等,设计师需求细致理解每一种图表的用处,便当在设计时恰当运用。下图为常见数据图表示例。

页面设计尺寸标准

不管设计什么,我们都必需有一个画布,然后才干在画布上停止设计,那么我们这个画布该做成多大呢?这就是我们停止网页设计的时分遇到的第一个问题。

普通我们设计的时分都是根据电脑分辨率大小停止设计的。如今用得比拟多的是1920px的宽度,以前的版本也有用到1440px,比拟小的还有1280px,但如今屏幕越来越大,普通设计的版面也会设置大一点的尺寸。

那么,假如我们设计的时分运用的是1920px宽度大小的屏幕,那么我们内容该做成多大,是跟整体宽度一样吗?普通不会有人这么做。

 

由于有些时分我们做出来1920px这么大的宽度,但有些人去阅读的时分他们的电脑宽度只要1440px,那么旁边的那一局部就会显现不出来,所以我们就需求一个内容区域的大小,来保证不管在多大的显现屏都是能够完好的显现全部内容,这个内容区域大小普通设置为1000px左右,以前的设置得比拟小一些,如960px或者980px,如今有些网页在设计的时分会设置得大一点,能够设计到1200px这么大,保证宽屏设备优秀的视觉效果。

 

我们理解到常见设备屏幕尺寸之后,还要晓得这些屏幕尺寸在全球、全国范围内的屏幕占比,这一点也十分重要。当我们的网站用户设备没有限定时,能够参考大数据比例来制定页面宽度。下图为屏幕占比统计图示例。

需求留意的是设计师在设计前要与客户沟通好,调研终端用户的设备状况。例如UIMAX就曾遇到客户的终端存在大量的老旧设备,我们经过实践调研得出1024x768px显现器占比在40%左右,因而我们运用980px作为根本设计尺寸,保证了终端用户的良好运用和体验。

结语

本文简单地引见了网站设计的根底元素标准和尺寸,并引荐了一些习气用法。但实践入手去做才是设计师要克制的第一大障碍,UIMAX鼓舞新人设计师“放手去做,用心机考,及时总结”的行动原则。

 

不时遇到问题,不时处理问题才是生长的殊途同归。本文引见了有限的办法和规则,但设计师同伴们的创新应当是无限的。