UI設(shè)計(jì)如何制作你的第一個(gè)線框

　　線框是UI設(shè)計(jì)師，用戶(hù)，利益相關(guān)者和開(kāi)發(fā)人員之間的通用語(yǔ)言。本文AAA教育的武老師對(duì)如何制作你的線框進(jìn)行了詳細(xì)的分解。

　
    　線框中不包括的內(nèi)容
 

　　好的線框的關(guān)鍵是簡(jiǎn)單，以及線性圖標(biāo)。需要做的只是顯示元素在頁(yè)面上的布局以及網(wǎng)站導(dǎo)航的工作方式?？梢陨院筇砑泳赖?a href="http://lb577.com/ui/2547.html" target="_blank">圖像和華麗的字體。盡量減少干擾。
 

　　請(qǐng)牢記以下準(zhǔn)則：
 

　　保持顏色為灰度：白色，黑色和中間的灰色。
 

　　最多使用兩種通用字體，也許是一種襯線字體和一種無(wú)襯線字體。通過(guò)更改字體大小以及是否設(shè)置樣式(粗體，斜體等)，仍可以通過(guò)字體顯示信息的層次結(jié)構(gòu)。
 

　　避免出現(xiàn)浮華的圖形和圖像。相反，請(qǐng)嘗試使用簡(jiǎn)單的矩形和正方形作為占位符，并在框的中間添加一個(gè)“ x”，以顯示圖像的放置位置。專(zhuān)家提示：您也可以通過(guò)在框中心使用三角形作為播放按鈕來(lái)對(duì)視頻執(zhí)行相同的操作。
 

　　從線框走向成品
 

　　從草圖開(kāi)始并向前發(fā)展，在產(chǎn)品設(shè)計(jì)過(guò)程的開(kāi)始和結(jié)束之間通常會(huì)有許多步驟。讓我們看一下您可能遇到的其他一些術(shù)語(yǔ)：
 

　　我們已經(jīng)討論過(guò)線框。它們充當(dāng)數(shù)字產(chǎn)品的骨架。他們?yōu)槟峁┝瞬季趾蜆?gòu)造的總體思路。除了設(shè)計(jì)的骨架之外，內(nèi)容和復(fù)制品是產(chǎn)品的肌肉。力爭(zhēng)在過(guò)程的早期就擁有內(nèi)容。Lorem ipsum永遠(yuǎn)不會(huì)使您的設(shè)計(jì)正義。
 

　　放置實(shí)際內(nèi)容以確保一切按您的方式進(jìn)行將很有幫助。
 

　　該過(guò)程的下一步是高保真模型。樣機(jī)是您產(chǎn)品的更直觀表示。考慮一下諸如皮膚或面部特征的模型。這是您通過(guò)測(cè)試變化來(lái)確定外觀并開(kāi)始賦予產(chǎn)品某些特征的部分。
 

　　將設(shè)計(jì)交給開(kāi)發(fā)人員的最后一步是原型。制作原型就像打扮您的模型并使之適合公眾。它不是最終版本，但可以向其他人展示。在這一點(diǎn)上，您需要做的只是在將模型發(fā)送到生產(chǎn)之前進(jìn)行細(xì)微調(diào)整。
 

　　請(qǐng)記住，線框只是邁向原型的第一步或第二步。由于原型是產(chǎn)品中功能最強(qiáng)大的草案，因此線框可以幫助您集中內(nèi)容的放置并為功能正常的原型設(shè)置路線。
 

　　在設(shè)計(jì)過(guò)程中使用線框
 

　　不同的UX設(shè)計(jì)人員以不同的方式處理線框圖。有些人喜歡從手工繪制開(kāi)始，而另一些人喜歡使用在技術(shù)上更偏愛(ài)的應(yīng)用程序或工具。通常情況下，手動(dòng)或在計(jì)算機(jī)上進(jìn)行線框的決定以及從草圖和線框到代碼的獲取過(guò)程，更多地取決于特定情況所需的方法，而不是設(shè)計(jì)人員的偏好。

　　用戶(hù)期望在頁(yè)面的某些區(qū)域看到什么?
 

　　線框應(yīng)該是站點(diǎn)框架以及如何導(dǎo)航的直觀指南。在此階段，外觀和視覺(jué)吸引力不是因素。線框的主要問(wèn)題應(yīng)該是以這種服務(wù)的用戶(hù)熟悉的直觀自然的方式來(lái)呈現(xiàn)您的內(nèi)容。
 

　　UI設(shè)計(jì)師的任務(wù)是使用戶(hù)更容易實(shí)現(xiàn)他們的目標(biāo)(或者使他們達(dá)到轉(zhuǎn)化點(diǎn)或遵循號(hào)召性用語(yǔ))。通過(guò)以這種方式顯示您的信息，設(shè)計(jì)師使產(chǎn)品的業(yè)務(wù)目標(biāo)與用戶(hù)需求保持一致。全部通過(guò)布置一些線條和花樣。很酷吧。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~