台州页面设计:网页设计的整体策略

作者:台州市久谦网络科技有限公司 浏览: 发表时间:2021-10-20 09:33:54

台州页面设计:网页设计的整体策略。

什么是网页设计?

网页设计又称网页设计、网站设计、网站设计、WUI等。其本质是网站的图形界面设计。虽然我们经常使用移动终端上的APP获取信息,但很明显,基于个人电脑平台的网站上网的历史比手机上网的历史要长得多:从1987年钱田白教授第一次给德国发邮件开始,到2000年搜狐、新浪、网易在美国纳斯达克上市,现在网站遍地都是;近30年来,中文网站发展迅速。小学开始在网吧上网。当时电脑屏幕很小,分辨率只有800x600像素(相比之下iPhone8的分辨率是750x1334px),网速也很慢,经常掉线或者加载失败。当时的网站性能和体验都不好,但现在的网站设计与过去相比发生了很大的变化:注重用户体验,页面动画、富媒体等设计让网站体验丝毫不比软件和手机APP差。随着个人电脑的普及,网站仍然是人机交互中最重要的平台之一。那么,作为UI设计师,一定要掌握网站设计的规范,了解网站运营的原则,才能更好的驾驭这个平台。今天,我想告诉你一些网站必须知道的事情。

工作流程

先来看看网站设计的工作流程:除了用户调研,撰写产品需求文档、市场文档、做有竞争力的产品调研等。,与设计师密切相关的网站项目流程可以分为六个阶段:原型绘制阶段、视觉稿阶段、设计规范阶段、图纸裁剪阶段、前端代码阶段和项目行走阶段。每个阶段都需要设计师的参与和理解。不要只关心这个阶段的视觉稿。有许多早期和晚期的作品需要我们注意。好吧,让我们一个一个地了解它们。

原型图阶段

在原型绘制阶段,设计师需要与产品经理沟通他们的需求。这个时候需要注意的是,不是产品经理向设计师发布需求,而是他们需要在自己擅长的方面互相沟通。视觉呈现对设计师来说可能是更好的方式,所以在设计之前需要和产品经理达成一致。

视觉草稿阶段

在视觉稿阶段,我们需要根据原型图确定的内容和总体布局,完成网站的界面设计。在设计网站时,我们需要一些图片和灵感材料。比如在做世界杯专题的时候,不仅可以收集大量的素材,还可以设计一个“心情板”。简单来说,情感板就是把一些与主题相关的材料和素材放在一起,从而更好地引导我们整体需求的设计主题和大体感受。此外,许多网站的负责人通常需要主视觉来吸引人们的目光。这时,明星照片、主题材料、LOGO、主视觉PSD等。可能会用到需求方提供的材料,所以我们的目标是将这些材料与这些需求方提供的材料混合,拼出震撼的头部视觉。主视野下的信息安排强调理性。这时还需要和产品经理沟通一下图片的大小和从后台检索到的标题字段的长度,然后按照这些要求完成页面信息部分的设计。总之,在设计过程中,我们需要不断思考和交流,才能完成更好的视觉稿。

设计规格

视觉稿通过后,很多设计师可能不会主动制定设计规范。其实每一个可以迭代的产品都需要设计师来总结设计规范,设计规范是所有页面上常见的东西,比如不同的字体大小、图片大小、按钮样式等等。这些共性也是用户在访问网站时会理解成固定概念的证据。比如同一个分享功能如果采用两种完全不同的风格,会让用户感到困惑。那么设计规范主要是约束设计者本身,在用户有限的记忆中降低思考的成本。同时,设计规范还可以保证同一项目的不同设计师能够输出相同风格的设计。最后,设计规范也是设计师对项目影响力的证明,可以证明你的思维和你在项目中的地位。所以我觉得设计师应该主动做设计规范和项目总结。怎么做设计?实际上,设计规范是将主页面的元素固定为一个统一的元素。具体来说,一个产品的设计规格应该包括字体规格、主题颜色规格、图表规格、图片规格等不同的分类。

切图网

网页设计师通常不需要为前端工程师裁剪图片。因为前端工程师通常需要掌握PS软件技能。如果特殊情况需要裁剪图片,可以使用切割器、Zeplin等裁剪插件中的Web选项,裁剪出网站用于前端的图片。

前端代码

