如何重塑移動(dòng)時(shí)代的網(wǎng)頁(yè)設(shè)計(jì)流程
  • 更新時(shí)間:2024-12-25 14:56:29
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 309

隨著時(shí)代和技術(shù)的發(fā)展,網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程正在悄然發(fā)生著巨大的變化。準(zhǔn)確、具體的設(shè)計(jì)交付列表不再是網(wǎng)頁(yè)設(shè)計(jì)的唯一標(biāo)準(zhǔn),靜態(tài)頁(yè)面設(shè)計(jì)在整個(gè)設(shè)計(jì)過(guò)程中的比例正在逐漸降低。正如Stephen Hay所說(shuō),我們?cè)O(shè)計(jì)的不再是一個(gè)簡(jiǎn)單的頁(yè)面,而是一個(gè)包含很多組件的整個(gè)系統(tǒng)。

不僅僅是內(nèi)容和信息在快速變化。用戶使用的設(shè)備和呈現(xiàn)內(nèi)容的方式也在迅速變化。這些都與網(wǎng)頁(yè)設(shè)計(jì)密切相關(guān),而且這種轉(zhuǎn)變沒(méi)有放緩的跡象。而我們的設(shè)計(jì)作為載體和外觀的載體,應(yīng)該領(lǐng)先于他們。

以前的網(wǎng)頁(yè)設(shè)計(jì)流程似乎無(wú)法應(yīng)付今天的這一切,改版迫在眉睫。敏捷開發(fā)、團(tuán)隊(duì)合作和適應(yīng)性調(diào)整都處于設(shè)計(jì)過(guò)程的最前沿,設(shè)計(jì)和開發(fā)之間的界限越來(lái)越模糊。

移動(dòng)端優(yōu)先

Mobile first,這句口號(hào)已經(jīng)喊了好幾年了,真正有遠(yuǎn)見的網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)該很清楚這句話遠(yuǎn)不止一句簡(jiǎn)單的口號(hào)。移動(dòng)優(yōu)先肯定會(huì)涉及到設(shè)計(jì)過(guò)程。我們應(yīng)該從小屏幕開始,先設(shè)計(jì)一個(gè)簡(jiǎn)單的布局,然后再增加復(fù)雜度,以此為基礎(chǔ)進(jìn)行大屏幕的設(shè)計(jì)。

隨著移動(dòng)設(shè)備的使用率超過(guò)PC,移動(dòng)設(shè)備上的網(wǎng)頁(yè)瀏覽無(wú)疑成為了用戶獲取信息的重要渠道,移動(dòng)優(yōu)先設(shè)計(jì)理應(yīng)成為常態(tài)。

除非你的網(wǎng)站情況非常特殊,或者你有非常有說(shuō)服力的特殊數(shù)據(jù)來(lái)支持你的想法,否則移動(dòng)優(yōu)先設(shè)計(jì)是合乎邏輯的。

相比于為了小屏降低整個(gè)設(shè)計(jì)的復(fù)雜度,先適配移動(dòng)端再增加復(fù)雜度更容易。回想一下按照之前的流程設(shè)計(jì)網(wǎng)頁(yè),我們總是厭倦了響應(yīng)客戶的請(qǐng)求,后期還要調(diào)整設(shè)計(jì)和代碼。未完成的頁(yè)面和不好用的移動(dòng)頁(yè)面是無(wú)盡的坑。

桌面端的頁(yè)面總是先完成,這里基本改正的移動(dòng)端頁(yè)面總是顯得有些粗制濫造。

那么讓我們停止使用“移動(dòng)優(yōu)先”作為簡(jiǎn)短的口號(hào)吧!從現(xiàn)在開始真正意義上的移動(dòng)端小屏設(shè)計(jì)!

移動(dòng)端的時(shí)代要如何重塑網(wǎng)頁(yè)設(shè)計(jì)流程介紹

搭建而非拆卸

設(shè)計(jì)是一個(gè)積累的過(guò)程,每一次改進(jìn)都是在前一步的完成和成功的基礎(chǔ)上逐步建立起來(lái)的。

基于小屏幕的設(shè)計(jì)方案是合乎邏輯的。我更喜歡一磚一瓦地建造它,而不是一點(diǎn)一點(diǎn)地拆除它。

我能想到的最好的比喻是“原子設(shè)計(jì)”,即通過(guò)逐漸增加事物的復(fù)雜性來(lái)構(gòu)建事物的設(shè)計(jì)方法??傊?,有了這個(gè)思路,就是這樣設(shè)計(jì)的:

確?;九虐妗⒋笮『皖伾褂没谶@些基本設(shè)置。確保表單字段和標(biāo)簽等小元素的設(shè)計(jì)基于上述設(shè)計(jì)。完善大型元素的設(shè)計(jì),例如完整的聯(lián)系表。將構(gòu)建好的網(wǎng)頁(yè)元素構(gòu)建成一個(gè)頁(yè)面,重復(fù)上述過(guò)程

