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

編輯導(dǎo)語(yǔ)：我們常輕忽身邊習(xí)以為常的事物，覺得沒有必要為一些看似簡(jiǎn)單又可有可無的東西浪費(fèi)時(shí)間——例如線框圖。雖然沒必要凡事都尋根問底，但當(dāng)面對(duì)復(fù)雜問題時(shí)，腳踏實(shí)地回歸基本面也許才是根本解法。本文深入介紹程序開發(fā)界面設(shè)計(jì)中，最簡(jiǎn)單也最容易被輕忽的線框圖設(shè)計(jì)。

接下來用以下幾個(gè)點(diǎn)進(jìn)行說明：

1. 什么是線框圖？
2. 常見誤區(qū)
3. 為什么要畫線框圖？
4. 怎樣畫線框圖？
5. 組織團(tuán)隊(duì)一起畫線框圖

CB Insights 做過一份調(diào)研報(bào)告《創(chuàng)業(yè)公司失敗的20大原因》，里面說17%的創(chuàng)業(yè)公司認(rèn)為他們失敗的原因在于用戶體驗(yàn)不夠友好。

畢竟設(shè)計(jì)出一個(gè)對(duì)用戶友好的界面并不是一件容易事，特別是對(duì)于多維度、關(guān)系交錯(cuò)和要素眾多的復(fù)雜產(chǎn)品來說。

要設(shè)計(jì)這類產(chǎn)品時(shí)，我們應(yīng)該自上而下，從頂層理念到具體細(xì)節(jié)的方法，而線框圖是最好的工具。

一、什么是線框圖？

線框圖（Wireframe）：它是展示W(wǎng)eb或者App框架的視覺指南。

繪制線框圖的過程中，我們需要考慮用戶需求和使用流程，并在相應(yīng)的頁(yè)面上布置需要的內(nèi)容和功能。

軟件開發(fā)的初期階段，產(chǎn)品在進(jìn)入視覺設(shè)計(jì)和內(nèi)容填充階段之前，我們可以用線框圖來搭建頁(yè)面的基本框架和結(jié)構(gòu)。

乍一看很簡(jiǎn)單，比較線框圖已是日常工作的基本環(huán)節(jié)，交互設(shè)計(jì)師也不少見。但這就是本文開頭提到的問題，我們往往對(duì)看似簡(jiǎn)單的事情缺乏重視。

線框圖的最大意義，是幫我們定義產(chǎn)品或者服務(wù)的目標(biāo)。

可以說，線框圖設(shè)計(jì)的主要目的，就是向團(tuán)隊(duì)、領(lǐng)導(dǎo)、合作伙伴展示App等應(yīng)用程序?qū)碛心男╉?yè)面和組件，以及這些元素將如何相互作用。

從這個(gè)層面來說，我們可以知道線框圖對(duì)于開發(fā)過程和最終產(chǎn)品呈現(xiàn)的影響有多大。

二、線框圖的常見誤區(qū)

• 為了完成任務(wù)而畫線框圖
• 直接跳過線框圖階段
• 做完了視覺再開始準(zhǔn)備線框圖
• 不理解為什么要用線框圖

線框圖應(yīng)該先于視覺設(shè)計(jì)階段，而不是反過來。否則就像在敲完代碼以后，再?zèng)Q定選擇你App的技術(shù)棧一樣。

好的線框圖是設(shè)計(jì)質(zhì)量的保證。我們?cè)搅私馄涫褂媚康模找嬉簿驮酱?。因此我們才需要更深入探討使用線框圖的原因及其價(jià)值所在。

在現(xiàn)實(shí)中，一些缺少產(chǎn)品設(shè)計(jì)知識(shí)的公司可能會(huì)直接跳過線框圖階段，雖然這可以削減成本，但也會(huì)產(chǎn)生風(fēng)險(xiǎn)。

遇到這種情況，設(shè)計(jì)師可以嘗試主動(dòng)解釋為什么要畫線框圖、它對(duì)我們的產(chǎn)品有什么好處、怎樣節(jié)省開發(fā)成本？

三、為什么要畫線框圖？

1. 幫助團(tuán)隊(duì)確認(rèn)工作內(nèi)容

