长春网站优化推广
当前位置: 首 页 >> 新闻中心 >> 行业新闻

网页设计必须要懂得的那些事儿(八)

网页设计必须要懂得的那些事儿(八)

发布日期:2018-09-04 作者: 点击:

  2. 文字规范

  我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的,那这种文字在浏览器上的渲染与系统和浏览器有关,比如:在苹果电脑上看到的文字效果和Windows系统电脑上看到的文字效果就有所不同,苹果会对文字进行渲染,而windows的文字几乎充满了像素颗粒。

  按照用户占比来说无疑Windows的用户是主流,所以尽管我们可能使用苹果电脑设计网页,但是设计出来的网页效果也应该和Windows显示一致。否则我们设计完漂亮的设计稿,程序员无法还原成我们设计的样子。

  另外,字号的大小也非常重要。网页的显示区域决定了文字不可以过大,在网站设计中我们的文字大小一般来说是12- 20 像素。

  为什么不能比12px更小?

  因为如果比 12 像素更小的中文无法放得下复杂的笔画了,而且奇数的文字表现和适配都不好做,也就是说我们必须使用偶数的字号来设计。

  那么总结一下,文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑,大小为14-20px,渲染方式选择Windows Lcd或锐利。另外,英文和数字需使用Arial字体,渲染方式选择无。

  


  网站字体规范

  3. 图片规范

  网站设计中的图片常用4(宽):3(高)、16(宽):9(高)、1: 1 等比例。具体图片大小没有固定要求,但整数和偶数为佳,主要是考虑到一些适配的问题,作为内容出现的图片,一定需要有介绍信息和排序信息。

  图片的格式有很多,比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好,如何让网页使用的图片更小呢?

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

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

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

  第四种方法,浏览器和服务器握手时需要下载网页所调用的图片资源,那么如果一个网站有一百张图片的话,浏览器和服务器就得握一百次。第一会耗费服务器资源,第二访问速度就会慢一些。

  所以前端工程师们有一种做法,就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿,显示的那块区域移动到一大张图片中所需要的那个图像。

  


  在线压缩工具Tinypng网站

  4. 按钮

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

  


  不同时代下不同的按钮风格

  5. 表单

  在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件,一般是直接调用系统设计的。但是系统设计有时不能满足我们的要求,系统内置的表单高度不够,点击起来不舒服,不符合网站整体设计的品牌感等。

  那么我们可以通过CSS给这些表单增加样式,包括颜色、大小、内外边距等,所以我们遇到涉及到表单的需求时,也可以进行自定义设计。

  


  表单不同风格的设计 UIDE Kit by Mateusz Dembek

  6. 栅格

  我们把整体宽度定义为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 像素间隔

  栅格系统具体有以下优势,能大大提高网页的规范性。

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

  


  网站的栅格化会使网站看起来更有秩序感

  7. 适配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/)提供的技术进行识别。

  8. 自适应与响应式网站

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

  (1)自适应网站

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

  (2)响应式网站

  响应式网站则需要设计不同版本的设计稿,然后根据不同的设备提供不同的CSS样式。比如:判定你设备的宽度是750px,那么网站就知道你使用了手机来访问,就会给你导入一份手机才有的样式,如果是电脑的宽度就给你导入电脑的CSS样式。

  对于设计师来说,自适应需要考虑网站在不同设备宽度下的整除与排版;响应式则需要设计电脑、平板、手机等至少三套设计稿(但这三套设计稿的内容是一致的)。

  总之,自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。

  9. 适配的规范

  手机方面:适配手机页面时,我们一般以iPhone为画布标准。原因是iPhone相对显示比较清晰,并且要求较高。而且用户占有量也很高,在适配时我们一般以750x1334px尺寸为主,然后将网站导航改变为手机APP常常使用的汉堡包+抽屉式导航的形式。

  同时,网站里的按钮也需要变为手机APP中我们看到的左右几乎满屏的按钮,并且每个按钮要大于88PX,方便手指的点击。字体方面,我们要把网站的字体全部改为苹方字体,并且字号设置为24PX以上,渲染方式设置成锐利,英文则需要使用SF-UI代替。

  也就是将网站改变成一个类APP的手机网页,这样才可以保证手机用户体验良好。如果用户使用安卓手机,那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

  iPad:iPad的尺寸为1024×768、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方便手指点击。并且头部需要预留出微信或浏览器的导航区域。

  长春中融合信有限公司致力于为企业提供有价值的产品服务,以需求为导向,不虚假宣传、不过度营销。坚持为客户提供有价值服务。 公司由多年从事软件开发、网站开发、手机程序开发、网络营销的多名技术人员组建。 具体项目有:长春企业品牌设计长春网站优化推广长春高端网站建设手机网站建设等的全网整合营销。公司提倡以人为中心的管理思想,实行人性化的管理方案。让员工喜欢工作、享受工作。最终让客户得到专业用心的服务。


本文网址:http://www.jlwzjs.com/news/597.html

关键词:

最近浏览: