网站架构规划小技巧,让你第一次和设计师沟通就上手!

网赚平台-专注网上赚钱方法及正规网络兼职赚钱项目


网站架构规划小技巧,让你第一次和设计师沟通就上手!

网站架设确实是一项技术活,若你相信术有专攻,但却不知道该如何与网站设计师沟通?害怕花了钱,但网站设计走向却事与愿违?本篇文章提供给即将要设计网站或正在进行网站设计的你,顺利和设​​计师表达你对网站架构想像与规划的小技巧。

网站架构是什么?

网站架构涵盖的范畴非常广泛,从前端到后端都被包括其中,近乎以简略的方式说明了整个网站设计页面与页面之间的依赖关系,以及责任分配和控制流程,因此是网站架设与设计中较为复杂的一环。

不过,在这里并不需要想得太深,你只需要用简单的网站架构图清楚告知设计师,你想像中或目标TA喜欢的网站架构是怎样的,比方说:会有轮播图区块、需要有提示页、想要有面包屑导览列……等等,以及你希望在网站中揭露哪些与品牌相关的资讯就好了。

为什么要用网站架构图与设计师沟通?

我们都了解人与人之间的认知差异,如果只单靠文字会发生什么事情,也了解图解与文字传递的清晰度。因此为了让沟通可以更顺畅,运用网站架构图与设计师沟通会成为最好的选项。更何况现代人们并不喜欢毫无准备的去面对各种事物,所以不管是需要设计、网站架设、或行销相关等服务,必定都会事先爬文找寻相关的资讯,如此一来都会具备一定的知识基础与对服务的想像,运用图解的方式,的确会让沟通更顺畅、令服务更贴合需求。

网站架构的手绘线框图,只要能清楚表达意思,手绘也很好。

如何绘制网站架构图?

绘制网站架构图不需要想得太过复杂,只要表现出网站设计的重点就好了,像是:那个区块需要两个栏位、这里需要一颗按钮……等简略地完整网站架构图。一般来说,网站架构图的设计流程会从市场调查、用户分析……开始规画网站架构图,但是这边我们需要的是一份可以与设计师沟通的网站架构图,所以你可以这么做:

STEP 1:搜集同业的网站架构

观察网路中同性质产业的网站架构都拥有哪些页面,或者是会有什么样的元件存在。基本上,为了符合Google公告的SEO架构,每个网站的架构都差不了多少,但还是会有可操作空间。一般的形象网站或购物网站都存在以下页面:

形象网站购物网站
关于品牌首页
产品介绍产品说明页
服务提供会员注册
观点分享购物车
联络我们结帐

网站架构就跟百货公司的指示牌一样,楼层简介都是为了让你明白这一层在卖什么。所以拥有清楚的网站架构可以让浏览网站的使用者不会迷路,尤其当进入网站的使用者都有可能成为你的付费客户时,一个不会迷路且有清晰指引的网站设计就相当重要。

这里介绍一个有趣的网站,如果你在搜集资料过程中,对某些网站的结构感兴趣,可以试着用Wirify看见该网站的结构是如何规划。

Wirify可以用来观察其他网站的架构。

STEP 2:规划网站架构大纲

从观察结果中汇集出属于自己的网站架构大纲,并如下图般条列出每个页面大致的位置所在,这里可以让你初步了解到网站可能需要设计的页面量,如果可以要尽量将每个页面分类控制在5个以内,避免过度衍生以致使用体验不佳。

GOGORO的网站结构与其网站UI/UX画面。

就gogoro的网站架构而言,整体显得干净俐落,页面除了一般常见的,它还多了连结到网路商店与寻找门市等页面,这便是依据基础架构再汇集品牌需求的做法。通常基础架构若能为使用者带来最佳使用体验当然最好,不然就得再次以使用者的角度检视被忽视的需求并加以修正,让网站具备品牌特色的同时,也令使用者一看就懂得该到那里寻找所需的资讯。

STEP 3:运用线框图画出网站架构

最后便是用线框图画出网站架构。这个步骤如果不会使用绘图软体的话,你可以用WORD、EXCEL或是最原始的纸笔把所有的网站内容配置绘出,如同纸本网站一般,这么一来设计师便能很好的知道你的想法。

NETFLIX网站架构所绘出来的线框图与其UX/UI设计

网站架构范例

网站架构案例-NETFLIX,简单的网站架构,但却拥有高转换,值得参考。

