黑马程序员技术交流社区

标题: 什么是UI网页设计?网页结构分析和网页分类 [打印本页]

作者: 绘儿    时间: 2021-12-21 10:08
标题: 什么是UI网页设计?网页结构分析和网页分类
本帖最后由 绘儿 于 2022-1-11 14:34 编辑

网页UI设计讲究的是排版布局和视觉效果,其目的是给用户提供一种布局合理、 视觉效果突出、功能强大、使用便捷的界面。网页UI设计以互联网为载体,以互联网技术和数字交交互技术为基础,依照客户与消费者的需求,设计以商业宣传为目的的网页,同时遵循设计美感,实现商业目的与功能的统一。


网页结构分析

虽然网页的表现形式千变万化,但大部分网页的基本结构都是相同的,主要包含引导栏、header、导航、Banner、内容区域、版权信息等模块。

(1)引导栏位于界面的顶部,通常用来放置客服电话、帮助中心、注册和登录等信息,高度一般为35~50像素。

(2)header位于引导栏正下方,主要放置企业logo等内容信息。高度一般为80~100像素。但是目前的流行趋势是将header和导航合并放置在一起,高度为85~130像素。

(3)导航栏高度一般为内容字体的2倍或2.5倍,高度一般为40-60像素。

(4)Banner高度通常为300~500像素。

(5)内容区和版权信息高度不限,可根据内容信息进行调整。


网页分类

根据网站的内容,网页可大致分类为首页、详情页和列表页三种类型。

1.首页

首页作为网站的门面,是给予用户第一-印象的核心页面,也是呈现品牌形象的窗口,能更直观地展示企业的产品和服务,首页设计需要贴近企业文化,有鲜明的特色。由于行业特性的差别,网站需要根据自身行业选择适当的表现形式。


2.详情页

大部分网站主要从公司介绍、产品、服务等方面进行宣传,而整体布局需要使用户操作更加方便、快捷,所以在布局上仅仅是内容区域的变化,其余保持不变。整个网站中,详情页作为二级页面要与首页的色彩风格一致,页面中同一元素也要与其他页面保持一致。


3.列表页

列表页主要用于展示产品和相关信息,该页展示了比首页更多的产品信息,还可以对产品信息进行初步的筛选。列表页应该使用户快速了解该网站产品信息并能诱惑用户点击,设计时要注意在有限的页面空间中合理安排文字,传达的信息量充足,并使产品内容信息突出。


--------------------------------------------------------------------------------------------

精华推荐:
UI设计师如何自我介绍最有用!
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路,助你轻松拿下Offer
初级设计师面试失败,大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3



希望绘儿整理的面试宝典助你面试成功!
如果有用,记得点赞留言哦~
获取【UI设计视频教程资料】加绘儿2168934524


推荐阅读:
想了解UI设计更新【行业前景UI设计师的薪资待遇怎么样?
想了解更新更真实学员就业动态听传智UI/UE设计深圳校区老学员毕业工作经验分享
更新更真实学员亲身经历从百度底薪4K到14K+13薪UI设计师
想了解最新最真实【开班动态听传智UI/UE设计北京131期(2021.10.15)同学们开班说了啥?







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2