接上(shàng)篇:如何更好地(dì / de)了(le/liǎo)解線框圖和(hé / huò)原型?(一(yī / yì /yí))
線框視覺多樣性
線框限制了(le/liǎo)多樣性的(de)金額,當談到(dào)有視覺效果。代表不(bù)同層次的(de)視覺效果時(shí),設計師通常使用框、線條和(hé / huò)灰色的(de)配色方案,而(ér)内容,如圖像、視頻、文字等等都保存下一(yī / yì /yí)部分。
線框圖的(de)優點
線框圖是(shì)快速和(hé / huò)廉價的(de)生産,如果你使用的(de)是(shì)鋼絲框架軟件如UXPin。線框應該正确地(dì / de)從你的(de)設計項目開始辦理。一(yī / yì /yí)個(gè)好的(de)方法是(shì)收集一(yī / yì /yí)些關于(yú)線框反饋。
爲(wéi / wèi)什麽呢?
1.它會幫助你更注重功能性,可用性和(hé / huò)用戶交互
2.它也(yě)将幫助你改變任何必要(yào / yāo)的(de)修改,而(ér)無需改變編碼或制作及圖形變化
它是(shì)所有關于(yú)可靠性
設計師可能要(yào / yāo)提高可靠性。怎麽樣?一(yī / yì /yí)個(gè)能夠被點擊線框的(de)伎倆:
1.通過一(yī / yì /yí)定的(de)用戶界面部分給予特别重視;
2.通過快速呈現和(hé / huò)如何檢查實體單元之(zhī)間的(de)相互作用。
這(zhè)樣做的(de)最好方式是(shì)通過創建一(yī / yì /yí)個(gè)線框是(shì)可點擊的(de),也(yě)可以(yǐ)互動。
點擊線框可以(yǐ)創建一(yī / yì /yí)個(gè)良好的(de)第一(yī / yì /yí)印象與客戶端。每當客戶端或其他(tā)任何人(rén)詢問有關特定按鈕的(de)功能,可點擊線框将回答這(zhè)個(gè)問題。
呈現線框要(yào / yāo)注意
這(zhè)是(shì)爲(wéi / wèi)了(le/liǎo)考慮任何設計師很重要(yào / yāo)的(de)一(yī / yì /yí)點。當你出(chū)示線框你的(de)共同的(de)客戶和(hé / huò)非技術性的(de)雇主,他(tā)們可以(yǐ)很容易感到(dào)困惑,因爲(wéi / wèi)線框可能不(bù)是(shì)如何将網站的(de)設計将是(shì)最終的(de)樣子(zǐ)。
應該用什麽方法呢?
1.稍微解釋一(yī / yì /yí)下關于(yú)線框是(shì)什麽以(yǐ)及它的(de)意義在(zài)設計項目
2.請務必将它展示給那些誰可能沒有足夠的(de)知識對線框概念的(de)人(rén)。
之(zhī)所以(yǐ)使用線框的(de)原因
1.節省時(shí)間,從長遠來(lái)看,線框将節省你很多時(shí)間。
2.混亂的(de)克星,它也(yě)将節省與客戶之(zhī)間不(bù)必要(yào / yāo)的(de)混淆。
3.讓你和(hé / huò)你的(de)客戶在(zài)同一(yī / yì /yí)頁面上(shàng),創建一(yī / yì /yí)個(gè)線框将确保在(zài)開始之(zhī)前,你和(hé / huò)你的(de)客戶端在(zài)編碼過程都在(zài)處于(yú)同一(yī / yì /yí)頁上(shàng)。
有可能是(shì)在(zài)與你的(de)客戶線框讨論思想的(de)幾個(gè)交流。但是(shì),它是(shì)一(yī / yì /yí)個(gè)更容易改變,要(yào / yāo)改變整個(gè)網站一(yī / yì /yí)旦被編碼的(de)線框。
創建和(hé / huò)使用線框圖
有幾種方法可以(yǐ)在(zài)其中創建一(yī / yì /yí)個(gè)線框。大(dà)量的(de)網絡資源和(hé / huò)軟件可用,可以(yǐ)幫助你在(zài)做線框。
知更鳥
Photoshop(教程)
煙花
請記住,你隻需要(yào / yāo)獲得有關如何将布局和(hé / huò)内容放在(zài)你的(de)網站的(de)想法。
創建線框的(de)核心目的(de)是(shì)獲得如何的(de)内容、圖像、導航、文本等将被放置在(zài)網頁上(shàng)的(de)視覺計劃。
1.有時(shí)你可以(yǐ)創建兩個(gè)或三個(gè)線框具有不(bù)同的(de)布局和(hé / huò)顯示到(dào)客戶端的(de)導航選項;
2.這(zhè)樣,客戶可以(yǐ)輕松地(dì / de)選擇一(yī / yì /yí)個(gè)來(lái)自它,你就(jiù)可以(yǐ)開始根據項目進行更改;
3.一(yī / yì /yí)旦做出(chū)布局和(hé / huò)導航的(de)過程完成,最終核準的(de)客戶端,你就(jiù)可以(yǐ)開始工作的(de)原型。
什麽是(shì)原型?
原型的(de)最好的(de)定義,我們在(zài)互聯網上(shàng)找到(dào)的(de)是(shì)'這(zhè)是(shì)設計和(hé / huò)建造,以(yǐ)測試新的(de)設計産品。它是(shì)用來(lái)糾正錯誤,使設計更具人(rén)性化'。
原型基本上(shàng)是(shì)用于(yú)那些起源于(yú)機械和(hé / huò)結構工程的(de)概念測試的(de)概念。但随着其使用量不(bù)斷增加,也(yě)有人(rén)開始使用交互式産業的(de)目的(de)也(yě)是(shì)如此。
爲(wéi / wèi)什麽這(zhè)一(yī / yì /yí)點很重要(yào / yāo)
1.客戶可以(yǐ)利用可視化框架幾步進一(yī / yì /yí)步,根據的(de)網頁設計的(de)複雜性;
2.它有助于(yú)在(zài)之(zhī)前進行的(de)發展過程中,或在(zài)開始編碼之(zhī)前,測試網站的(de)不(bù)同功能。
形式的(de)原型
同爲(wéi / wèi)線框,原型有兩種形式;高保真和(hé / huò)低保真度。然而(ér),人(rén)們認爲(wéi / wèi)應采用何種形式和(hé / huò)多少,應該由類似于(yú)原型與最終版本。
兩者都證明,當涉及到(dào)尋找可用性問題是(shì)非常好的(de)。但是(shì),我們必須隻選擇一(yī / yì /yí)個(gè),對不(bù)對?
所以(yǐ),有一(yī / yì /yí)些事情你可以(yǐ)考慮同時(shí)找出(chū)哪一(yī / yì /yí)個(gè)是(shì)你的(de)設計項目的(de)最佳選擇。
低保真原型
1.它是(shì)基于(yú)紙張。他(tā)們可以(yǐ)從手繪原型打印輸出(chū)
2.不(bù)允許用戶交互
3.輕松打造
4.早期視覺設計的(de)預測
5.刺激創新和(hé / huò)改進
6.通過草圖,用戶感覺舒服講述了(le/liǎo)變化
高保真原型
1.基于(yú)計算機的(de)
2.使用鍵盤鼠标的(de)用戶交互
3.顯示用戶界面的(de)最接近的(de)可能的(de)表示
4.考慮更強大(dà)的(de)通過實際的(de)人(rén)類收集的(de)性能數據
5.非常有效地(dì / de)展示産品給客戶
未完待續,米飯工作室翻譯編輯,轉載請注明出(chū)處,原文作者:Taimur Asghar。