拿NETFLIX首页举例,线框图的绘制便如上图,将每一个区块的内容、功能标示清楚,当确定摆放的布局定案后,就可以开始把文案与图片置入,测试一下网站的视觉效果是否如你所想。

不过在网站架构阶段,尽可能不要带入色彩,运用灰阶进行初步设计,将视觉力度依照浓度深浅划分几个区块,这样在与设计师沟通时,便能清楚知晓你所希望的网站视觉重点该如何设计。

网站架构设计后,与设计师展开讨论前的准备

整理网站架构图所需要的资料

品牌相关设计图档产品相关图档网站内容文案
LOGO、品牌代表色……等。认证标章、检验书……等。品牌定位声明书、产品介绍……等。

不过,整理不单单只是将AI档、文案等汇集,而是按照网站架构图将每个页面所需的档案分门别类,没有明显分类的就放在最外层。

需要提供给设计师的资料,可以分门别类整理好,提升沟通的效率。

如上图般将需要的档案统整到各自对应的资料夹,可以加速网站讨论过后的设计流程,不需要再一来一往反覆传送档案,令网站图档或文案产生错误。如果有文案或图片需求也可以备注在里面让设计师初步了解,这样开始与最终的报价就不会产生太大的差距。

找到符合使用者与品牌需求的网站风格

就算是同性质产业,每个品牌仍有其独特之处。你可以透过下列网站范例去找到适合品牌的风格,并一并统整进要提供给设计师的资料中。

里面有很多网站架构可以做参考,你可以依网站主题、标签、色调去搜寻版面,就算是同一种类别的网站呈现的风格也不尽相同,因此设计外观时,可以多参考此类网站。

IO3000最常使用的网站架构参考网站,里面就算是同一种行业,也有不同诠释方式。

除了可以找到各式网站架构之外,还会附上网站在各个行动装置,也就是响应式设计所呈现的效果,右栏也有不同网页技术分类的选项,可以帮助你快速找到所需的网站架构。

一个拥有很多网站架构版型的RWDJP网站,里头的网站同时会展现RWD设计效果。

网页设计界的奥斯卡Awwwards,是追踪最新网页设计趋势的重要资源。上面的作品如果有参加比赛,都会有评审为之打分,可以借此整理其他网站的优点给设计师,令其明白你的需求或喜好。

awward拥有庞大网站架构类型的地方,还可以看有哪些网站有得名。
awward拥有庞大网站架构类型的地方,还可以看有哪些网站有得名。

与设计师展开讨论

与设计师的沟通除了针对网站架构图与网站外观进行讨论外,也要注意你的网站是否具备以下搜寻引擎友善化的SEO网站架构。一个好的网站架构,以使用者角度来说,要保证良好的使用者体验,在搜寻引擎则需要让爬虫更顺利、完整地爬取所有网页并收录。

响应式(RWD)或自适应式(AWD)

目前网站设计的基础都必须确保网站在各种行动装置浏览的舒适性,所以都会配有响应式(RWD)或自适应式(AWD)设计,让网站在不同萤幕尺寸之下,都能正常滑动浏览。

CMS管理后台

如果没有一定的程式基础,那后端最少要有CMS管理后台,可以让你自行更新文章、上架产品、管理顾客名单……等等,不然只能依靠HTML去修改文章、产品说明、尺寸数量等,网站设计便会显得不太实际与实用,很容易就会面临被淘汰的窘境。

若没有CMS,就只能打程式更新网站。

SSL凭证

SSL凭证可以保证资料的安全,能有效防止个资窃取,是网站上架能赢得使用者信任必备的一项凭证。一般而言,没有凭证的网站相对使用者来说,不论内容多精美,使用者对其都会有所忌惮;同理,拥有凭证的网站除了获得使用者入场卷外,Google也会予以提升网站权重分数。

结语

你的网站是为了推广品牌而存在,而最了解品牌的人莫过于你,所以相信专业也等于相信自己,如果你也不能替你的品牌把关,那很有可能最终的网站成品也不会符合目标客户的期待,所以了解与学会以上的小技巧,网站设计的一切便能事半功倍。

文章的最后,如果你对于网站架设或设计还有想了解的部分,可以继续浏览以下文章,也可以来找拥有多年经验的庞果设计进行咨询,我们会站在专业的角度,为你提供详尽且实用的建议。

© 版权声明
THE END
喜欢就支持一下吧
点赞6
分享
评论 抢沙发