- 1、本文档共116页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
第3章H5视觉设计技巧
学习要点:界面设计主要通过对文字、图片、插画、色彩等语言的规划、编排和优化来完成目标,促进传达者和受众的交流。视觉传达最早应用于商品文字广告,发展到现在数字交互产品的普及应用,大致经历了由文字→图形→色彩→动效→视频的
综合演化。
无论是早期的线下实体产品还是如今的数字产品,视觉设计都发挥着重要的作用。线下实体产品通过视觉设计承担大部分的广告行为,数字产品则通过视觉设计来达到聚拢用户视觉焦点的目的,为用户创造良好的用户体验和实现产品功能传达。因此,视觉设计绝不仅仅只是盲目的美观功能,而是结合产品特性对色彩、文字、图形、层次、空间等要素进行优化组合,在实现基本信息传递的同时,为用户创造最优体验,最终实现或商业或公益目的。
数字产品视觉设计的价值,通过产品颜值、体验与功能三方面来体现。三者相辅相成、缺一不可,从而让我们的数字产品更好地满足用户的需求。本章主要介绍H5数字产品视觉设计的一些规范与设计技巧。
平面设计师
视觉
数码设计师
视觉
听觉触觉
数字时代的视觉设计师
3.1
H5页面设计规范
当一个产品投放给用户后,用户的行为路径是“感知-记忆-理解-行动”。有颜值的视觉设计很重要。一是因为人们对喜爱的、美观的信息更愿意接受,视觉信息传播效率最高。二是相对于文字、音频等,图像化的视觉信息比其他信息更容易让人接受和记忆,科学家也已证实人的大脑处理视觉化的信息最有效率。视觉设计在产品体验上的价值,就是帮助用户获得更好的使用感受和舒适的感官体验。视觉设计通过视觉信息的合理规划、适度呈现、有序编排,使用户情感需求和使用流程得到满足,从而提升用户使用产品的愉悦度。而这个层面的需求,也受到视觉颜值价值的影响。视觉的美感,本身就是一种体验,和使用体验并不是割裂的,而且互相穿插影响。视觉设计在产品功能方面
的价值就是帮助用户更好地解决问题,精准而有创新的视觉设计会让产品功能更明确更
有效。移动端产品的更新迭代非常迅速,视觉设计师只有掌握更多技能,才能不断创新
,满足用户的需求。
3.1.1H5页面设计尺寸
目前大多数H5编辑器,一般会采用640px×1008px这套尺寸。这是适配苹果5代手机的尺寸,但苹果5代屏幕尺寸是640px×1136px,为什么会少掉的128px?那是因为H5一般会在微信上观看,微信页面的上方会有一个顶部导览,
它是用来显示退出、跳转和姓名等信息的。不仅仅是微信,手机端的浏览器也会
有不同样式的导航栏出现在屏幕的上方。
机型
分辨率
状态栏高度
导航栏高度
倍率
iPhone5、5s、5c、SE
640*1136px
40px
88px
@2x
iPhone6、6s、7、8
750*1334px
40px
88px
@2x
iPhone11
828*1792px
88px
88px
@2x
iPhone12、Pro
1170*2532px
132px
132px
@3x
19-08
19-08
×
回家之路
140
顶部栏目+导航条
HsAnn
回家就是一种度假
H5页面区
《
iPhone手机页面区
●像素:px(pixel)的缩写,是指在由一个数字序列表示的图像中的一个最小单位,称为像素。在网页设计中经常会使用该单位。
●像素密度:ppi(pixelsperinch)准确来说是每英寸的长度上排列的像素点数量,像素密度越高,代表屏幕显示效果越精细,H5中的图片分辨率一般用72ppi即可。
●倍率:交互设计中经常说的2倍图、3倍图,其实就是根据像素密度得来的。
H5中一般都做2倍尺寸,也就是2倍图(@2x),这样无论在苹果还是安卓手机上,H5的图片显示较为清晰,同时页面加载速度也会较快。随着手机屏幕越来越
大,比如iPhone12或更大尺寸手机,也会做3倍图(@3x)。
3.1.2H5的响应式特征
640px×1008px这套尺寸最大的好处在于压缩比特别高,它既能保证页面不会太大,又能保证H5的画面在大多数屏幕上能够显示得比较清晰。H5网站具有页
面“响应式”的自动适配能力,所以在大部分情况下页面都会自动适配满屏。
为避免背景图出现黑边、白边和错图类似情况的发生,我们的背景图通常要放出画
面。这个做法类似纸质媒体设计时的“出血”设计,纸媒的“出血”一般设定为3~
5mm。在移动界面设计时,凡是靠边缘的大元素,我们也要做“出血”处理,把它往画外放出去一些。而一些比较靠边的小元素,我们则把它往页面内移动一些,尽量不要出
现在边缘,以防止不同机型显示时元素不完整。
您可能关注的文档
最近下载
- 3done赵州桥小课件.doc VIP
- 地球的公转(1)高二地理湘教版(2019)选择性必修1.pptx
- 幼儿园大班预防新冠病毒.pptx VIP
- 【两篇】2024年庆祝新中国成立75周年专题党课:高举爱国主义伟大旗帜为中华民族伟大复兴汇聚磅礴伟力与推动高质量发展专题党课讲稿:坚持“五个要”坚定不移以高质量发展扎实推进中国式现代化建设.docx VIP
- 图像模式识别全套教学课件.pptx
- GB 43704-2024 对外开放口岸边防检查现场标志-副本.pdf
- 植物生理学植物光合作用.doc VIP
- 发展数字经济培训课件PPT.pptx VIP
- NB∕T 47003.2-2022 常压容器 第2部分:固体料仓.pdf
- 大班美术《向日葵》(线条画)课件.pptx
文档评论(0)