• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 網(wǎng)站設(shè)計(jì)制作前的準(zhǔn)備-線性框架設(shè)計(jì)

網(wǎng)站設(shè)計(jì)制作前的準(zhǔn)備-線性框架設(shè)計(jì)

奈薇網(wǎng)站建設(shè) 于2020-07-19 11:14發(fā)表 閱讀次數(shù) 2246次

青島網(wǎng)站制作前，往往需要對(duì)網(wǎng)頁(yè)先進(jìn)性構(gòu)架和原型制作，但這其中有很多大家往往容易忽略掉的要素，如果能注意并且解決這些問(wèn)題，網(wǎng)站交互設(shè)計(jì)可以表現(xiàn)出更好的效果。 　　下圖所展示的是一個(gè)很典型的例子，我們通常會(huì)將這種風(fēng)格的線框稿交付給相關(guān)同事來(lái)跟進(jìn)視覺(jué)設(shè)計(jì)或原型測(cè)試的工作。 　　這種線框稿確實(shí)能比較清晰的描述出頁(yè)面元素的布局方式，但也僅此而已。它所缺少的是與其他設(shè)計(jì)師、開(kāi)發(fā)人員以及被測(cè)用戶之間的溝通能力。接下來(lái)，我們將一起看一看有哪些方法可以幫助我們提升線框原型在這方面的表現(xiàn)。 　　1.通過(guò)明暗對(duì)比來(lái)描述模塊之間的視覺(jué)優(yōu)先級(jí)哪些內(nèi)容是需要用戶在頁(yè)面上最先注意到的？他們的視線應(yīng)該聚焦到什么位置？我們希望用戶執(zhí)行什么操作？這些問(wèn)題不能簡(jiǎn)單的丟給視覺(jué)設(shè)計(jì)師來(lái)考慮，而上圖所示的線框原型顯然無(wú)法幫助交互設(shè)計(jì)師傳達(dá)這方面的信息。 　　首先，根據(jù)產(chǎn)品需求及用研方面的實(shí)際情況，作為產(chǎn)品人員或交互設(shè)計(jì)師，我們自身應(yīng)該對(duì)以上這些方面的信息了如指掌；在此基礎(chǔ)上，為最原始的線框稿添加視覺(jué)優(yōu)先級(jí)。具體實(shí)施起來(lái)其實(shí)很簡(jiǎn)單，將所有的深色“線框”移除掉，使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣，并籍此表達(dá)不同元素之間的視覺(jué)優(yōu)先級(jí)。相比于之前純粹線框風(fēng)格的設(shè)計(jì)稿，我們可以在下圖中明顯的感受到元素與模塊之間的優(yōu)先級(jí)關(guān)系，例如酒店信息推薦及右側(cè)預(yù)定表單當(dāng)中的操作按鈕都可以在很短的時(shí)間內(nèi)抓住我們的目光。 　　這種方式并不意味著交互設(shè)計(jì)師正在扮演著視覺(jué)設(shè)計(jì)師的角色，我們并不是在表達(dá)“這個(gè)元素的背景色要比另外一個(gè)元素的更深一些”，這些明暗關(guān)系所要體現(xiàn)的只是哪些元素需要突出，哪些元素要相對(duì)弱化；而最終的視覺(jué)表現(xiàn)形式仍然應(yīng)該由視覺(jué)設(shè)計(jì)師來(lái)掌控。 　　2.確保細(xì)節(jié)的準(zhǔn)確無(wú)誤將真實(shí)數(shù)據(jù)作為范例內(nèi)容填充到原型當(dāng)中后，我們要確保交互流程所涉及的信息的準(zhǔn)確性。舉個(gè)簡(jiǎn)單的例子，如果購(gòu)物車的頁(yè)面原型當(dāng)中展示了兩個(gè)單價(jià)為50元的商品，那么在結(jié)算環(huán)節(jié)中，總價(jià)應(yīng)該是100元，而不是隨便其他什么數(shù)字。錯(cuò)誤的信息會(huì)阻礙溝通的有效進(jìn)行，開(kāi)發(fā)人員有可能在這里產(chǎn)生質(zhì)疑，被測(cè)用戶也會(huì)感到莫名其妙。 　　作為設(shè)計(jì)人員，長(zhǎng)時(shí)間的將注意力放在原型的制作上面，很容易忽視掉這類問(wèn)題的存在。如果有條件的話，可以在適當(dāng)?shù)臅r(shí)候請(qǐng)其他人來(lái)幫忙檢查一下你的原型當(dāng)中是否存在這類細(xì)節(jié)當(dāng)中的錯(cuò)誤。 　　3.增加范例圖片的自我描述能力圖片對(duì)于用戶體驗(yàn)的提升起著重要的作用，當(dāng)人們?cè)诰W(wǎng)站中尋找商品或服務(wù)時(shí)，圖片是引導(dǎo)他們制定決策的關(guān)鍵要素(怎樣通過(guò)設(shè)計(jì)幫助用戶制定決策)。另外，圖片也能幫助用戶對(duì)網(wǎng)站自身的形象和定位產(chǎn)生認(rèn)知。不過(guò)在線框原型中，我們通常只會(huì)使用一些灰色的容器和線條來(lái)表現(xiàn)圖片。 　　當(dāng)然，我并不是要建議在線框原型中使用真正的圖片或照片；我們需要做的是讓代表圖片的線框元素能夠體現(xiàn)出在實(shí)際頁(yè)面當(dāng)中，這個(gè)位置應(yīng)該放置怎樣類型的圖片。在制作線框原型之前，最好與相關(guān)的產(chǎn)品或業(yè)務(wù)人員就這方面的問(wèn)題進(jìn)行溝通，根據(jù)產(chǎn)品自身的特質(zhì)及最終面向的用戶群體，來(lái)判斷圖片一類的視覺(jué)元素應(yīng)該具有怎樣的整體風(fēng)格。 　　舉個(gè)例子，我曾經(jīng)幫一家襯衣零售商做網(wǎng)站改版。在著手網(wǎng)站設(shè)計(jì)工作之前，我們首先使用舊版網(wǎng)站進(jìn)行了一次用戶測(cè)試，結(jié)果發(fā)現(xiàn)商品詳情頁(yè)當(dāng)中的演示照片總會(huì)使用戶產(chǎn)生迷惑。為了使襯衣更好看，他們?cè)谂恼盏臅r(shí)候刻意搭配上了領(lǐng)帶與袖扣，這使得用戶認(rèn)為每件襯衫都是包含領(lǐng)帶與袖扣的套裝。所以當(dāng)我進(jìn)行線框原型設(shè)計(jì)的時(shí)候，特意在商品照片的位置畫了一張不包含領(lǐng)帶與袖扣的襯衣草圖，以確保視覺(jué)設(shè)計(jì)師及后續(xù)環(huán)節(jié)的人員能夠理解，并避免在新版網(wǎng)站中重復(fù)錯(cuò)誤。 　　我們不必通過(guò)非常精細(xì)的繪畫來(lái)為線框原型中的圖片元素增加描述性，通過(guò)簡(jiǎn)單的草圖來(lái)陳述出用戶希望在這里看到的圖片類型即可。例如，在提供酒店預(yù)定服務(wù)的網(wǎng)站中，用戶通常希望在詳情頁(yè)里看到怎樣的圖片？房間？衛(wèi)生間？景觀？這些問(wèn)題都是值得花時(shí)間了解清楚并在線框原型中加以體現(xiàn)的。 　　4.使用色彩時(shí)保持謹(jǐn)慎在線框原型中，彩色通常被用于注釋。在必要的時(shí)候，我們也可以用特殊的顏色對(duì)那些特別需要用戶注意的界面元素進(jìn)行標(biāo)注，或是用來(lái)表達(dá)出錯(cuò)信息一類的狀態(tài)類內(nèi)容。不過(guò)要記得，在進(jìn)行原型測(cè)試的時(shí)候不要使用帶有色彩注釋的版本，原因是顯而易見(jiàn)的，我們不希望被測(cè)用戶被這些“突出”的元素引導(dǎo)或干擾。 　　5.使用真實(shí)的數(shù)據(jù)內(nèi)容對(duì)于線框原型當(dāng)中的范例內(nèi)容，包括導(dǎo)航元素的標(biāo)題、表單標(biāo)簽、介紹文案、圖標(biāo)等等，我們都應(yīng)該盡量使用最貼近生產(chǎn)環(huán)境的真實(shí)數(shù)據(jù)。這種方式可以更有效的幫助我們規(guī)劃界面元素的布局，并針對(duì)實(shí)際環(huán)境中有可能產(chǎn)生的極端數(shù)據(jù)情況制定預(yù)防性的方案，確保頁(yè)面結(jié)構(gòu)的堅(jiān)固性。 　　更重要的是，使用真實(shí)數(shù)據(jù)作為范例內(nèi)容的線框原型可以在接下來(lái)的可用性測(cè)試當(dāng)中更具表現(xiàn)力和說(shuō)服力，被測(cè)用戶不需要依靠主持人的描述或自己的猜測(cè)就可以在原型當(dāng)中獲取到比較準(zhǔn)確的信息。另外，真實(shí)數(shù)據(jù)也可以創(chuàng)造出一種更貼近實(shí)際產(chǎn)品的使用氛圍，這可以使被測(cè)用戶更加投入。對(duì)于測(cè)試人員來(lái)說(shuō)(主持人、觀察員)，我們可以設(shè)計(jì)出更具有針對(duì)性的任務(wù)或問(wèn)題，可以在測(cè)試過(guò)程中對(duì)被測(cè)用戶進(jìn)行更加深入的觀察；相應(yīng)的，最終收集到的反饋信息也會(huì)更加真實(shí)有效。 　　仍以酒店的范例原型為例，諸如“你能找到這個(gè)酒店的特色服務(wù)信息嗎？”這樣的問(wèn)題是欠妥的，因?yàn)檫@就相當(dāng)于告訴被測(cè)用戶，在頁(yè)面當(dāng)中的某個(gè)地方存在著這樣的信息，他們接下來(lái)就只會(huì)根據(jù)這條線索去尋找。多數(shù)情況下必然能夠找到，但這樣的反饋對(duì)于我們是沒(méi)有意義的。 　　如果在測(cè)試當(dāng)中使用由真實(shí)數(shù)據(jù)構(gòu)建起來(lái)的原型，那么情況就會(huì)好很多，我們可以問(wèn)被測(cè)用戶“你對(duì)這家酒店的感覺(jué)如何？”，這會(huì)使我們獲取有效反饋的機(jī)會(huì)大大的增加。用戶會(huì)根據(jù)這樣的問(wèn)題進(jìn)行更加自主的信息瀏覽行為，他們有可能會(huì)回答“這個(gè)酒店看上去不錯(cuò)，不過(guò)他們提供家庭泳池，我真的不大喜歡小孩在酒店當(dāng)中跑來(lái)跑去。” 　　通過(guò)這類反饋，我們可以了解到用戶不僅注意到了頁(yè)面當(dāng)中的重要元素，而且他們對(duì)其中的具體內(nèi)容也做出了真實(shí)的思考。可以說(shuō)，通過(guò)一套無(wú)真實(shí)數(shù)據(jù)內(nèi)容的線框原型，我們能夠測(cè)試產(chǎn)品的可用性，而使用了真實(shí)數(shù)據(jù)作為范例內(nèi)容線框原型則可以更加全面的幫助我們測(cè)驗(yàn)產(chǎn)品的用戶體驗(yàn)。要了解更多原型測(cè)試方面的實(shí)戰(zhàn)方法，可以參考我們之前的文章“產(chǎn)品早期的原型設(shè)計(jì)與用戶測(cè)試”。 　　6.以實(shí)際像素為單位如果你使用HTML配合樣式代碼來(lái)制作原型(使用前端開(kāi)發(fā)框架快速創(chuàng)建頁(yè)面原型)，那么這個(gè)問(wèn)題基本不存在，因?yàn)槟阃ǔＰ枰韵袼貫閱挝粸槿萜髟O(shè)置寬度或高度屬性。不過(guò)在多數(shù)時(shí)候，我們創(chuàng)建的是純粹的線框圖。以實(shí)際像素為單位對(duì)頁(yè)面布局及元素尺寸進(jìn)行一定程度的規(guī)劃和說(shuō)明，這將幫助我們自己以及視覺(jué)設(shè)計(jì)師在接下來(lái)的工作當(dāng)中省掉很多“猜測(cè)”與“估算”的過(guò)程。我曾經(jīng)習(xí)慣于使用Powerpoint來(lái)制作線框原型，這種方式只能展示元素之間大致的尺寸和位置關(guān)系；當(dāng)項(xiàng)目進(jìn)入視覺(jué)設(shè)計(jì)流程，它無(wú)法有效的幫助我與設(shè)計(jì)師進(jìn)行溝通，造成了不少的麻煩。 　　7.保持跟進(jìn)這一點(diǎn)更加偏向于交付流程，而非設(shè)計(jì)技巧。完成線框原型后，我們不能只是簡(jiǎn)單的把它扔給跟進(jìn)后續(xù)工作的同事。花些時(shí)間去支援視覺(jué)設(shè)計(jì)師或開(kāi)發(fā)人員的工作，只有他們才能將你的設(shè)計(jì)概念最終落實(shí)到實(shí)際當(dāng)中。通常，交互原型當(dāng)中所包含的想法、操作邏輯等方面的信息難以即全面又準(zhǔn)確的被大家理解，而且其中隱含的問(wèn)題有可能在后續(xù)階段才能體現(xiàn)出來(lái)。我們有必要在交付原型之后保持跟進(jìn)，與大家協(xié)同作戰(zhàn)。 　　8.創(chuàng)建變更日志隨著迭代的不斷進(jìn)行，每一版線框原型當(dāng)中的變更通常會(huì)越來(lái)越細(xì)化，從頁(yè)面結(jié)構(gòu)到模塊、控件，這會(huì)使跟進(jìn)后續(xù)工作的設(shè)計(jì)師或開(kāi)發(fā)人員越來(lái)越難以發(fā)現(xiàn)所有的變化。作為交互設(shè)計(jì)師，我們有責(zé)任創(chuàng)建一份變更日志，并隨著項(xiàng)目的發(fā)展對(duì)其進(jìn)行持續(xù)的更新。日志中的每一條記錄都要包含日期、版本號(hào)、執(zhí)行者以及變更說(shuō)明。這種信息交流的方式不需要花費(fèi)太多的時(shí)間，但結(jié)果卻是事半功倍的，無(wú)論產(chǎn)品人員還是設(shè)計(jì)師、開(kāi)發(fā)者，大家都可以籍此來(lái)一目了然的跟蹤原型的版本變化。 　　9.確保交互元素明確易懂青島網(wǎng)站設(shè)計(jì)交互元素的呈現(xiàn)方式應(yīng)該符合它的用途，例如按鈕看上去應(yīng)該可以被點(diǎn)擊。這些細(xì)節(jié)當(dāng)中的視覺(jué)表現(xiàn)形式的正確與否，會(huì)直接影響視覺(jué)設(shè)計(jì)師及開(kāi)發(fā)人員對(duì)原型的理解；不具備自解釋性的交互元素所帶來(lái)的潛在體驗(yàn)問(wèn)題也會(huì)暴露在可用性測(cè)試當(dāng)中。 　　10.避免深色線框滿頁(yè)面的深色線框會(huì)使你的原型看上去缺乏層次、粗糙凌亂。正像我們?cè)诘谝稽c(diǎn)當(dāng)中所說(shuō)的，試著使用不同明度的灰色作為背景色來(lái)界定頁(yè)面和模塊的邊緣。這樣不僅能表現(xiàn)出界面元素的視覺(jué)優(yōu)先級(jí)，而且可以使整個(gè)原型看上去更加整潔。如果必須在某些地方使用線條，那么盡量使用纖細(xì)的灰色實(shí)線或點(diǎn)狀線。我們固然不需要讓線框原型看上去像視覺(jué)稿一樣完美，但對(duì)這些細(xì)節(jié)的把握確實(shí)可以讓它更加簡(jiǎn)潔精美；在實(shí)際工作中，這往往可以提升原型被接納的程度。 　　網(wǎng)站建設(shè)前的設(shè)計(jì)原型，也是最終網(wǎng)站的框架，對(duì)網(wǎng)站構(gòu)架和布局起著決定性作用，也是傳達(dá)設(shè)計(jì)師設(shè)計(jì)思路的載體，好的網(wǎng)站設(shè)計(jì)原型能夠讓客戶更容易的跟進(jìn)網(wǎng)站制作過(guò)程。

網(wǎng)站設(shè)計(jì)制作前的準(zhǔn)備-線性框架設(shè)計(jì)相關(guān)標(biāo)簽：網(wǎng)站設(shè)計(jì)公司，網(wǎng)站建設(shè)，網(wǎng)站規(guī)劃，網(wǎng)頁(yè)設(shè)計(jì)

相關(guān)熱點(diǎn)推薦

人機(jī)交互界面設(shè)計(jì)的三個(gè) 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺(jué)元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對(duì) 手機(jī)建站時(shí)容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺(jué)識(shí)別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁(yè)不到首頁(yè) 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁(yè)改版 web設(shè)計(jì)師可以走得更 專業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識(shí) 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計(jì)的8項(xiàng)黃金法則 設(shè)計(jì)良好網(wǎng)頁(yè)的4項(xiàng)原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談 網(wǎng)頁(yè)設(shè)計(jì)：如何確定網(wǎng)站 微信營(yíng)銷推廣的特性-奈 什么是自助建站？

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門戶