网站界面ui设计流程 网页ui设计的基本流程图
建站教程 2024-9-22编辑：深圳网站建设阅读（）
设计流程
ui设计
网站界面
网站【zhàn】界面ui设计【jì】流程:1.客户需求分析【xī】；2.网【wǎng】站原型设计【jì】，3.网站视【shì】觉【jiào】设计；4.网站页面制作(切图psd转html);5.页面【miàn】测式验证；一【yī】名合格的UI设计师【shī】，应【yīng】该能贯穿整个UI流程进行工【gōng】作，而【ér】并非是单【dān】纯的图形【xíng】界面设计。
阶段一：需求分析
1用户需求分析 2用户交互场景分析 3竞争产品分析
这两者可以【yǐ】说是相辅相成的。对于一个【gè】较为正【zhèng】规【guī】的【de】项目而言，必然有对【duì】用户需【xū】求的分析内容。其中用户UI需求是重【chóng】要的组成部分。如果【guǒ】说UI设计原则是【shì】所有UI设计【jì】的出发点的话【huà】，那么用户UI需【xū】求就是【shì】本次设计的出发是好的UI设计建立【lì】在对【duì】用户【hù】深刻了【le】解之上。因此用户【hù】交互【hù】场景分析就很重要。对于大部【bù】分项【xiàng】目组来说也许【xǔ】没有时间和精力去实际勘查用【yòng】户的现有交互、制【zhì】作【zuò】完善【shàn】的交互模【mó】型考察，但是UI设计人员在分析的时候一定要站【zhàn】在用【yòng】户角【jiǎo】度思【sī】考：如果【guǒ】我是【shì】用户，这里我会【huì】需【xū】要什么。竞争产品【pǐn】能够上市并且被【bèi】UI设计【jì】者知道，必【bì】然有其长【zhǎng】处。这就是【shì】所【suǒ】谓三人行必有我师的【de】意思。每【měi】个设计者的思【sī】维都有局限性，看到别人的设计【jì】会有触类旁通的好处。当然【rán】有【yǒu】的【de】时【shí】候可以参【cān】考的并不一定是【shì】竞争产品。
阶段二: 原型设计
（叶面设计前需提给UI页面组）
1.系【xì】统设【shè】计需求文档。2.系统结构文档（例如栏目划分，目录结构【gòu】，导航方【fāng】式等）。3.较复【fù】杂页面表现形式【shì】草图（手【shǒu】绘【huì】或相关软件绘【huì】制）。4.较复杂业务【wù】流【liú】程文【wén】档。5.如有可能提【tí】供参考和示例站点。6.与【yǔ】程序员沟【gōu】通【tōng】部分【fèn】页面实现方法。
阶段三：视觉设计
视觉设【shè】计【jì】，顾【gù】名思义，是通过视觉【jiào】元素和效【xiào】果（包括颜色、插图、摄影【yǐng】、排版、布局、空白等）来改进【jìn】Web/应用程序【xù】的UI和UX的过程。与UI设计相比【bǐ】，它更侧重【chóng】于网页/应用程序【xù】设【shè】计的【de】视觉效果，旨在【zài】吸【xī】引用户。
一【yī】个网站/应用程序能否成功【gōng】吸引更多客【kè】户【hù】并增加销售额，也很大程度上【shàng】受其视觉设计的影响。这就是【shì】为什么越来越多的公【gōng】司和组织选择聘请专业【yè】的【de】视觉设计【jì】师来改进【jìn】他们的网【wǎng】络/应用程【chéng】序产品。
阶段四：页面制作
1.经过确【què】认的美术设计的方案图【tú】7.系统【tǒng】设计需【xū】求文【wén】档等，较复杂务流程文【wén】档。2.所需页面脚本需求，与程【chéng】序员沟通部分页面实现方法【fǎ】。 3提交给程序
用户交互case图【tú】（说明【míng】用【yòng】户和系统之间的联系）用户交互流程【chéng】图【tú】（说明【míng】交互和事件之间的联系）交互功能设【shè】计图（说明【míng】功能和【hé】交互【hù】的对应关系）最【zuì】终得到【dào】UI的【de】设计产品【pǐn】。
阶段五：测式验证
网站界面测试：（页面【miàn】组提【tí】交给测试组【zǔ】包括：1.经确认【rèn】的【de】设【shè】计方案【àn】图。2.静态模【mó】板页面。以上二项均【jun1】为便于查【chá】看嵌入程【chéng】序后的叶面情况。3.常出现【xiàn】的界面错误【wù】：图片错误，页面不美观【guān】，布局【jú】不合理，与【yǔ】原先设计不符，文字 错误HTML代码错误，页面程序【xù】错误【wù】。4.界面bug测试报告：
对于UI产品的【de】验证主要从下面几个方面入手：1、功能性对照UI设【shè】计的【de】再好【hǎo】，和需求不【bú】一【yī】致也不可以。2、 实用性内部测试【shì】UI设【shè】计的最重要点【diǎn】就是实用性。 3、用【yòng】户焦点小【xiǎo】组【zǔ】UI设【shè】计【jì】是否优秀的重【chóng】要【yào】衡量依据。最【zuì】后【hòu】一点其他的问题。现在往往认为交互式设计和【hé】最终【zhōng】的UI效果设【shè】计可以截然分开。这就好比说需【xū】求可以和设计【jì】截然分开，是不【bú】可能【néng】的。
网站ui设计总结：
1.产品【pǐn】定【dìng】位【wèi】与市【shì】场分【fèn】析这一【yī】类工作大多都是由新产品研发部【bù】门以及市场需求完成的，但UI设计师应【yīng】了解【jiě】产品的市场定【dìng】位、产品定义、客户群体、运营【yíng】方式【shì】等。
2.用户研究与分析这【zhè】个【gè】过程是【shì】非【fēi】常重要的，设计师应该找到合【hé】适的方【fāng】法来【lái】完成此环【huán】节【jiē】。你可【kě】以搜集相关资料分析目标用户的使用特征、情感、习惯、心【xīn】里、需求【qiú】等，提出用户【hù】研究报【bào】告【gào】和可用性【xìng】设计建议。这部分工【gōng】作【zuò】也可和团队配合完【wán】成。时间与项目需求允许的情况下，更可【kě】以制定实景用户分析。
3.架【jià】构设计这【zhè】里涉及【jí】到比【bǐ】较多的界面【miàn】交互与流程的设计【jì】，根据【jù】可用性分析结果制定【dìng】交互方式【shì】、操作与跳转流程、结构、布局、信息【xī】和【hé】其他元素。
4.原型设计我觉【jiào】得这里应该是一个【gè】小的【de】阶段标志【zhì】，要对前面所有工作加【jiā】以设计【jì】方面的【de】实【shí】施，根据进【jìn】度与成本，可【kě】以把原【yuán】型控制【zhì】在“手绘－图形－FLASH-视频”几个质量【liàng】范围。原型的【de】本【běn】质更倾【qīng】向与一个DEMO，它不需【xū】要有全部的功能，但要【yào】体【tǐ】现出设计对象的基本特性。
5.界【jiè】面设计如果很倾向于图形界面设计，这【zhè】儿是你最喜欢的部分。但一定要【yào】结合循环讨论过的分析结果做设计【jì】，否【fǒu】则你【nǐ】的作品很难被【bèi】人信服【fú】。色调、风【fēng】格、界面、窗口【kǒu】、图【tú】标、皮肤的表现是本【běn】环【huán】节【jiē】的关【guān】键【jiàn】。
6.界面输出作为设【shè】计师，在这一部分的工作就是【shì】配合好开【kāi】发人员【yuán】完成相关的界面结合。7.完善工作这【zhè】个【gè】环【huán】节是【shì】很多部【bù】门共同参与的，包括可【kě】用【yòng】性的循【xún】环【huán】研究、用户体验回馈【kuì】、
测试回馈。同时，UI人员也应该【gāi】把一些可行性建议进行完【wán】善【shàn】。Tanjurd瑭锦表【biǎo】示【shì】很多设计师做了东西不喜欢改【gǎi】，这是一【yī】个大忌。
如上【shàng】的流程，可能【néng】会有很多部门共同参与【yǔ】完成，UI设计师【shī】如何与【yǔ】团队【duì】配合【hé】并发【fā】挥【huī】自【zì】己应【yīng】有的作用非常重要。一【yī】名合格的UI设计师，应该能贯穿整【zhěng】个UI流程进行【háng】工作，而【ér】并非是单纯的图形界【jiè】面设计。