線框圖允許設(shè)計(jì)師用可視化的方式快速創(chuàng)建產(chǎn)品原型，并向團(tuán)隊(duì)展示哪里需要修訂，界面有哪些，上面有什么元素和控件，它們是怎么交互的。

同時(shí)，瀏覽可視化的線框圖要比閱讀說明書快得多，也能減少預(yù)期和最終成品之間的差異。

2. 讓所有團(tuán)隊(duì)成員都能參與產(chǎn)品設(shè)計(jì)

我們肯定遇到過這樣的情況，做出了一流的設(shè)計(jì)卻苦于開發(fā)實(shí)現(xiàn)的限制。使用線框圖能讓我們拉上開發(fā)人員在早期階段一起討論設(shè)計(jì)，使他們能夠在你進(jìn)行視覺設(shè)計(jì)之前提供反饋和建議，這樣能夠加快設(shè)計(jì)流程從而避免浪費(fèi)時(shí)間和金錢。

3. 為客戶提供原型

從客戶和上級(jí)領(lǐng)導(dǎo)那里得到快速反饋是設(shè)計(jì)中一個(gè)重要的部分。我們都經(jīng)歷過來自他們的改稿要求，這是正常的。有了線框圖，我們可以讓這個(gè)過程更有效率，而不是在開發(fā)原型上消耗更多的時(shí)間精力，同時(shí)它也能讓設(shè)計(jì)師不會(huì)在改稿上浪費(fèi)額外的時(shí)間。

4. 能執(zhí)行用戶測(cè)試

《精益創(chuàng)業(yè)》（Lean Startup）的作者Eric Ries曾說過，越早進(jìn)行用戶測(cè)試越好——沒有人希望在推出一個(gè)應(yīng)用程序以后才發(fā)現(xiàn)用戶不知道如何使用它。線框圖能幫助設(shè)計(jì)師從潛在用戶那獲得有價(jià)值的反饋，而不用花時(shí)間去開發(fā)復(fù)雜的可交互原型。

但UI/UX設(shè)計(jì)師們使用線框圖并不意味著用得對(duì)用得好。

因此下面提供一些實(shí)踐中的最佳做法以供參考。

四、怎樣畫線框圖？

為了發(fā)揮最大效益，為后續(xù)工作流程提供基礎(chǔ)，使用線框圖應(yīng)該遵循以下幾個(gè)簡(jiǎn)單原則:

1. 減少顏色的使用

如果你在線框圖中使用了豐富的配色，你應(yīng)該提醒自己線框圖的目標(biāo)是什么（展示產(chǎn)品包含什么元素，以及他們?nèi)绾蜗嗷プ饔茫?，并思考多余的顏色是否有助于?shí)現(xiàn)這個(gè)目標(biāo)。

在某些情況下，配色確實(shí)會(huì)起作用。但一般線框圖里的顏色可能會(huì)分散讀者的注意力，使得后續(xù)調(diào)整變得更困難。

此外，并非所有客戶對(duì)于用戶體驗(yàn)工具都有所認(rèn)識(shí)，這時(shí)候也可能需要使用彩色的線框圖。

除了黑白兩色，你也可以使用其他的顏色。有時(shí)候使用顏色突出顯示特定的組件是合理的，例如可以用紅色表示錯(cuò)誤狀態(tài)，用藍(lán)色表示注釋等。

2. 使用簡(jiǎn)單的組件設(shè)計(jì)

當(dāng)你在線框圖上添加組件時(shí)，選擇基礎(chǔ)的設(shè)計(jì)即可，不需要放置過于詳細(xì)的組件。這些組件對(duì)團(tuán)隊(duì)來說，應(yīng)該是易識(shí)別的、一目了然的?；ㄙM(fèi)大量時(shí)間和精力去設(shè)計(jì)詳細(xì)的線框圖組件不一定有用。

3. 保持一致性

相似的組件在所有線框圖上看起來應(yīng)該是相同且一致的。如果相同的組件看起來不一樣，開發(fā)人員會(huì)質(zhì)疑其是否一致，影響他們的判斷，甚至要為不同的設(shè)計(jì)增加額外的開發(fā)成本。在制作線框圖的時(shí)候，請(qǐng)記?。罕３忠恢拢瑴p少混亂。

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