正是這些不起眼的元素構(gòu)建了你的頁(yè)面,正是這樣一種簡(jiǎn)單的方法也可以完成之前看起來(lái)復(fù)雜的頁(yè)面設(shè)計(jì)。只要你用好這個(gè)設(shè)計(jì)過(guò)程,它帶來(lái)的可能性是無(wú)窮無(wú)盡的。

相較于一開始就設(shè)計(jì)頁(yè)面,完成這些“一磚一瓦”的設(shè)計(jì)更加輕松便捷,從移動(dòng)端到桌面端的整個(gè)設(shè)計(jì)過(guò)程更加完美順暢。想一想你和你的客戶在這個(gè)過(guò)程中需要關(guān)注什么,無(wú)非就是不斷地添加細(xì)節(jié)。

在討論響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)過(guò)程時(shí),我們?cè)诖蚱泼襟w查詢和針對(duì)現(xiàn)有硬件設(shè)備進(jìn)行設(shè)計(jì)的平衡上花費(fèi)了大量時(shí)間。這種情況的一個(gè)重要關(guān)鍵是網(wǎng)站的內(nèi)容。

如果可能的話,盡量在設(shè)計(jì)后期與內(nèi)容和營(yíng)銷團(tuán)隊(duì)緊密合作,多注意內(nèi)容的結(jié)構(gòu)和劃分,防止在這個(gè)問(wèn)題上出現(xiàn)最終影響網(wǎng)頁(yè)設(shè)計(jì)的意外。

即便如此,從設(shè)計(jì)開始到設(shè)計(jì)后期甚至整個(gè)頁(yè)面上線時(shí),網(wǎng)頁(yè)的內(nèi)容可能都在不斷變化。標(biāo)題越來(lái)越長(zhǎng),圖片變了,塊變了,等等。

“如果可能的話,盡量將真實(shí)的內(nèi)容應(yīng)用到你的設(shè)計(jì)中?!?

移動(dòng)端的時(shí)代要如何重塑網(wǎng)頁(yè)設(shè)計(jì)流程介紹

一個(gè)真正設(shè)計(jì)良好的系統(tǒng)應(yīng)該是靈活的。因此,如果將營(yíng)銷和內(nèi)容團(tuán)隊(duì)提供的Word 文檔轉(zhuǎn)換為實(shí)體頁(yè)面是真的,這樣的事情應(yīng)該不會(huì)讓您頭疼。

雖然

然有些細(xì)節(jié)的處置上確切須要多加注意,但是我的經(jīng)驗(yàn)告知我,其實(shí)并不要想龐雜了,也不要想多了。絕大多數(shù)時(shí)候,一個(gè)緊湊而聰慧的設(shè)計(jì)作風(fēng)指南(Style Guide)能讓所有的事情水到渠成。?
  測(cè)試和實(shí)現(xiàn)
  進(jìn)行原型設(shè)計(jì)確切很不錯(cuò),但是原型設(shè)計(jì)的問(wèn)題也在于,它還是一種“閉門造車”的設(shè)計(jì),并沒(méi)有在真正的用戶那里得到驗(yàn)證。?
  在真實(shí)的裝備上同用戶分享設(shè)計(jì),借此可以獲得最好的設(shè)計(jì)反饋。即使你僅僅只是畫了線框圖,也能在真實(shí)的裝備上同用戶進(jìn)行測(cè)試溝通。?
  測(cè)試響應(yīng)式網(wǎng)站建設(shè)的設(shè)計(jì),應(yīng)當(dāng)是一個(gè)寬泛而多樣的進(jìn)程。找臺(tái)智能手機(jī),把你的設(shè)計(jì)稿放進(jìn)去,問(wèn)問(wèn)不做設(shè)計(jì)的同事和朋友,讓他們看看這樣的設(shè)計(jì)是否可行。接下來(lái)再換上iPad和桌面端裝備,一步一步來(lái)。?
  全新的世界?
  從一個(gè)全新的角度來(lái)對(duì)待龐雜的問(wèn)題,我們所要面臨的一切似乎都是新的。晉升團(tuán)隊(duì)成員的合作緊密度,隱約團(tuán)隊(duì)界線可以讓全部設(shè)計(jì)進(jìn)程都快起來(lái)。我們的設(shè)計(jì)應(yīng)當(dāng)不斷適應(yīng)新的需求和新的狀態(tài),因?yàn)槲覀兊膬?nèi)容、業(yè)務(wù)和這個(gè)世界的變更更快。?
?

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!

本文章出于推來(lái)客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/web/10813.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部