前端工程师会用代码重构我们设计的页面,把图纸变成静态页面。然后连接后端工程师检索数据接口,一个网站就活了。工程师还会把网站埋起来,以便发现网站是否符合我们要求的数据。埋点是在页面代码中插入一些统计代码,这样我们就可以确定哪些页面访问量高,哪些不符合预期。之后实际上会有测试工程师参与,找出编译后的网站是否存在一些漏洞,这里省略。

项目检查。

网页设计完成后,设计师需要对项目进行检查,以确定网页的恢复程度是否有问题。如与设计稿有出入,需请前端工程师进行调整。这一步很重要,因为网站的成品是我们最终的输出,不要认为设计稿漂亮,实现后的页面不需要我们负责。

网站类型

网站的分类根据对象可以分为To C端和To B端。c端面向用户和消费者,如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动终端H5等。,所有这些都是面向用户和消费者的产品。因为是面向用户,面向消费者,所以设计一定要有吸引力,体验设计要以用户为中心。To B作为一个需求量很大的品类,经常被设计师忽略。什么是To B项目?比如电商网站供应商后台、Dashboard、企业OA、网站统计后台等。面向企业和专业人士的是To B网站项目。这些项目的要求与To C网站有很大的不同:对于To B项目来说,最重要的是效率而不是体验,因为说白了,我们在为用户工作设计工具的时候,首先要保证操作人员能够高效地完成他们需要完成的工作。所以让我们来看看不同类别的网站。

门户网站

国内知名的门户网站有新浪、腾讯、网易、搜狐。国外知名如Naver、Llinternaute等。我们可以看到,门户都很大,生活中包罗万象。比如腾讯有新闻、金融、视频、体育、娱乐、时尚、汽车、地产、科技、游戏等不同渠道。门户网站的门槛很高,所以一个门户网站只能靠强大的实力建立,而门户网站所需要的设计师数量也是惊人的。首先,门户网站需要产品方向的界面设计者对网站的基石进行维护,比如迭代网站的首页、二级页面、底层页面等都要进行迭代维护。然后要求各渠道的设计师处理日常需求:比如巴黎时装周要求负责时尚渠道的设计师设计相应的主题,世界杯小组预选赛要求负责运动渠道的设计师设计相应的主题。地球上每天都有大事发生,所以门户网站的设计工作也不会少。另外,具体对接渠道的设计师也需要有所擅长:比如对接体育渠道的设计师至少要熟悉足球、篮球等运动项目;时尚频道的设计师要了解各大品牌的设计风格;佛教渠道的设计者要懂得基本的佛教知识和禁忌;文化频道的设计者应该参与传统文化。所以基本上门户网站的设计师可以分为产品组和渠道组。

企业网站

每个企业都需要一个网站来展示自己的能力,介绍自己的产品。现在,很多普通人在联系陌生企业时,都会在网上搜索其官网,验证其真实性。该网站已成为中小企业的标准。设计企业网站时,通常有几个模块,如网站首页、公司介绍、产品中心、公司团队、网上商城、联系我们等。企业网站会展示很多实际照片,比如公司环境、团队成员、企业文化等。,并用一些材料设计。企业通常追求所谓的“高端”、“大气”、“高档”风格,是为了满足让消费者认同品牌的要求。所以,如果收到企业网站的设计要求,不妨浏览参考一些比较大牌的企业网站作为竞品参考。

产品网站

从苹果的iPhone介绍页面到小米的手机8介绍页面,我们会发现一种新的产品营销模式,那就是产品网站。设计这类网站的内容主要是流程、技术、设计、特点、结构、使用场景等。这个产品页面希望让用户有沉浸感,所以一般我们采用全屏布局,然后配合一些视差滚动等方法,让我们感受到这个产品的极致精致。由于中国互联网和产品设计的快速发展,对产品网站设计的需求必然会增加。

电子商务网站

电商设计师也是网页设计师吗?是的如果按平台细分,毫无疑问,电商设计师所在的大部分平台都属于网站。以淘宝、天猫为代表的电商发展如此之快,从内蒙古的牧民到海南岛的渔民,甚至台湾省、日本、东南亚的商人都开始在中国电商平台开店。其实店铺本身就属于平台本身的页面。不过为了提升各个店铺的个性,平台为店铺开通了一些页面定制的装饰功能,比如宝贝详情、店铺布局、横幅标题设计等。这样,店铺就有了一定的权限,可以在平台规定的范围内用图片和一些css样式的代码来装饰自己的店铺,于是电商设计应运而生。虽然戴着镣铐跳舞,但有很多商店因为设计出色,可以带动销售。然后,当然,电子商务设计师变得非常重要。

游戏网站

