温岭页面设计策略

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

温岭页面设计策略

什么是网页设计?

网页设计又称网页设计、网站设计、网站设计、WUI等。其本质是网站的图形界面设计。虽然我们现在经常在移动终端上使用app获取信息,但很明显,基于个人电脑平台的网站比手机陪伴我们的时间更长:从1987年钱田白教授第一次给德国发邮件开始,到2000年搜狐、新浪、网易在纳斯达克上市,现在网站遍地都是;近30年来,中国的网站发展迅速。小学开始在网吧上网。当时电脑屏幕很小,分辨率只有800x600像素(相比之下iPhone8的分辨率是750x1334px),网速很慢,经常掉线或者加载失败。当时的网站性能和体验都不好,但现在的网站设计和过去发生了很大的变化:注重用户体验,注重页面动态,富媒体等设计让今天的网站体验丝毫不比软件和手机APP差。加上个人电脑的普及,网站仍然是人机交互中最重要的平台之一。

工作流程

先来看看网站设计的工作流程:除了之前介绍的用户调研、撰写产品需求文档、市场文档、竞品调研等工作外,与设计师密切相关的网站项目流程可以分为六个阶段:原型绘制阶段、视觉稿阶段、设计规范阶段、绘制阶段、前端代码阶段和项目检查阶段。每个阶段都需要设计师的参与和理解。不要只关心这个阶段的视觉稿。有很多前期和后期的工作也需要我们注意。好,让我们一个一个地了解它们。

原型图阶段

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

视觉手稿阶段

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

设计规格

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

Chetu

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

前端代码

前端工程师将使用代码重建我们设计的页面,并将图纸转换为静态页面。然后连接后端工程师检索数据接口,一个网站就会活过来。工程师还会掩埋网站,以确定网站是否符合我们要求的数据。埋点是在页面代码中插入一些统计代码,方便我们判断哪些页面流量大,哪些没有达到预期。之后实际上会有测试工程师参与,找出编译后的网站是否存在一些漏洞,这里省略。

项目演练

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

网站类型

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

门户网站

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

企业网站

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

企业网站

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

电子商务网站

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

游戏网站

游戏是一个巨大的行业,很多公司的大部分收入都来自游戏行业。那么,除了制作精良的游戏之外,游戏的官网也一定要设计精美。别忘了,每个玩家都需要访问你的游戏官网,完成下载、充值、社交等重要操作。国外的游戏网站,比如暴雪娱乐公司官网(https://www .暴雪. 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类产品的需求时一定要注意这一点。后台网站通常采用全屏排版,也就是全画布,因为需要更大的图片。小屏幕呢?前端会用相对布局来减少每个元素,排版的位置也会用百分比来决定。

客户关系管理系统

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

SaaS

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

办公自动化

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

网站组件

在了解了网站的不同类别之后,让我们来看看组成一个网站需要哪些部分。一个网站由不同的网页通过超链接连接而成,不同的网页也由不同的模块组成。我们设计了一个像蜘蛛网一样的网,而不是海报。所以在设计网站的时候,要特别注意我们从用户角度看到的网站,而不是孤立地把它当成一个图文作品。

主页

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

辅助页面

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

下页

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

广告

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

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

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

页脚

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

技术原理

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

静态网页

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


温岭页面设计策略
长按图片保存/分享

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

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

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

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

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