网页设计的内容有哪些
1.原型图
原型图阶段中制定师必须要和产品经理〔沟通〕必须求,这时
要注意,并不是产品经理向制定师下发必须求,而是必须要互相
就自己擅长的方面进行沟通。视觉方面具体浮现或许制定师会有
过更好的方式,这是必须要在制定之前与产品经理达成一致。
2.视觉稿
网页制定的内容中视觉稿阶段就是我们要依据原型图确定的内
容和大体板式完成网站的界面制定了,在网站制定的时候,我们
必须要一些图像和灵感的素材。比如世界杯专题时,我们除了收
集很多素材之外,也可以制定一个"情绪板'。简单说情绪板就是
将一些于主题相关的资料和素材铺贴在一起,这样可以更好地指
引我们整个必须求的制定主题和大体感觉。另外,很多网站的头
部通常必须要主视觉来抓人眼球,这时可能会使用到必须求方提
供的明星照片、主题素材、logo、主视觉PSD等,那么用素材和
这些必须求方提供的资料进行混合并拼出让人觉得震撼的头部视
觉就是我们的目标了。主视觉下面的信息排布更强调合理性,这
时也必须要和产品经理沟通从后台调取图片尺寸、标题字段长度等,然后依据这些要求完成页面信息部分的制定。总之,制定过
程中必须要我们不断思索和沟通才可以完成一个比较棒的视觉稿。
3.制定规范
当视觉稿通过之后,很多制定师可能不会主动地去做制定规范。其实每一个可迭代的产品都必须要制定来总结制定规范,制定规范就是所有页面中共性的东西,比如字体不同的大小、图片的尺寸、按钮
的样式等,这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分析功能如果采纳两种迥然不同的样式就会让用户疑惑。那么制定规范主要也是在约束制定师我们自己,在用户有限的〔记忆力〕中减少思索的成本。
同时,制定规范也可以确保同一个项目的不同制定师都能输出一样风格的制定来。最后,制定规范关于制定师个人来说也是滴项目影响的一个佐证,可以证实你的思索和你在项目中的地位。所以我认为制定师应该主动去做制定规范和项目总结。制定规范如何去做?其实制定规范就是把主要页面的元素固定才统一元素
即可。具体来说一个产品的制定规范应该有:字体规范、主体规范、图表规范、图片规范等不同的分类。
4.切图
在网页制定的内容中,网页制定师通常不必须要为前端工程师切图。因为前端工程师通常必须要掌握PS软件技能。如果碰到特别状况必须要我们切图时,我们可以使用诸如Cutterman、Zeplin 等切图插件中web选项为前端切除网站所必须要使用的图片。
5.前端代码
前端工程师会用代码重构我们制定的页面,把图纸变为静态页面。然后和后端工程师对接调取数据接口,一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据,也会进行埋点。埋点就是在页面代码中插入一些统计代码,方便我们之后确定哪些页面访问量高,哪些没有达到预期。在此后还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。
6.项目走查
网页制定完成后还必须要制定师进行项目走查,来确定网页还原度是否有问题。如果发现有和制定稿出入很大的,就必须要要求前端工程师进行调整。这个步骤非常重要,因为网站的成品才是我们最终的输出,不要认为制定稿很美丽而实现后的页面就不必须要我们负责了。
2网页排版的小技巧
1. 减少不同类型字体的使用
不要使用太多的字体,只破坏你的布局。
为了避免上图这种状况,尽量把字体数量限制到最小,一般两个就很充足,其实一个也足够。如下列图的字体组合:
2. 使用标准字体
用户对标准字体更熟悉,因此可以快速的读取。除非你的网站的自定义字体很有吸引力,否则最好还是使用系统字体。一个安
全的方法是用一个系统的字体:如Arial,Calibri,Trebuchet 等。
3. 选择一种能在各种尺寸中工作的字体
用户可能会从不同的屏幕尺寸和分辨率的设备中访问网站,选择一种能在多尺寸和重量上运行优良的字体,坚持每个尺寸的可读性。
产品设计排版网站Google的Roboto字体
确保你的字体在比较小的屏幕种依旧清楚可辨,保证你说选择的字体在较小的屏幕上清楚可辨!尽量避免草书,如Vivaldi(在下面的示例中):虽然很美丽,但很难阅读。
Vivaldi字体很难以在小屏幕上阅读
4. 限制行的长度
Baymard Institute关于行的长度这样说:
"如果你想要有一个好的阅读体验,每行应约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。' 行太短,视线要常常返回,会打破读者的节奏。行太长,用户的视线又很难专注于文本。
5. 行间距的重要性
增加行高,可以增加文本之间的垂直空白空间,提升可读性,换取屏幕空间。一个规则,行高应该是字符高度的30%。
左:几乎堆叠的文字。右:优良的间距有助于可读性。
6. 保证你有足够的颜对比度
在文本和背景中不要使用相同或相似的颜,文本越显然,用户才干更快的阅读。
上图难以依据背景颜进行阅读。
上图则易于阅读背景颜。
你一旦选择了颜,就要在大多数设备上进行测试。如果测试时显示阅读副本有问题,那么你的用户使用时也会有相同得到问题。
7. 避免红或绿的文本
盲很常见,尤其是男性,据调查8%的男性是红绿盲,避免单独使用红和绿来传达信息。
8. 避免使用闪烁的文字
首先,闪烁的内容可能会导致个体癫痫发作,其次,关于大多数用户,这很令人反感而且容易分心。
3专业网页制定技巧
1.坚持主页简约,无杂乱
我们很少在网站上阅读每一个字。相反,我们快速浏览网页,挑出关键字和句子。合计到这些已知的行为,最好是诉诸情感而
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论