专题页设计——UI设计系列讲解
时间:2023-09-28 22:24:01 | 来源:网站运营
时间:2023-09-28 22:24:01 来源:网站运营
专题页设计——UI设计系列讲解:
一、这种类型的网页就是专题页
利用
一个点、一件事、一个主题来策划一个页面或者一个活动的流程页面,该页面会包括网站相应模块和频道所涉及到的功能与该主题事件的内容展示。
专题页面时效性有限(大多专题是有推广及活动时间限制的,过了这个时间,就很少会有人再访问该页面。),多为活动推广和吸引用户等内容,能在限定的时间的吸引最多用户才能形成有力的推广,
需要强有力的视觉效果,和有趣的浏览体验,来达到吸引用户的特点。在规范和布局甚至交互上可以适当放宽要求。
二、专题页的作用
1、整合大量信息,吸引网民注意力;
2、给网站带来流量,吸引部分用户;
3、提高网站被搜索的几率;
4、将用户需要的信息集中展示,方便用户浏览与查找;
5、将大量数据分门别类的展示给用户,体现网站内容的全面性。
三、首页屏幕高度
不同的操作系统,不同的分辨率,不同的浏览器首屏高度不一样
四、不同分辨率及浏览器的首屏高度
五、不同分辨率用户的占比情况
不同分辨率用户的占比情况建议将最主要的信息显示在580PX高度的范围以内。
六、标题是否醒目
标题文字足够醒目吗?通过把图片去色来查看标题是否醒目。专题的主文字传达的是页面最主要信息,需要足够醒目,所以要有整个页面最大的对比度。去色后主文字总是有最大的明暗对比,并且最主要信息始终保持在第一屏内显示完全。七、光环境
图片的光环境一致吗?大家说说看
光环境的调整
原图是张很普通的照片,由于逆光脸部偏暗。于是给他叠加了三个图层。一个顶部的白光提亮整体。左侧的蓝光和右侧的红光,让人物与背景更加融合。调整了光的页面整体效果好了很多。
八、抠图
抠图有毛边不论你页面设计的多么有创意多么好,一旦抠图不干净,有毛边页面档次一下就下去了。
可以用抽出结合橡皮擦
九、内容组织
内容组织这个专题问题很多但是最突出的问题还是“乱”。内容多,而且没有条理,不知道该看哪里,不知道什么才是这个页面的重点。
十、怎么完成设计
作为设计师要快速高质打造一个专题页,不仅仅是创意,
能有条理地再创造会事半功倍,毕竟这是个商业设计!
定位→布局→配色→排版→细节
(一)定位接到一个新任务沟通需求时,确定风格,是喜庆、霸气、PK感、可爱、酷…
(二)布局布局即如何摆放功能模块,值得庆幸的是,我们是商业设计,活动的策划不用设计师考虑,由策划部门已经画好UE图(产品文档)
先UE图做个分析,一种叫正常结构,一种叫非正常结构
对于正常结构的UE,这类专题往往内容比较多,设计师能发挥的空间有限,为用户阅读体验考虑,内容模块按常规排版处理
(三)配色一般用头图海报化、背景场景化的方式来渲染专题本身的氛围,增加页面的视觉冲击力。
非正常UE通常内容少,没固定框架,可根据主题随意发挥
一般的做法:1模块几何化、2场景拟物化
(四)排版专题页首先它是一个功能页,视觉冲击力够强,结构够新颖,给用户一个清晰有序的阅读体验是极关重要的。
整体统一、突出按钮、体现层级、图形引导很重要!
(五)细节添加小元素装饰一下
本节完~