中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

大多數(shù)情況下，我們傾向于低估自己所熟悉的事物。在本文中，我們將研究設(shè)計中最簡單、因而常常被低估的活動之一，即線框圖的設(shè)計。了解什么是線框圖，為什么需要設(shè)計它們以及如何充分利用線框圖。

一、什么是線框圖？

線框圖，也稱為頁面示意圖或屏幕藍圖，是展示網(wǎng)站或產(chǎn)品框架的視覺指南：

• 設(shè)計：線框圖通常用于在考慮用戶需求的情況下在頁面上布置內(nèi)容和功能。
• 開發(fā)：添加視覺設(shè)計和內(nèi)容之前，在開發(fā)過程早期使用線框來建立頁面的基本結(jié)構(gòu)。

線框圖的主要目標是向團隊和利益相關(guān)者展示產(chǎn)品將包含的頁面和組件，以及這些元素之間的相互作用。

二、為什么需要設(shè)計線框圖？

1. 幫助團隊評估和完善工作范圍

線框圖允許設(shè)計師快速創(chuàng)建產(chǎn)品的視覺表現(xiàn)，方便后期修改；幫助設(shè)計師向團隊展示應(yīng)用程序具有的頁面元素和控件，以及所有元素如何進行交互。

2. 讓團隊所有成員參與產(chǎn)品設(shè)計階段

線框圖的使用允許設(shè)計師和開發(fā)人員在早期階段共同參與討論設(shè)計，在開始進行視覺設(shè)計之前就提供反饋和更改建議，這樣有助于使設(shè)計過程快速迭代，避免不必要的浪費。

3. 方便快速演示

從客戶和利益相關(guān)者那里獲得快速反饋是設(shè)計過程的重要組成部分。設(shè)計過程中，經(jīng)常會遇到需求的來回變化。有了線框圖，可以使這個過程更有效，因為修改原型比修改線框圖需要更多的時間和精力。

4. 進行用戶測試

線框圖可以幫助設(shè)計師從潛在用戶那里獲得有價值的反饋。同時瀏覽線框比讀取規(guī)范要快得多，還有助于減小與預(yù)期效果的差異。

三、線框圖實際應(yīng)用

為了獲得最好的結(jié)果，為下一步的UI打下堅實的基礎(chǔ)，需要遵循幾個簡單的規(guī)則：

1. 顏色的使用

如果在線框圖中使用豐富的配色，可能會分散觀者的注意力，并使更新變得更困難。

但在某些情況下，使用顏色突出顯示特定組件是合理的。例如，可以將紅色用于錯誤狀態(tài)，將藍色用于注釋等。

2. 使用簡單的組件

線框圖并不包含全面設(shè)計和詳細說明的組件。相反它們應(yīng)該設(shè)計的相對簡單，讓團隊成員更容易識別。添加詳細的組件將花費大量的時間和精力，卻不是很實用。

3. 保持一致性

在所有線框圖中，類似的組件必須看起來相同。如果相同的組件看起來不同，開發(fā)人員可能會質(zhì)疑它們的功能是否相同，甚至?xí)驗樵O(shè)計不同而增加估算時間。

在處理線框圖時，記住一個簡單的規(guī)則：保持一致，避免造成混淆。

4. 使用真實內(nèi)容

我們會常看到UI/UX設(shè)計師沒有在線框圖上添加真正的內(nèi)容，而是重復(fù)使用同一些文本，這是很少有設(shè)計師意識到的普遍錯誤。

內(nèi)容真實與否會影響接下來的設(shè)計。如果使用不真實的內(nèi)容，UI設(shè)計中文本的數(shù)量多少和排布方式都要再調(diào)整。真實內(nèi)容能給線框圖增加價值，更好地解釋上下文。

5. 使用注釋

設(shè)計中可能會遇到某些解決方案無法直觀地加以說明的情況，例如某些控件背后的邏輯，因此開發(fā)人員可能會對它們有疑問。

在這種情況下，可以提供注釋來解釋其背后的邏輯。這樣，你的團隊就會理解你的解決方案，你就不需要花時間再討論它們。

6. 線框圖程度

線框圖應(yīng)該選擇低保真還是高保真，沒有嚴格的規(guī)定，取決于項目的具體要求。

硅谷知名作家埃里克·萊斯認為，如果不能帶來價值就不需要做額外的工作，從基礎(chǔ)做起，然后根據(jù)需要添加細節(jié)。

7. 將線框圖延伸到交互原型中

在使用不同產(chǎn)品時，有一些簡單而通用的交互，也有一些交互相當復(fù)雜。在線框圖不足以說明復(fù)雜性的情況下，可以將線框圖擴展到交互原型中，而不必寫冗長的注釋并花大量時間進行解釋。

總結(jié)

將線框圖結(jié)合到設(shè)計過程中，讓它們?yōu)槲覀児ぷ鳎?/p>

• 幫助團隊獲得更精確的項目估算。
• 讓所有團隊成員參與設(shè)計流程，避免影響開發(fā)過程的錯誤。
• 提前向客戶、利益相關(guān)者進行演示，以盡快獲得反饋，節(jié)省開發(fā)不良解決方案的時間。

原文：https://www.smashingmagazine.com/2020/04/wireframe-design-success/

作者：Anton Suprunenko

譯者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、視覺上的設(shè)計思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議