游戏是一个庞大的行业,很多公司的收入大部分来自游戏行业。那么除了游戏需要制作精良之外,游戏的官网也一定要设计精美。别忘了,每个玩家都需要访问你的游戏官网,完成下载、充值、社交等重要操作。暴雪娱乐公司(https://www.blizzard.com)等国外游戏网站的官网设计精致,每款游戏的官网都是精品。比如在官方网站,比如魔兽世界、星际争霸II,头部动画化,视觉冲击力强。然后网站界面的所有元素都有游戏的风格,就好像你登录这个网站的时候就在游戏里一样。

主题页面

当然,无论是电商还是门户网站,都会要求设计师设计一些特别的页面,增加节日期间的曝光度。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等活动。项目的设计生命周期很短,上线后基本过流的点基本没用。所以我们找不到往年618或者双11的专页,因为过了一定时期,专页就会被忽略。那么如何在如此短暂的生命周期内抓住人们的眼球呢?当然,我们不应该使用现代主义设计的冰冷风格,而应该尽力在头部刺激用户,用刺激和对比鲜明的色彩、复杂的立体造型和强烈冲击的文字吸引用户去看。毕竟大家可能只看一次,不能错过这个机会。所以主题设计和产品设计正好相反,主题设计一定要刺激。

视频网站

网站访问量惊人,用户的附着性更高。除了购买版权,很多视频网站也有很多UGC内容。简单来说,UGC(用户生成内容)是指用户生成的原创内容。很久以前,在web1.0时代,用户主要是单向浏览网站。web2.0提出的UGC概念意味着用户不仅要浏览,还要上传内容。那么为什么视频网站这么受欢迎呢?首先,得益于带宽的发展。今年在中国,点击视频就可以立即播放,但几年前,我们要等几分钟才能加载足够的缓存。视频网站的设计主要考虑应用场景:视频是用户的主要观看区域,所以一开始视频区域要足够大,颜色要以深色为主,因为鲜艳的颜色会干扰用户观看视频。那么其他区域的图片比例应该是16:9,方便后期在后台编辑添加。网站设计师也可以分为产品组和运营组两类,来应对产品方向和运营方向的不同要求。

H5移动终端

你一定是在朋友圈被H5筛选过,比如穿越未来看你,淘宝创造节等。平时,我们经常被这种好玩的H5所筛选。其实H5的全称是HTML5,不仅仅是指移动终端,而是网页前端的开发语言。因为既定的理念,我们现在经常把手机里的视频采集、动画、互动的营销形式变成H5。其实它的本质就是利用web技术在移动浏览器或者内置浏览器中运行网页。随着科技的飞速发展,H5变得越来越有价值和重要。微信、浏览器等平台级产品在手机上的普及,推动了H5入口传播的发展。如果设计优秀,你的项目可能会有在朋友圈传播病毒的效果。

移动端H5尺寸。

在设计移动终端H5项目时,我们一般以用户数量较多的iPhone6/7/8的尺寸:750x1334px为标准,然后在顶部预留一个微信或浏览器导航区。主要内容区可以自由设计。H5的总体运行是上下滑动的。字体采用苹果字体,字体大小设置为24PX以上,渲染方式设置为夏普。英文需要换成SF-UI。当然,H5可以调用背景音乐、视频、链接等多媒体,让体验更好。除了让前端兄弟开发之外,其实还有另外一种不用代码生成简单版H5的方法,就是通过H5工具生成。目前流行的H5代工具有:MAKA、iH5、兔展等。如果我们想自己生成而不是通过前端开发,那么我们设计稿的大小需要设置为640x1008PX。这些工具相对简单。注册后可以上传PSD来设置每张原件的动态效果。但是,如果需要复杂的动态效果和交互,仍然需要前端工程师的配合。

后台网站

后台网站也叫Dashborad,中文翻译成仪表盘。这意味着有大量的数据和统计。后台网站是To B类型,所以第一个要求就是快速显示操作人员需要掌握的数据。但是,数据很无聊。我们可以用“折线图”、“饼图”、“图表”和“表格”等不同的方式来呈现这些繁琐的数据。这种用图形表达数据的方式也被称为数据可视化。后台网站不需要特别可爱的插图和卡通形象,但最重要的是效率。因此,如果你经常处理To C的需求,那么当你收到To B的产品需求时,一定要注意这一点。背景网站通常使用全屏排版,因为它们需要更大的图片,也就是说,它们填充了整个画布。小屏呢?前端将使用相对布局来减少每个元素,布局位置将按百分比确定。

客户关系管理系统

也就是CRM关系管理,翻译过来就是客户管理管理系统。CRM是一种面向客户的企业信息管理形式,利用互联网技术收集、管理和分析客户信息,对企业的销售、服务和售后进行监控。常用功能包括员工日程管理、订单管理、发票管理等。在设计这类项目时,一定要根据信息的逻辑关系进行分类,强化对比、对齐、重复、亲密的原则,让操作人员在使用时感到方便。

软件服务

如果我们为那些为企业建立客户关系管理、企业资源规划或办公自动化系统的第三方公司服务,我们可能会一直听到SaaS这个词。SaaS(软件即服务),即软件就是服务。其他公司将为提供SaaS服务的公司定制系统,然后服务公司将为客户提供从服务器到设计的集成服务。这里提到这个词是为了防止设计师误解它的定义。

办公自动化

企业OA,即(办公自动化),也是一个办公自动化系统。六七十年代,用计算机改变传统工作方式发生了一场革命。在大型企业中,他们往往面临着人员多、地域广、办理公司事务手续冗长等诸多问题,因此企业OA可以很好地解决这些问题。通过企业OA,可以完成请假、请假、请假、查询公司规章制度、请示、报告等。这减少了大量的窗口成本和员工时间成本,提高了公司的效率。互联网公司为员工提供企业OA以外的沟通功能,比如建立员工论坛和留言板,在上面你可以给公司提出建议和意见。一般来说,出于安全保密的考虑,很多公司更愿意自己开发OA。设计人员在设计此类项目时,还应注重操作人员的体验和效率,以便操作人员能够轻松找到当前页面中最重要的功能。

网站组件

了解了网站的不同类别后,我们再来看看组成一个网站需要哪些部分。一个网站由不同的网页通过超链接连接而成,不同的网页由不同的模块组成。我们设计了一个像蜘蛛网一样的网,而不是海报。因此,在设计网站时,我们应该特别注意从用户的角度来看网站,而不是孤立地将其视为图形作品。

主页

当访问一个网站时,我们首先接触的是网站的主页。主页被称为索引或默认,这意味着索引和目录。网站开发初期,网站不是富媒体,而是类似于一本书:首页类似于图书目录,你需要看哪个子页面可以通过点击链接进入。到目前为止,网站的主页仍然是一个“目录”,引导用户进入不同的领域。除了导航功能之外,这个目录还需要为用户公开一些内容来吸引点击。暴露的部分必须有一个“更多”按钮来引导用户找到二级页面。

辅助页面

从逻辑上讲,首页是一级页面,从首页点击的页面都是二级页面。第二页之后是第三页。从点击的概率来说,自然访问量越高,页面层次越深,被用户发现的可能性就越小。一般网站都有三级页面,只是为了避免用户迷路。因此,面包屑导航将被添加到页面中。面包屑导航是出现在文件夹上方页面的首页>体育> NBA频道等超链接结构,方便用户了解自己所在位置,点击返回其他页面。

下页

网站结构中为用户提供实质性信息的最后一页是底层页面。比如我们在门户网站首页或者二级页面点击感兴趣的标题后,就会看到底部页面的所有信息。在阅读了底部页面上的信息后,用户可以方便地在左侧或右侧边栏中搜索用户可能感兴趣的相关内容。你可以在底部看到网友的评论。底部还会有分享按钮和点赞功能;如果侧边栏用户转化率差,推荐相关信息的功能可以再次出现在底部。总之,用户在阅读了自己喜欢的信息后,应该继续吸引用户阅读其他信息或者返回频道。

广告

门户网站如何盈利?是实现广告的途径之一。一般负责运营需求的设计师负责网站的广告,但也可能由渠道设计师和产品端设计师来完成。网站中常见的广告图形形式是横幅。横幅通常很大,在网站中很突出。所以不一定是外部广告,也有内部活动和推荐信息。那么横幅图的大小是固定的吗?答案是没有。Banner有两种宽度,一种是全屏(1920PX),另一种是基于安全距离的全尺寸(1200px或1000px)。需要注意的是:一般基于1920x1080px的用户屏幕,以及浏览器本身与插件和底部工具栏的距离,都会给网站留下900px左右的屏幕高度,所以横幅不要做得很高,否则上面的折叠信息显示不够。你可能会说,让用户下拉。然而,在网站的访问用户中,第二个屏幕触摸的用户数量将远远少于折叠上方的用户数量。也就是说,很多用户点击后可能会跳下或者关闭网站,所以折叠上面的信息真的非常重要,可谓寸土寸金。因此,我们的旗帜不应该占据太大的面积。比如站酷网的Banner区域就是1380x350px。那么,除了主页上巨大的横幅广告空间,网站上还有哪些其他的广告形式呢?

对联广告。在门户网站中,我们经常会看到在网站的左右安全区域之外,会有一个像“对联”一样的广告随着屏幕滚动。通常横幅也会是一个广告内容,中间会弹出HTML5技术或者Flash技术制作的弹出广告。这种广告通常是组合销售的,也就是说你一进入网站,就会受到全方位的轰炸,你会忍不住注意到这个广告的存在。这类广告点击进入有合作的专题页面,说明设计师需要合作的地方很多。

信息流广告。信息流是埋藏在信息流中的一种广告形式。这种形式利用了格式塔原理,用户会不自觉地阅读广告的内容,因为它的形式和其他信息一样。比如朋友圈、知乎、脸书都用信息流广告,效果很好,但是会牺牲一定的用户体验。信息流的大小与信息流的大小相同。

以上从广告的形式简单介绍了网站广告的三种常见形式。如果我们在阅读需求时看到cpm、pv等词是什么意思?它们是广告的收费模式。Cpm指按广告pv收费,cps指按用户消费收费,cpa指按用户注册号收费,cpc指按用户点击收费。根据不同的收费模式,在设计中会采用不同的策略来增强广告的目的。

页脚

在网站的具体页面设计中,底部会有一个区域,我们称之为页脚。通常页脚的颜色比上面的内容区域要深,因为页脚的信息在逻辑层面上是次要的。页脚区的主要功能是版权声明、联系方式、友情链接、记录号等信息。设计时一定要降级,以免页脚特别明显。


技术原理

网页设计师在做项目之前必须了解网页背后的技术原理,技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位,就叫做网页美工,这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致,产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理:在您的电脑C盘保存一个叫logo.jpg的图片,然后在浏览器打开这个网址:C:logo.jpg你看到了什么?对,就是这张图片。这就是网站的原理:网站的资源和文件存储在一个类似我们电脑的东西里,那就是服务器。我们通过域名来调取网中不同的页面和文件,如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时,敲击一个网址,这时这个域名会转向一个IP地址,这个IP地址就是服务器所在的门牌号码。找到了以后,我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面,比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时,我们的信息就会上传到服务器中,服务器处理完(比如登陆成功这个信息)然后再下发给我们的浏览器。所以平时我们访问网站时,我们的电脑和浏览器要通过互联网与服务器进行多次“握手”。当然老“握手”会造成加载速度变慢,于是我们聪明的浏览器会把已经下载过的资源缓存下来,避免浪费。这个机制就是“cookies”:浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。

基于鼠标的交互

在不久的未来,个人电脑可能通过多点触控、语音交互等方式与我们交互,但目前网站设计最主流的交互方式还是鼠标和键盘。来让我们看看鼠标有什么结构吧!我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操作都是通过鼠标左键点击完成的,所以网页也是点击的艺术。右键一般会唤起右键菜单,但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互。与鼠标发生交互的主要是超链接与按钮。那么让我们来了解一下超链接的四个状态吧(前端术语是:超链接标签的CSS四个伪类)。

Link是指超链接正常的时候的状态。一般超链接需要与普通文字区别开来,比如换一种颜色或者加下划线。当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字。Link默认都是蓝色的(色值:#72ACE3),但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。总之一定要在形式上与普通文字产生差别才可以。

 

Visited是超链接被点击以后的状态。比如新浪网新闻非常多,所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了。所以新浪网使用了Visited属性,点击后的新闻颜色就不一样了,方便用户区别自己哪些新闻还没有浏览。

 

Hover:是超链接鼠标经过状态。这个状态是连接中最为重要的状态。其实不只超链接,按钮和图片以及视频等一切可交互的元素都应该设置Hover属性,也就是鼠标悬停时的状态。一般来说变换颜色和放大是Hover状态的基本方式。

 

Active:是指超链接的激活状态。点击后超链接可以通过CSS加载一个状态。

 

同样的链接样式也可以应用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设计成不同的样式,方便用户通过鼠标感知这个物体是被我按下去的,这种给用户的暗示我们也叫做“点击感”。当然按钮会和链接稍有不同,按钮除了具备正常和鼠标悬停等状态,还有一种状态叫不可点击。这种状态将按钮置灰,提示用户这个功能因为条件不满足不可以点击。好了,您可以举出几个点击感Web设计的例子吗?

 

静态网页

了解完基本技术背景、鼠标的交互之后,让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由HTML编译的,我们在服务器上存储的网页代码基本都是HTML格式。HTML全称是HyperText Markup Language,即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼,但是它已经是所有编程代码中最简单的一种了。别紧张,你可以把它当做摩尔代码,它是服务器和浏览器之间的密语,浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用HTML语言写一段文字会是什么样呢?

没错,代码就是这么一点一点编起来的。在任何网站空白处右键点击查看网页源代码你就可以看到网页的HTML代码啦。HTML这种代码是由一个国际组织 - W3C发布和维护的。W3C创建于1994年,是网站国际中立性技术标准机构。W3C已经发布了HTML的诸多版本,其中影响最深远的是HTML4版本。而HTML5简称H5则可以说是划时代的版本了。H5的标签更加接近现代,并且本身可以播放视频,这就可以淘汰掉Flash插件了。(Flash插件带来了比如系统漏洞、加载速度过慢等问题)同时H5对多平台支持很好,所以适应移动端为王的当今时代。H5甚至还可以变成游戏、Webapp(在网页上如本地程序一样工作的网站,比如蓝湖等)、多媒体等多种形式。可是由于IE浏览器这类不支持HTML5效果的浏览器在用户中占比还很高,所以造成了HTML5发展的制约。浏览器可以理解为一个代码阅读器,由于它对HTML5代码的翻译工作不好就会造成所谓“兼容性”的问题。比如HTML5中可以通过代码给一个DIV添加投影,那么在某些浏览器中就显示不了这个效果。不难理解为什么有程序员会穿着 i hate IE字样的T恤了吧。在每次做完一个网站项目时,测试工程师都会用Chrome、Safari、Firefox、Opera、IE、Edge等多个浏览器测试网站的兼容性,这时通常让前端工程师非常头疼。因为代码动一发牵全身,经常这个好了那个又不行了。但是针对这种问题也有一些解决方案,比如减少对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高一尺魔高一丈呀。

 

其他前端语言

有了HTML这个骨架,加上图片和多媒体后,网站的发展速度就更快了。但是服务器的损耗很大:所有用户都需要重复地来服务器下载代码和图片等资源进行“握手”,而且很多HTML代码都是重复的,造成了资源的浪费。比如,如果我网站的头部都是黄色的、链接都是蓝色的,那么每个页面都会啰嗦这几句代码。这个问题没多久就被一种崭新的代码解决了:CSS技术。CSS是层叠样式表的意思:我们可以理解为现在把网站的样式(颜色、大小、位置等样式信息)也就是CSS和网站的内容(文字、图片、链接等内容信息)也就是HTML完全分开,并且一个网站可以下载一份CSS然后不同页面都调取这份CSS的缓存,那么就节省了服务器资源。另外,由于网站需要一些交互效果,比如点击特效和菜单特效等,那么需要前端工程师使用Javas cript代码来配合。Javas cript是一种比较短小精悍的语言,构建一些基于浏览器的特效非常顺手。所以目前主流的网站配置是HTML5+CSS3+JS代码的组合,当然为了兼容那些低端浏览器也可能使用HTML4+CSS+JS的套餐。这取决于我们的主要目标用户群在使用什么样的浏览器。当然,我讲这些并不是要求您去学习HTML、CSS、JS代码然后进行前端开发,因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作以便更好地配合他们。

动态网页

了解完静态网页还不够,现在让我们谈谈网站如何动起来。动态网页不是说它有狂拽酷炫的动画,而是动态网页会随着时间、内容和数据库的调用而产生动态的网页。比如今天看到的新闻网站和昨天的新闻肯定不一样了,可是网站首页的HTML代码并不需要人去手工修改,而是让小编通过后台录入新闻、上传图片就好了。小编上传后台的过程就会输入数据库,而动态网页又是调取数据库内容显示给用户的一种形式。动态网页会随时调取数据库中的信息给用户,而对用户来说似乎静态网页和动态网页长得都是一样的。那么最傻瓜的判断方式是看网址结尾,静态网页结尾是html或htm,而动态网页由于使用了高级网页编程技术,结尾则是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是动态网页的语言,当然有的时候为了让网站效率提升也会使用伪静态结构,结尾和静态网页就一致了,但是实际上是会在用户访问前调取一遍数据库的。同时动态网页的网址会有一个特点,含有?符号。动态语言目前最火的是Php,较早而现在比较少见的是Asp、Cgi,最安全的是Jsp,所以很多银行采用JSP编译。了解完这些,我们基本就弄清楚网站的运行原理了。

视差滚动

视差滚动是一种运动速率不一样的设计效果,用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是,代码判定网页滚动,滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术,如果你的网站比较适合视差滚动,请大胆设计并和前端工程师提需求,相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态PSD文件。

网页设计规范

终于,经历过长篇大论网站的原理与组成部分后,我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格,也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活,然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范,在您工作的时候可以参考。注意,在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等,这样有助于后期不会有误会。

 

画板尺寸

因为网页尺寸与用户屏幕相关,而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率,其他分辨率用适配的方式来解决。在最新版Photoshop网站Web预设尺寸给了我们一些启示:常见尺寸(1366x768px)、大网页(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。这些是主流尺寸,而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px,每个屏幕的高度约为900px。为什么是900px呢?因为1080还要减去浏览器头部和底部高度,大约就是900px了。内容安全区域为1200px (或1000px / 1400px)。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸,因为对于适配的方式和后续配合他们更有发言权。

文字规范

我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和Windows系统电脑上看到的文字效果就有所不同:苹果会对文字进行渲染,而windows的文字几乎充满了像素颗粒。按照用户占比来说无疑Windows的用户是主流,所以尽管我们可能使用苹果电脑设计网页,但是设计出来的网页效果也应该和Windows显示一致。否则我们设计完漂亮的设计稿,程序员无法还原成我们设计的样子。另外,字号的大小也非常重要。网页的显示区域决定了文字不可以过大,在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小?因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做,也就是说我们必须使用偶数的字号来设计。那么总结一下:文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择Windows Lcd或锐利。另外,英文和数字需使用Arial字体,渲染方式选择无。

 图片规范

网站设计中的图片常用4(宽):3(高)、16(宽):9(高)、1:1等比例。具体图片大小没有固定要求,但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多,比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好,如何让网页使用的图片更小呢?

第一种方法,给程序员切图的时候我们可以适当缩小图片文件的大小。比如Photoshop中存储为web所用格式就会比快速存储文件更小。

第二种方法,可以尝试使用例如Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩,而图像质量不受损失。

第三种方法,Google研发了一种Webp格式,它的图片压缩体积大约只有JPEG的2/3,能节省大量的服务器宽带资源。比如Facebook、Ebay还有我们设计师常用的站酷图片存储都是使用了Webp图片格式。

第四种方法,浏览器和服务器握手时需要下载网页所调用的图片资源,那么如果一个网站有一百张图片的话,浏览器和服务器就得握一百次。第一会耗费服务器资源,第二访问速度就会慢一些。所以前端工程师们有一种做法,就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿,显示的那块区域移动到一大张图片中所需要的那个图像。

按钮

按钮的风格在过去的十几年发生了很大的变化,由一开始的“斜面与浮雕”风格过渡到后面的“拟物风格”,现在更流行的是扁平风格。如果按钮在一张图片中,为了不影响图片的美观性,会去掉填充只保留边框,这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。

表单

在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件,一般是直接调用系统设计的。但是系统设计有时不能满足我们的要求:系统内置的表单高度不够,点击起来不舒服;不符合网站整体设计的品牌感等。那么我们可以通过CSS给这些表单增加样式,包括颜色、大小、内外边距等。所以我们遇到涉及到表单的需求时也可以进行自定义设计。

栅格

我们把整体宽度定义为W。然后整个宽度分成多个等分单元A。每个单元A中有元素a和间距i。所以他们之间的关系就是 (A×n)-i=W。当然每个应用的尺寸不止可以整除成一种栅格,这就要看我们内容排版的疏密程度了。之后,我们将过多内容的栅格和另一个栅格相加得到更大的排版空间;其他元素都须老老实实呆在自己的栅格内,这样就完成了一个布局非常科学的设计了。 比如

如果网页宽度是1000px,我们可以使用:

20列每列40px和10像素间隔

20列每列30px和20像素间隔

25列每列30px和10像素间隔

25列每列20px和20像素间隔

 

如果网页宽度是990px,我们可以使用:

 

11列每列80px和10像素间隔

18列每列35px和20像素间隔

25列每列45px和10像素间隔

33列每列20px和10像素间隔

 

如果网页宽度是980px,我们可以使用:

 

14列每列60px和10像素间隔

14列每列50px和20像素间隔

28列每列25px和10像素间隔

 

栅格系统具体有以下优势:能大大提高网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的。另外,基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。

适配Retina屏幕

2012年苹果发布了Retina Macbook Pro,Retina屏幕的电脑占有量越来越高了。Retina屏幕简单地说就是屏幕密度是传统屏幕的两倍,拥有更大地清晰度。甚至可以满足我们视网膜最高的识别度,所以也叫视网膜屏幕。这种屏幕下我们设计的安全距离大约为1000像素的网站就显得非常粗糙了。所以如果我们现在Retina屏幕下显示一个400X300PX的区域,实际上我们需要提供给前端一张800X600PX的切图才行,因为Retina屏幕一个点顶过去两个像素。那么我们的用户是视网膜屏占比更多的用户,比如设计师群体,那怎么兼顾高清屏幕和普通屏幕呢?

 

首先我们需要以视网膜屏幕大小完成设计稿,建议是传统设计稿的两倍。之后切出两套切图(非Retina屏幕用户如果也加载双倍大小的资源会很慢),普通的切图命名为如logo.jpg,Retina切图命名为logo@2x.jpg。前端用代码来识别,如果屏幕是Retina就加载双倍尺寸,不是则加载普通尺寸。前端可以使用Retina.js(https://retinajs.com/)提供的技术进行识别。

 

自适应与响应式网站

我们看到有些网站使用电脑端或者手机端甚至iPad去浏览时体验都非常好。这就需要我们为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的,都是通过代码检测设备屏幕宽度,根据不同的设备加载不同的css。

 

自适应网站

自适应网站的设计稿是一致的,但是设计稿需要考虑屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距,那么如果宽度缩小成900时需要如何变化,这就是自适应布局。比如站酷网、Dribbble等网站都采用了自适应布局。

 

响应式网站

响应式网站则需要设计不同版本的设计稿,然后根据不同的设备提供不同的CSS样式。比如判定你设备的宽度是750px,那么网站就知道你使用了手机来访问,就会给你导入一份手机才有的样式;如果是电脑的宽度就给你导入电脑的CSS样式。对于设计师来说,自适应需要考虑网站在不同设备宽度下的整除与排版;响应式则需要设计电脑、平板、手机等至少三套设计稿(但这三套设计稿的内容是一致的)。总之,自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。

 

适配的规范

手机方面:适配手机页面时,我们一般以iPhone为画布标准。原因是iPhone相对显示比较清晰,并且要求较高。而且用户占有量也很高。在适配时我们一般以750x1334px尺寸为主,然后将网站导航改变为手机APP常常使用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机APP中我们看到的左右几乎满屏的按钮,并且每个按钮要大于88PX,方便手指的点击。字体方面,我们要把网站的字体全部改为苹方字体,并且字号设置为24PX以上,渲染方式设置成锐利。英文则需要使用SF-UI代替。也就是将网站改变成一个类APP的手机网页,这样才可以保证手机用户体验良好。如果用户使用安卓手机,那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

 

iPad:iPad的尺寸为1024x768、2048x1536px等,无论怎么变基本与电脑屏幕尺寸类似。所以在iPad上浏览网页是基本舒适的。因此,很多网站并没有专门为iPad做适配,如果我们希望iPad用户用的更爽,可以从文字大小(24PX以上)、按钮大小(88PX左右以及以上)、交互形式(抽屉式导航、导航不随屏幕滚动)等方式入手。

总结

无论您面对的项目是To C的还是To B的网站产品,我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。

 

如果设计一般网站的页面,可以按照1920 X 1080px尺寸设计。每屏高度900px,字体使用宋体 12px 无 和微软雅黑 14-20 Windows LCD。Banner尽量满屏,但是图片需要按照4:3或16:9等比例来设计。做网站时可以建立栅格以更好地进行自适应和响应式布局,我们也要为超链接和按钮设计不同的相应鼠标的状态;另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互。

 

如果设计手机端的页面,可以按照750X1334PX尺寸设计。字体使用苹方 24PX以上 锐利。英文字体使用SF UI。按钮和点击区域需要大于88PX方便手指点击。并且头部需要预留出微信或浏览器的导航区域。


台州页面设计:网页设计的整体策略
长按图片保存/分享

台州市久谦网络科技有限公司  版权所有

 Copyright © 2020 All Rights浙ICP备2020041870号-1 Reserved      网站地图

台州市久谦网络科技有限公司  版权所有 

Copyright © 2020 All Rights Reserved 浙ICP备1245789785号-1      网站地图

添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了