我們有時(shí)候會(huì)看到UI/UX設(shè)計(jì)師不在線框圖上添加真實(shí)內(nèi)容，而是使用“l(fā)oremipsum”一類的無意義文字。很少有設(shè)計(jì)師意識(shí)到這是不對(duì)的。你可能會(huì)說，內(nèi)容在設(shè)計(jì)階段反正不可用。確實(shí)，我們建議你使用內(nèi)容草稿就可以了。

在真實(shí)情境中，內(nèi)容會(huì)影響你的設(shè)計(jì)，使用草稿則能幫你做出更好的設(shè)計(jì)。如果你用的是無意義文字，界面就可能會(huì)喪失與真實(shí)環(huán)境的一致性和整體性，后續(xù)可能需要對(duì)用戶界面進(jìn)行大量調(diào)整，甚至是創(chuàng)造一個(gè)無法落地的設(shè)計(jì)并推倒重做。總之，真實(shí)的內(nèi)容可以為線框圖提升價(jià)值，串聯(lián)上下文，提供更有說服力的解釋。

5. 使用注釋

有時(shí)候可能會(huì)出現(xiàn)一些設(shè)計(jì)方案無法用視覺來說明的情況，因此上級(jí)、客戶或開發(fā)人員可能會(huì)對(duì)它們產(chǎn)生疑問。例如，某些控件背后的邏輯是什么。在這種情況下，你可以提供一定的注釋來解釋其背后的邏輯。一來團(tuán)隊(duì)能理解，二來你不需要再解釋。

6. 低保真到高保真

沒有嚴(yán)格規(guī)定說你應(yīng)該使用低保真線框圖還是高保真線框圖，這取決于項(xiàng)目本身。

所以在特定情況下，當(dāng)你需要為線框圖添加更多的細(xì)節(jié)時(shí)，不需要糾結(jié)。

但是正如Eric Ries所說，如果這些細(xì)節(jié)不能帶來價(jià)值，你就不要做多余的“無用功”。先從基礎(chǔ)開始做起，再根據(jù)需要不斷完善和添加細(xì)節(jié)。

例如：當(dāng)你需要開發(fā)者關(guān)注到一些個(gè)性化的解決方案上來時(shí)，可以添加更多的細(xì)節(jié)，并在線框圖中說明清楚。

7. 將線框圖擴(kuò)展到原型

作為設(shè)計(jì)師，我們需要和不同的產(chǎn)品打交道，有些產(chǎn)品交互簡(jiǎn)單而普通，有些則相當(dāng)復(fù)雜。有時(shí)候線框圖不足以說明其復(fù)雜性和典型性，你就可以將線框圖升級(jí)擴(kuò)展為可交互原型，而不是寫冗長(zhǎng)的筆記并花費(fèi)大量時(shí)間來解釋它。

現(xiàn)在市面上我們有一系列簡(jiǎn)單而強(qiáng)大的工具，比如Figma、Invision、AdobeXD、 UXPin、 Axure、Moqups等。只需要進(jìn)行適度的評(píng)估就能選擇最合適的工具來設(shè)計(jì)線框圖，開發(fā)簡(jiǎn)單的原型。

用來做線框圖的工具主要有以下兩個(gè)目的與特性：

1. 簡(jiǎn)易性：門檻低，對(duì)于剛?cè)胄蠻I/UX的新人和缺乏使用復(fù)雜軟件經(jīng)驗(yàn)的人來說，它們?cè)偻昝啦贿^。

2. 協(xié)作性：強(qiáng)調(diào)協(xié)作性的工具一般都包含豐富的團(tuán)隊(duì)協(xié)作功能。協(xié)作是現(xiàn)代軟件開發(fā)的支柱，因此最好的線框圖工具不僅提供大量的功能，還允許參與設(shè)計(jì)過程的所有團(tuán)隊(duì)成員之間能進(jìn)行高效簡(jiǎn)單的協(xié)作以下是繪制線框圖的主流工具：

