一个网站的诞生——从设计到开发

原创文章 分类: 经验/观点 版权:
1846 27 28 0
2017-12-28
9.3
普通推荐

一个网站的诞生——从设计到开发


在互联网时代,想了解一家公司,人们首先会想到去访问他的官方网站,通过网站了解这家公司、公司的人、公司的产品等等。


在一定意义上,颜值等于身价,越高端的品牌越重视自身形象的塑造。试想如果苹果的网站不再大气,无印良品的网站不再简约,你们害不害怕?


由此可见,拥有一个符合公司形象的网站是多么的重要!


今天我们就来了解一下:一个网站,从设计到开发是一个怎样的流程。



根据思维导图,大家可以看到网站开发的六个基本阶段,接下来我们一起来看看每个阶段具体需要做些什么工作。


01 需求讨论


第一阶段:需求讨论。


在此之前,我们要先了解客户是一家什么公司?客户属于什么行业?客户的竞品公司有哪些?客户的客户是什么类型?客户是否已经有VI(视觉识别系统,例如logo,品牌色等)?


需求讨论也分两种情况,一是客户有需求文档,二是客户没有需求文档。


(一)客户有需要文档

当客户自己整理了具体需求文档,我们只要确认客户的需求是合理的,我们能够为其实现出来,就可以进行下一步了!如果有不合理的地方,要及时向客户提出,协商修改。


给大家参考一位客户给我提供的需求文档,居然还有原型图,可以说是相当专业了:



(二)客户没有需求文档

这才是正常的情况,很多客户自己并不知道自己想要什么,或者心里有预期但是不知道怎么表达。


此时就需要我们去引导客户,帮助客户整理需求文档。当然做这件事的人最好就是PM(产品经理)本人啦,但有的团队没有PM,设计师作为直接为客户网站视觉呈现负责的人,就要独挑这个重担了!


网站需求文档的整理,包含但不限于:


1、客户喜欢的风格,参考的样式


例如一个从日本留学回来的客户,很喜欢日系设计风格中的“性冷淡”的感觉,因此我的设计走的就是简约大气风,通过大量留白、高级灰的配色、较为抽象和艺术的配图来满足客户的需求。主要参考网站为——无印良品。


2、网站页面和页数设置


1) 网站一级导航内容及数量(如:主页、新闻、产品、关于我们、联系我们等)

2) 网站二级页面内容及数量(如:产品页面下面,包含产品1、产品2、产品3等二级页面)

3) 是否需要三级页面、四级页面等


你可以列出一个表格:



3、网站功能设置


关于网站功能,我们根据客户的需求,列出每个功能的详情即可。(网站功能包括:新闻、加盟留言、产品展示等)


设计师在网站开发的过程中是属于“前端”的,而网站功能的设置是靠“后端”程序员来实现的。


关于前端和后端的联系,知乎上有个回答我认为特别到位,分享给大家——


“ 前端的主要对象是用户,而后端的主要对象是内部工作人员。用户的需求通过前端体现,而网页的分析、管理、优化的需求等数据由后台实现。

所以在第一步需求讨论阶段,我们需要做的就是跟客户充分讨论在设计和功能上的需求,评估可行性,#当然讨论报价和工时也要同步进行#,如果能够完成,我们就可以签合同了。 ”


02 需求确认


第二阶段:需求确认。


讨论完需求,签完合同,就要开工了。该阶段PM或设计师要出网站的原型图或者低保真设计图交给客户,进行需求确认。


万丈高楼从地起,这一步的原型设计影响着之后所有页面的设计,所以甲乙双方都务必重视,避免不必要的返工。


03 网站设计


第三阶段:网站设计。


经过前面激烈的讨论和慎重的确认,整个网站的设计终于柳暗花明了!此时设计师可以充分发挥你的设计能力,完成视觉工作。emm..除了视觉工作,你还得考虑交互效果,视觉设计师懂点产品再懂点交互会更棒棒哦。


图为我正在用Sketch设计网站页面


设计完界面之后,就是导出工程图了,曾经我也是相当厌恶这一步,因为做的十几二十个页面、几百上千个元素,全都要进行标注和切图,好好的设计图标注得花里胡哨密密麻麻的,我都心疼程序员的眼睛...


可是现在我不觉得这一步有多烦了,为什么?因为Sketch上有个必备插件,你只用切图然后导出,就会自动生成工程文件,程序员打开后指哪儿就会显示相应的设计信息,这个插件叫做Sketch Measure,在我的这篇文章中可以下载:Sketch上最好用的插件合集http://www.ui.cn/detail/295989.html



Sketch Measure导出的工程文件长这个样子,第一个文件夹是放的切图,程序员打开第二个画框的文件即可查看标注。


04 网站开发


第四阶段:网站开发。


网站开发的前期需要设计师和程序员密切配合。为什么?你信不信你给的设计图就算标注得再好,程序员小哥哥也能给你做得你不敢承认是自己设计的,哈哈哈。


所以在开发阶段前期,设计师交付工程图给程序员以后,要配合前端完善页面细节,争取能够将设计稿实现个90%吧。


后期就是前端工程师和后端工程师的配合了,前端写页面功能,后端写web层接口,管控数据。


05 网站测试


这个阶段跟设计师就没啥关系了,默默在精神上支持他们。


06 网站上线


经过一系列的努力,从需求讨论、确认,到设计,再到开发和测试,一个网站总算是可以上线了!恭喜恭喜!




以上。

其实开发一个网站没有那么难,

但也没有那么简单。


用心做的产品,

用户都能感受得到。


今日彩蛋


分享一个网站 Bootstrap中文网:

https://v3.bootcss.com/css/#grid


如何拉近设计和程序的距离?当然是走进别人的世界看看啦。这可能是唯一一个我都能看懂的程序员常用网站了!想了解程序是如何开发网页、某些代码代表什么意思、网页设计中的栅格系统和响应式设计等重要知识点,就来这里看看吧!



微信公众号:叶设计的自习室

叶碉堡了

微信公众号:叶设计的自习室

448粉丝/39关注

超级好用的GIF录屏工具让你的网页动起来!必须让前端知道的10个网页动效库

叶碉堡了

叶碉堡了

微信公众号:叶设计的自习室

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN