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

本文中，invision團(tuán)隊(duì)將手把手教你如何設(shè)計(jì)線框圖，以及線框在產(chǎn)品設(shè)計(jì)過程中的位置，enjoy~

無論你是用戶體驗(yàn)設(shè)計(jì)的新手，還是你已經(jīng)關(guān)注這個(gè)領(lǐng)域多年，你肯定知道線框圖。線框圖是將數(shù)字產(chǎn)品的想法轉(zhuǎn)化為現(xiàn)實(shí)的關(guān)鍵一步。

但線框在產(chǎn)品設(shè)計(jì)過程中的位置如何呢？如果你以前從來沒有做過，你怎么知道該做什么？從哪里做？該采取什么步驟呢？草圖和線框有什么區(qū)別？

幸運(yùn)的是：invision 的團(tuán)隊(duì)對(duì)這一過程進(jìn)行了深入的介紹，我們希望與您分享我們的經(jīng)驗(yàn)。所以拿起一支筆和一張紙 (不僅僅是做筆記哦！)，一起來進(jìn)行頭腦風(fēng)暴吧。

一、開始我們的線框圖

首先，線框是一種低保真布局設(shè)計(jì)，服務(wù)于三個(gè)簡(jiǎn)單的但明確的目的：

1. 它顯示將顯示在頁(yè)面上的信息
2. 它給出了頁(yè)面的結(jié)構(gòu)和布局
3. 它傳達(dá)了用戶界面的總體方向

就像建筑的藍(lán)圖一樣，線框圖清楚而具體地描述了細(xì)節(jié)，同時(shí)給建造者(你本人，其他設(shè)計(jì)師，開發(fā)同學(xué)等等)一個(gè)項(xiàng)目的概述。

線框圖是筆紙的草圖和你的第一個(gè)原型之間的中間地帶。它們可以幫助您規(guī)劃用戶界面的布局和交互模式，而不會(huì)分散用戶的注意力，比如顏色等。建議應(yīng)該是清晰的，不需要顏色、陰影或花哨的菜單。

我最喜歡的查看線框圖的方法之一是使用線框圖Wirify。尤其是當(dāng)你剛剛起步的時(shí)候，可以讓你在一次點(diǎn)擊中把任何網(wǎng)頁(yè)變成線框圖，這對(duì)獲得靈感或指導(dǎo)很有幫助。

線框是快速且高效的, 不過最重要的是, 它不是最終的輸出。線框 (以及您在線框之前繪制的草圖) 目的是在隨著你通過用戶研究或利益相關(guān)者的收集更多信息而方便隨時(shí)作出調(diào)整。

線框是設(shè)計(jì)師、用戶、利益相關(guān)者和開發(fā)人員之間的通用語(yǔ)言。它們足夠復(fù)雜，可以讓每個(gè)人參與進(jìn)來，但很簡(jiǎn)單，不會(huì)被太多細(xì)節(jié)或設(shè)計(jì)語(yǔ)言所困擾。

二、不必包括在線框圖中的內(nèi)容

一個(gè)好的線框的關(guān)鍵是簡(jiǎn)單。

您需要做的就是展示元素在頁(yè)面上的布局方式以及網(wǎng)站導(dǎo)航應(yīng)該如何工作，以后可以添加花哨的圖像和華麗的字體，從而最大限度地減少干擾。

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

1. 保持你的顏色灰度：白色、黑色和灰色之間。
2. 最多使用兩種通用字體：可能是一種 serif 和一種 sans serif。通過字體顯示信息的層次結(jié)構(gòu)仍然可以通過更改字體的大小以及字體是否具有樣式 (粗體、斜體等) 來顯示。
3. 避免華麗的圖形和圖片：相反, 可以使用簡(jiǎn)單的矩形和正方形作為占位符, 并在框的中間顯示圖像的放置位置, 其中包含 “x”， 比如可以通過使用三角形作為播放功能的按鈕。

二、從線框轉(zhuǎn)向成品

從草圖開始并向前邁進(jìn), 在產(chǎn)品設(shè)計(jì)過程的從頭到尾通常有許多步驟。