• Figma：一款基于云協(xié)作的工具，功能強(qiáng)大，支持 Windows 和 macOS 的Web端和桌面端。Figma為構(gòu)建線框圖、原型、UI繪制等提供了許多強(qiáng)大的功能。
• Sketch：在UI/UX設(shè)計(jì)師中使用廣泛，還可安裝插件來實(shí)現(xiàn)多種功能。與競(jìng)品不同，Sketch只能在macOS上使用，還需要用戶依靠第三方來解決協(xié)作的問題。

有很多工具都能用來設(shè)計(jì)線框圖，我們建議你不應(yīng)該只是根據(jù)產(chǎn)品的功能和特性來進(jìn)行選擇。相反，我們建議你多嘗試和探索，并決定哪個(gè)工具才是最適合你的。

為了展示現(xiàn)代設(shè)計(jì)工具的強(qiáng)大力量，這里我將分享個(gè)人的經(jīng)歷來展示我和我的團(tuán)隊(duì)如何使用上述工具來完成一個(gè)完整有效的線框圖設(shè)計(jì)流程。

五、和團(tuán)隊(duì)一起畫線框圖（案例）

我工作的公司正在開發(fā)復(fù)雜的金融科技數(shù)字產(chǎn)品。除了設(shè)計(jì)團(tuán)隊(duì)，還有一個(gè)專業(yè)的業(yè)務(wù)分析師團(tuán)隊(duì)。他們準(zhǔn)備了需求并創(chuàng)建了低保真度的線框圖，然后傳遞給我們的設(shè)計(jì)團(tuán)隊(duì)。

線框圖設(shè)計(jì)中的團(tuán)隊(duì)關(guān)系

1. 選擇工具

我們需要為業(yè)務(wù)需求分析師（BA）和設(shè)計(jì)團(tuán)隊(duì)選擇一個(gè)一體化的工具。由于大多數(shù)商業(yè)分析師的設(shè)計(jì)技能都相當(dāng)?shù)停覀兿Ｍ业揭环N既適用于他們又適用于設(shè)計(jì)師的強(qiáng)大工具。

此外，易于協(xié)作是我們團(tuán)隊(duì)的首要任務(wù)?；谶@些標(biāo)準(zhǔn)，我們選擇了Figma。

2. 創(chuàng)建組件庫(kù)

為了簡(jiǎn)化產(chǎn)品設(shè)計(jì)過程，我們創(chuàng)建了BA團(tuán)隊(duì)可以使用的自定義組件庫(kù)。這使我們能夠加快線框圖的繪制，因?yàn)闃I(yè)務(wù)分析人員可以快速地使用現(xiàn)成的組件，而不是自己繪制。

3. 訓(xùn)練團(tuán)隊(duì)

為了展示如何使用Figma和組件庫(kù)，我們?yōu)锽A團(tuán)隊(duì)辦了一個(gè)小型的工作坊。在工作坊中我們還拓展了一些額外的關(guān)于原型設(shè)計(jì)的知識(shí)。

結(jié)果

在案例中，即使團(tuán)隊(duì)成員分布在烏克蘭、澳大利亞和菲律賓，F(xiàn)igma 也被證明在線框圖和協(xié)作方面是高效的。我們目前使用 Figma 作為溝通渠道的事實(shí)證明，通過郵件或信息在線框圖上進(jìn)行協(xié)作更為方便。

六、總結(jié)

很多設(shè)計(jì)師開始時(shí)不太重視線框圖，無法通過線框圖來為項(xiàng)目提供有效幫助，進(jìn)而導(dǎo)致團(tuán)隊(duì)也感受不到線框圖的意義。希望閱讀完此文的你，無論是否是設(shè)計(jì)師，都能對(duì)線框圖有更多的理解。尤其是在這樣一個(gè)設(shè)計(jì)工具越來越便捷的時(shí)代，希望大家能夠借助線框圖，讓自己產(chǎn)品的用戶體驗(yàn)以及團(tuán)隊(duì)的工作效率更進(jìn)一步。

原文作者：Anton Suprunenko

原文地址：ttps://medium.muz.li/how-to-succeed-in-wireframe-design-2ab3cd5c4bc9

譯者：Jonathan，公眾號(hào)：體驗(yàn)進(jìn)階。

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

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