A2-交互原型在項目中的注意點

大家好！我是海哥。歡迎閱讀學習《海哥交互行》精品課程。

本節課帶大家學習交互原型在項目中的注意點，我們今天主要給大家分享一下在交互設計上我們需要注意

的地方，這也是海哥多年來積蓄的一些經驗分享吧。我會分四個部分來概述，首選是我們為什麼要用交互原型？然後需要了解兩個關鍵詞：低保真和高保真的區別。接著就是原型上的一些特點。最後我們會講到axure原型在實踐中的技巧。

我們為什麼要做交互原型

首先我們說一個原型在項目中的一個作用和意義。很簡單，大家記住一句話，它就是會節省我們的時間和資源的投入。為什麼這麼說呢，首先給大家看一下這個案例。如果是從思考到這個原型的整體的結構輸出的話大概需要半天或者最多是一天。而如果出設計稿的話那需要的是兩到三天的時間了，為了效率和成本，原型才是最好的選擇。當然還有第二點，他就是可以快速檢驗你的產品的可行性。第三點就是專業技能簡單，為什麼這麼說呢，當我們遇到一個輕量級產品交互設計的時候，有可能只需要用紙盒筆畫一畫就可以搞定。複雜一點的話那其實之前我們也說過，交互設計師會使用axure就可以了。

節省時間與資源 快速檢驗產品的可行性 專業技能簡單

了解兩個關鍵詞：低保真與高保真

什麼才是低呢，低保真，就像上面左側我給出這個圖一樣，它其實純粹是一個線稿灰度稿，他不會需要任何的一個視覺上的一個美化。而高保真需要經過流程比較多一點，可能會有視覺設計師的參與來完成，除了視覺圖，還需要通過軟體來實現在手機以及不同平台的預覽效果。所以，從低保真到高保真是需要一定的過程的。然而對比低保真咋才能算是一個低保真呢？這也是需要一個權衡的方法，比如，為了快速出圖，有時候用在紙上畫的交互也是低保真。而一些領導或者客戶對你的低保真看著沒啥感覺，這時候就需要我們能夠做出高保真。所以為了減少後期的修改調整，我們需要先出簡單的低保真來確定用戶需求慾望，在通過低保真到高保真的過度，如果客戶或者領導沒啥太大要求，我個人覺得低保真就完全滿足了開發過程中訴求。

低保真-線稿，建議的交互過程

高保真-有色彩並可以操作，比如最終以Html輸出的網站

原型上的特點

在交互原型上的這些特點，它會指導我們做一個整體的交互原型的時候一些方針和方向。大家可以看到在做交互原型的時候，最重要的特點是，線稿，方塊，還有就是灰色與白色或者深灰等等，很少會用到具體的色彩的。當然也會有一些例外，也是我們在前面所說的最低保真，而要從多個維度來區分。

一切皆可原型化-無論是多麼複雜大數據結構也好或者是智能結構也好，它其實都可以轉化成我們可視化的一個輸出。就是把它變成一個抽象的概念一個集體，從而輸出在原型上。

點到即止，無需深入細化-這一點在實際工作效率中很重要，打個比方，類似我提到的案例中會有一個動態載入發文章的模式，而它有什麼好處呢，就是用戶只需要純粹的輸入文字就可以了，用戶只需要簡答的操作就可以解決用戶的問題。而在原型設計過程中，我們並不需要做得那麼細化主要是為了節省時間，而作為一個程序開發就應該懂得這些基本技術。

表現一般為：線稿、方塊和灰白黑色-因為在原型的設計中，我們通常使用黑白灰作為我們的基礎顏色，不會去使用其它的顏色，但是我們還是需要用顏色的深淺的來區分不同的層次，以及功能。這樣可以告訴設計在設計的時候那個地方重要，哪裡是次要的，從而可以更好的做出視覺層次，來提升產品的使用體驗。

嚴謹的大小和位置關係-在原型設計中我們要遵循各種需求來合理的區分他們的位置和大小關係，而這些交互位置關係也不能隨意的去擺放，因為是需要和業務需求、用戶使用習慣等等緊密相關聯的。

最小尺寸設計-我們在做網頁交互設計或者視覺設計我們盡量做到以最小尺寸設計，因為我們的屏幕尺寸有很多尺寸，比方說我們做網頁會以保持寬度1200px，手機的話720px，這樣的話就能保證在一些低端客戶群體。在瀏覽的時候能夠保證不會出現一屏放不下內容，而影響用戶使用體驗。

Axure原型實踐中的技巧

「返回」是可以記憶的-在由兩個或多個頁面都跳轉在同一個頁面的時候，那我們該如何去做呢？常規來說我們可以使用全局變數來實現。如果有疑問可以參考視頻中的講解。

用「熱區」替代按鈕自身的鏈接，實現方便的多項選擇跳轉-當我們在做tab切換的時候可以通過熱區代替按鈕自身的鏈接，還有就是類似我們視頻中所講到的訂單狀態也會用到它，這樣就可以實現多項選擇的跳轉。

多個狀態或操作界面可以並行放在一頁，方便知道邏輯-在同一個頁面出現多個狀態的時候建議使用並行放在一頁，為什麼需要這樣呢，因為在開發過程中這樣有利於視覺設計和程序開發找到這個訂單總共有幾種狀態。避免動態面板隱藏顯示，這樣會增加開發溝通成本，放一頁還可以對產品的頁面邏輯就會更清楚了。

一個畫面能顯示控制項的不同狀態-在什麼情況下使用這種方式呢，例如視頻中所提到的案例，會出現未編輯與在當前頁面編輯的操作，這種交互的方式可以減少頁面的跳轉邏輯數量。在有些案例中可以適當的去使用該操作。

間隔性的操作原型，總會發現不同問題-每當我們做完交互原型設計一段時間以後，你再看一下自己的交互原型你就總會發現不同問題。因為我們在一遍一遍走流程總會看到自己在做原型過程中有很多不合理，這也是我們需要去發現問題有效的去解決問題。

小結

通過本章節交互原型在項目中的注意點的學習，我相信大家應該如何在項目中如何的去做交互原型知識，以及掌握了需要哪些注意點，從而來提高我們的原型交互設計能力。通過海哥多年的經驗分享，我們應該學習到Axure在原型實踐中的技巧，如何快速、高效、做出一個專業的交互原型設計。

謝謝大家的觀看

喜歡的話贊一個

歡迎大家關注海哥的公眾號：海哥交互行

推薦閱讀：