讓我們來看看你可能會(huì)遇到的幾個(gè)關(guān)鍵詞：

1. 我們已經(jīng)討論過線框了它們是數(shù)字產(chǎn)品的骨架：它們讓您對(duì)布局和結(jié)構(gòu)有了大致的了解。除了設(shè)計(jì)的骨架外，內(nèi)容和副本是產(chǎn)品的肌肉。目標(biāo)是在這個(gè)過程的早期就有內(nèi)容。洛雷姆·伊普蘇姆永遠(yuǎn)不會(huì)公正地對(duì)待你的設(shè)計(jì)。推特徽標(biāo)將實(shí)際內(nèi)容放在適當(dāng)?shù)奈恢檬呛苡袔椭?，以確保一切都按照您想要的方式流動(dòng)。
2. 該過程的下一步是視覺稿原型（mockup）：這個(gè)原型是您的產(chǎn)品更直觀的視覺表現(xiàn)形式。想象一下像皮膚或面部特征一樣的模型，在這個(gè)部分, 你通過多種嘗試來確定你的視覺風(fēng)格，并賦予產(chǎn)品一些品牌個(gè)性。
3. 在將您的設(shè)計(jì)交給開發(fā)人員之前的最后一步是可交互的原型（Prototype）：制作一個(gè)原型就像給你的模型穿上衣服, 讓它適合公眾。這不是最終版本，但也是可以向別人作展示的。這一點(diǎn)，你需要做的就是在你把你的模型送到生產(chǎn)之前做一些小的調(diào)整。

記住，線框圖只是原型的第一步或第二步。

因?yàn)樵蛻?yīng)該是你產(chǎn)品的最實(shí)用的草稿，線框圖可以幫助你關(guān)注內(nèi)容，并為功能原型設(shè)定方向。

三、在設(shè)計(jì)過程中如何使用線框圖

不同的用戶體驗(yàn)設(shè)計(jì)師以不同的方式進(jìn)行線框圖設(shè)計(jì)。

有些人喜歡從手繪草圖開始，而另一些人則喜歡使用更傾向于技術(shù)的應(yīng)用程序或工具。

通常情況下：手工或在計(jì)算機(jī)上進(jìn)行線框圖的決定，以及從草圖到線框圖到代碼的過程，更多地與特定情況需要的方法有關(guān)，而不是設(shè)計(jì)師的偏好。

羅西·阿拉巴頓在CareerFoundry的一個(gè)帖子中建議，你應(yīng)該問自己這些問題才能開始：

1. 與此頁(yè)面交互時(shí)，目標(biāo)用戶和業(yè)務(wù)目標(biāo)是什么?
2. 究竟如何組織內(nèi)容來支持這些目標(biāo)？
3. 您的主要信息和logo應(yīng)該放在哪里？
4. 當(dāng)用戶到達(dá)頁(yè)面時(shí), 應(yīng)該首先看到什么？
5. 行為召喚在哪里？
6. 用戶希望在頁(yè)面的某些區(qū)域看到什么？

您的線框應(yīng)該是網(wǎng)站框架以及如何導(dǎo)航的可視化指南。

在現(xiàn)階段，外表和視覺吸引力并不是關(guān)鍵，你對(duì)線框的主要關(guān)注應(yīng)該是以直觀和自然的方式呈現(xiàn)你的內(nèi)容。

您的任務(wù)是讓你的用戶更容易實(shí)現(xiàn)他們的目標(biāo)(或者讓他們達(dá)到你的轉(zhuǎn)換點(diǎn)或響應(yīng)你的行動(dòng)號(hào)召)，通過以這種方式呈現(xiàn)你的信息，使產(chǎn)品的業(yè)務(wù)目標(biāo)與用戶的需求保持一致。

通過畫看似簡(jiǎn)單的顯現(xiàn)框框，很酷！不是嗎?

我們非常喜歡用徒手畫線框圖。手繪是一種工具，它可以幫助你完成從線框圖到創(chuàng)造性探索，展示到協(xié)作。試一試，讓大家知道你的想法吧！

作者：Will Fanguy

原文鏈接：https://www.invisionapp.com/inside-design/how-to-wireframe/

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

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