好酷屋

最新UI设计流程是什么

好酷屋

发布于2023-03-14

好酷屋教程网小编为您收集和整理了最新UI设计流程是什么的相关教程:1、UI界面设计需求分析    采用需求调查表的形式,充分与客户沟通,全面了解客户对UI界面设计方面需求。    2、确认UI界面效果图    根据与客户达成意见,结合技术人员的设计思路,完成UI界面

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)运用模板:在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

以上就是好酷屋教程网小编为您收集和整理的标签,简介,UI相关内容,如果对您有帮助,请帮忙分享这篇文章^_^

本文来源: https://www.haoku5.com/shenghuo/641011d6b6b220e3740254b5.html

相关推荐

    热门专题