来源: 最后更新:22-03-21 02:35:00
1、UI界面设计需求分析
采用需求调查表的形式,充分与客户沟通,全面了解客户对UI界面设计方面需求。
2、确认UI界面效果图
根据与客户达成意见,结合技术人员的设计思路,完成UI界面效果图设计,并最终由客户确认。
3、搜集材料
确认了界面首页效果图之后,就要围绕主题开始搜集材料了。 常言道:“巧妇难为无米之炊”。要想让规划的界面够吸引住用户,就要尽量搜集材料,搜集得材料越多,以后设计UI界面就越容易。
4、UI界面规划
4.1结构
(1)栏目
栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。
1)只设计与主题相关的栏目
2)尽可能将网站内最有价值的内容列在栏目上
3)可能从访问者角度来编排栏目以方便访问者的浏览和查询
(2) 版块
板块比栏目的概念要大些,每个版块都 有自己的栏目。
1)各板块要有相对独立性
2)各板块要有相互关联
3)各板块的内容要围绕站点主题
(3) 目录结构
1)不要将所有文件都存放在根目录下
2)按栏目内容建立子目录
3)在每个主目录下都建立独立的Images目录
4)按栏目内容建立子目录在每个子目录下都建立独立的Images目录
5)目录的层次不要太深,不要超过3层
6)不要使用中文目录
7)不要使用过长的目录
8)尽量使用意义明确的目录
(4) 链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。
1)树状结构(一对一):
首页链接指向一级页面,一级页面链接指向二级页面。浏览时,一级级进入,一级级退出,条理比较清晰,访问者明确知道自己在什么位置,但浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须回到首页再进行。
2)星形结构(一对多):
每个页面相互之间都建立有链接。这样浏览再进行。比较方便,随时可以到达自己喜欢的页面。但是由于链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。
3)混合型结构(1和2):
首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。
(5) 形象设计
1)设计网站标志(LOGO):
标志的设计创意应当来自网站的名称和内容;
2)设计网站字体:
标准字体是指用于标志、标题、主菜单的特有字体。
使用非默认字体只能用图片的形式;
3)设计网站色彩:
“标准色彩”是指能体现网站形象和延伸内涵的色彩,要用于网站的标志、标题、主菜单和主色块。
一个网站的标准色彩不超过3种,适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列;
4)设计网站宣传语:
网站精神、主题与中心,或是网站的目标,用一句话或一个词来高度概括.
4.2设置
好的内容选择需要有好的创意,作为网页设计制作者,最苦恼的就是没有好的内容创意。网络上的最多的创意即是来自于虚拟同现实的结合。创意的目的是为了更好的宣传与推广网站,如果创意很好,却对网站发展毫无意义,那么,网站设计制作者也应当放弃这个创意。
另外,主页内容是网站的根本之所在,如果内容空洞,即使页面制作地再怎样精美,仍然不会有多少用户。从根本上说,网站内容仍然左右着网站流量,内容为王依然是个人网站成功的关键。
4.3风格
(1)“风格”是抽象的,是指站点的整体形象给浏览者的综合感受;
(2)“整体形象”包括站点的CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素;
(3)风格是有人性的,通过网站的色彩、技术、文字、布局、交互
方式可以概括出一个站点的个性:是粗犷豪放的,还是清新秀丽的;是温文儒雅的,还是执着热情的;是活泼易变的,还是墨守成规的。
4.4色彩搭配
网页颜色原理和象征意义:大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。
一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜色。
红色:热情、奔放、喜悦、庄严;
黄色:高贵、富有、灿烂、活泼;
黑色:严肃、夜晚、沉着;
白色:纯洁、简单、洁净;
蓝色:天空、清爽、科技、希望;
绿色:植物、生命、生机、自然、健康;
灰色:庄重、沉稳、大气;
紫色:浪漫、富贵、高雅;
棕色:大地、厚朴;……
4.5版面布局
(1)“T”结构布局:
所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母“T”,所以我们称之为“T”形布局。
这是网页设计中用的最广返的一种布局方式。
优点:是页面结构清晰,主次分明。是初学者最容易上手的布局方法。
缺点:是规矩呆板,如果细节色彩上不注意,很容易让人"看之无味"。
(2)"口"型布局:
这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。
优点:是充分利用版面,信息量大(我的主页首页即属于这种布局)。
缺点:是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计。
(3)“三"型布局:
这种布局多用于国外站点,国内用的不多。特点是页面 上横向三条色块,将页面整体分割为四部分,色块中大多放广告条。
(4)POP布局:
POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。
常用于时尚类站点,比如ELLE.com。
优点:显而易见:漂亮吸引人。
缺点:就是速度慢。
作为版面布局还是值得借鉴的。
(5)最新响应式布局:
响应式布局是比较新的东西。技术上对浏览兼容性要求高;不兼容ie9--以下浏览器
常用于时尚类站点,手机、ipad、电脑多设备支持。
优点:多设备支持。
缺点:低版本浏览器兼容性不好。
4.6样式控制
(1)图片使用文字作注解;
(2)图片色彩尽量符合网站整体色调;
(3)使用CSS(CascadingStyle Sheet)样式表规范网站字体大小;
4.7制作工具
Photoshop+Dreamweaver+Html+CSS
Sublime+Html5+CSS3
4.8规划设计
(1)先大后小:在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。
(2)从简到繁:先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。
(3)运用模板:在制作网页时要多灵活运用模板,这样可以大大提高制作效率。
南通成品油价格调整公告(南通汽油价格调整最新消息)根据国家发展改革委公布的国内成品油价格调价信息,现将我省汽、柴
2023汝阳县元宵节焰火晚会推迟举办通告 潍坊市奎文区新华医院入园体检咨询电话 深圳市宝安区松岗镇包括哪些村(深圳市宝安区松岗镇包括哪些村庄) 2023十堰开学健康第一课直播视频在哪里看