首页>>营销推广

完整个性化设计网站建设流程

点击次数:105   发布时间:2020-03-09

1. 网站建设的策略分析 及 User Story (使用者描述)

架设网站并不是只是发布一些文章和漂亮的图片那么简单,你可是在和网络上所有其他同业竞争!你能做的第一个准备,就是搜索其他同性质的网站,观察他们的经营手法。分析出一些适用的范例,并针对你自己的商业模式及商品价值来做调整。了解你想打入的目标市场、客户是谁?年龄层、性别、教育水平等等都会影响到他们的网络使用习惯,而网站的设计也将因此而异。譬如说如果你的目标客户是年轻人,那么有个简约高雅的设计可能会为品牌加分。老一辈的客户,网站上的信息要浅显易懂,网站导览不要太复杂。

webdesign-development-permanentcontent-2.png

白话的说,策略分析过程就是会针对你的商业模式 (Business Model) ,帮你找出市场上成功的同性质网站,加以分析竞争对手的致胜关键,让你更清楚如何创造出自己的个性化价值!而User Story (使用者描述) 则是针对所有会使用网站的使用者,定义所有它可以在网站上做的行为,以及这个行为带来的商业价值是什么。 举例来说:使用者加入会员,因为加入会员后可以每个月收到10%的商品抵用卷。


在这个阶段,你会得到一个最客观的数据分析,以及彻底了解你的网站使用者及受众真实需求是什么。对于开发一个网站前有效的正确分析,会让你的网站提供更准确的内容给使用者,也能大大减少日后的修改程度!其实了解在线市长趋势是个一直持续的过程,因为网络世界不断的在变化。你可以从最简单的开始,注意竞争对手前端用户接口设计,接着用户经验,构想一个你喜欢的网站范本。以后再慢慢深入到文章架构、网站读取速度SEO等等。

Social-Media_0.jpg

2. Sitemap (网站地图)

接下来,你得思索你想要呈现什么样的内容给你的消费者,用什么方法怎么呈现?一个网站可以有许多的接口,该如何整理内容,让你的用户很快搜索到他们所需要的信息?大部分的网站利用选单来分类内容,通常放置于首页上方,方便使用者转换页面。


制作Sitemap就像是绘制你的网站地图,计划页面组织以及信息该存放在哪个位置,让用户可以找到他们想去的方向。网络上有很多免费的工具可以让你快速制作 sitemap,像 GlooMaps 和 Flowchart Maker。网站架构的全貌在这个阶段会被具体绘制出来,以页面为单位进行架构的确认,透过 sitemap 图可以知道各页面的层级关系及如何链接,以及定义清楚静态页面及需要后台管理的页面。

webdesign-development-webapp-2.png

3. Wireframe 及 Prototype (图稿及操作原型)

有了地图后,你是不是已经等不及要着手设计一套美丽的网站页面了?想用什么颜色、特效、字体、连图片都想好了?


等等!先别急。在买下漂亮的衣服前,总该试穿吧!


制作网站也是如此,有些设计想象起来好像很棒,真的做出来时又想更改。为了避免一直重复修改消耗成本,必须先做出基本的设计图稿及原型。Wireframe是将所有页面的功能绘制出来的静态线框稿,它完全不考虑任何视觉上的元素 (例如色彩、字型、动画、照片)。目的就是要专注于页面的主要信息及编排架构,就像是施工单位的建筑蓝图一样,你已可以得知各对象的位置。因此,wireframe 基本上就只有黑白的形状及文字,越简单越好。没画线框稿就制作出网站,如同没有蓝图就盖房子,容易出差错做白工,毕竟想象跟实体一定有差异。市面上也有很多免费或付费 wireframe 制作工具,如 MockFlow、Balsamiq等等。

wwh_image_3@1x.jpg

等到 wireframe 图稿让你满意之后,你就可以开始为你的设计上色了!这个时候你可以把之前考虑的字体色彩都套用进去,作出所谓的 Mockup。Mockup 与 Wireframe 专注的都是 UI 用户接口,也就是网站带给用户的视觉感受。在这之后我们就得考虑进阶版的展示方式, Prototype。Prototype 和 Mockup 基本上目的一样,是让我们得知页面功能及信息的原型,但差别在于:Prototype 要考虑 UX 使用者经验!它是像浏览网站一样可以被操作的,并不是静态,因此能让你更真实感受网站使用者的体验。重点是,制作 Prototype 完全不需要动用任何工程师。什么东西这么神奇?目前大部分的 UI/UX设计师都使用的 prototype 软件有 Sketch、 Axure、 Adobe XD。简单在 Google 上搜索一下就可以发现还有很多其他选择,不妨每一个都试看看,看哪个用起来较顺手。


4. Front-End (前端程序) & Back-End (后端程序)

如何把设计师画出一张张美丽的图稿变成会动的网站呢? 就是前面文章提到的神奇魔法师 – 前端工程师啦!工程师透过千百行的程序,动用不同的程序语言将每页图稿变成会动的网站,也就是使用者可以操作的样貌了。如果你的网站是一个全静态页面的,制作流程比较简单,你的网站基本上也已完成了。 但如果你是希望有后台管理的朋友,那么你还需要多加个后端的开发过程。

wwh_image_2@1x.jpg

管理者在后台上传的内容怎么在画面中出现呢? 在这个阶段后端工程师将会透过程序,将数据存进数据库中,并在页面需要出现的地方提供对应的内容。经营网络商店中的结账流程、在线付费等等需要串接第三方系统的工作,也都是在后端工程师的手中被实现。


5. Debug (除错) & Launch (上稿)

每个网站系统的运作被开发完成后,一定需要经过多次的测试并除错,透过不同测试者操作每个网站功能,并在各个环境(Windows、Mac、iOS、Android) 及各浏览器(Chrome、Safari、Firefox) 反复测试过后,才能让网站在上线后,面对不同状态下的使用者都能正确地被呈现。

wwh_image_1@1x.jpg

最后,网站的管理者及小编要把手上的所有数据都上传到后台,让页面上的数据都是正确的。如此一来,网站就可以正式公告大家上线了!


个性化设计网站与Wordpress网站建设的差异

完全个性化设计的网站和Wordpress网站在建构复杂性上还是有些差别,因为Wordpress本身提供很多主题 (theme),有免费及付费选择。若是你喜欢他们提供的主题,那会节省很多时间,因为你可以对Wordpress主题做个性化设计。只需要在他们的现有的架构上做一些设计修改,套上你的企业官方颜色等等,就可以让网站符合你的企业形象。但如果你野心较大,想要挑战一些新颖的网站设计、动画特效,Wordpress满足不了你,那么个性化设计网站就会花较多时间及成本。

联系我们

公司: 深圳市迅当网络科技有限公司

联系人: 荣先生

QQ: 97532866

手机: 15919993369

公司地址: 深圳龙华观澜松元大布头路333号F栋

联系我们
  • 联系人: 荣先生
  • QQ: 97532866
  • 手机: 15919993369
  • 公司地址: 深圳龙华观澜松元大布头路333号F栋
Copyright © 2016-2021 https://www.xundang.com 深圳市迅当网络科技有限公司 版权所有粤ICP备16022386号
扫描二维码! 关闭
二维码