牛X的交互設計稿應該具備的特點
還沒有跨入交互設計的門檻時,總是想明確的知道一些客觀、確定的事情。比如,想知道交互設計的具體流程是什麼,交互稿到底長什麼樣子,Axure中的Case用例怎麼用以及載入動畫怎麼做,總希望有人能給一個交互設計的原型案例作為模板。
對於交互設計的學習,當我們跨過「知道」以後,就會越來越注意「懂得」的階段,越來越關注一些主觀的元素,讓自己的交互稿更好,而不是僅僅停留在怎麼寫交互稿的層面上,還要注意邏輯、視覺上的表現。
交互設計稿的表現形式有很多種,有word、PPT、Axure等。但Axure又有著獨特的優勢,在Axure文件中直接表現交互稿,並配以相應的交互說明,生成HTML文件;在線框圖上直接進行注釋和說明,可以讓交互設計的表達更加清晰,便於理解。
在交互稿中,除了注意那些既定的、能夠清晰辨別出是對是錯的內容外,比如功能缺失,邏輯錯誤等,還有一些更高層次的特點,需要懂得並加以注意。那我們今天就來聊一聊舒服的交互稿應該具有的特點。
1、用色克制但層次清晰
交互稿本身就是一種邏輯層面的表現,這也是很多公司招聘交互設計師時,主要考察應聘人員的地方。交互稿作為交互方案的主要載體,在完成需求分析以後,交互稿只是產品功能與業務邏輯的表現,因此為了更好的表現產品的功能與業務邏輯,很多資深交互設計師都會告訴我們:要儘可能的少使用彩色,更多的採用合理的頁面布局與黑白灰色調來表現頁面中的重要元素以及功能邏輯。
在交互稿中,彩色一般在表示提醒或者設計師要表達其特定意思的時候才會用到,比如警告、錯誤提示等等。在有些UED團隊中,交互稿中出現的彩色是交互設計師向視覺設計師傳達的視覺設計建議,暗示視覺設計採用該色彩,來強調元素。若非上訴情況下,交互設計師應盡量少使用彩色,一方面能夠儘可能的體現交互設計的邏輯,另一方面能夠減少對視覺設計師的視覺干擾,更大的發揮視覺設計師的創造性。
2、符合通性且保留個性
作者本身是工業設計科班出身,中途轉行做交互。在找交互設計工作時,總以為交互設計和工業設計區別不大,總以為設計是相通的,設計原則是通用的。真正入行以後,才發現交互設計雖然也遵循著眾所周知的普遍性設計原則,如:以人(用戶)為中心、少即是多、人機環境(場景)等等,但與其他類型的設計相比還是有自己特色的。這就猶如在中國,很多事物都具有「中國特色」一樣。
在交互設計專業內,根據行業的不同,在交互設計的頁面流程等的設計方面也有很大的差別。即使應用相同的設計原則,針對不同的目標人群,所做的設計操作流程和頁面布局也是不同的。在進行交互設計時,要保證所做產品符合所在行業的特點,同時針對具體的目標人群進行個性化的處理,具有更多針對性的功能與界面設計。簡單來講,在符合行業特點的前提系,交互方案要講求用戶細分,針對相應的用戶角色設計個性化的交互方案。
3、功能簡單但考慮周詳
大家應該都知道「少就是多」的設計原則,在交互設計稿中,同樣遵循這樣的設計原則。交互設計師的主要工作就是多功能流程的優化,減少不必要的操作,讓用戶在不需要思考的情況下完成相應的任務。但是減少操作步驟的前提是保證功能流程的完整,用戶不會出現功能使用障礙。同樣,在交互稿中,在保證頁面簡潔的同時,一方面要實現多種操作的可能性,另一方面要考慮極端情況下的頁面顯示。例如,常見的登錄頁面,包括手機號、郵箱、第三方登錄,登錄要考慮是否需要用戶驗證,同時,不同的驗證方式其頁面展示也是不同的。
對於極端情況的一種,特殊頁面的處理,不僅僅要告訴用戶出現錯誤了,還要以用戶能夠懂的方式,告訴用戶哪裡出現了錯誤,更進一步要告訴用戶該怎麼操作。要引導用戶到正確的頁面中去,完成用戶功能,提升用戶,讓用戶忘卻頁面錯誤帶來的不快。
4、頁面平常但尋求突破
交互設計的工作是在滿足需求的前提下,能夠有所突破,因此,在很多情況下,交互設計師都會參考具有類似需求產品的頁面,進行相應的調整。但是,這樣的產品沒有亮點,不能帶給用戶驚喜之感,不能引領公司產品跟上設計趨勢。如果每個人都引用已有的設計方案,而不尋求突破,最終會降低個人與團隊的設計水平。這也是在做競品分析時,要格外注意的點。
在進行競品分析時,我們都會或多或少的受到其影響,競品分析在為我們理清設計思路的同時,也禁錮了我們的想法。正像有些設計師,進行App設計時,還沒有怎麼分析需求,就先入為主的想到產品應該有個「首頁」,應該採用標籤式導航,以及四個標籤的名稱應該是什麼。這樣的產品交互設計怎麼會有突破?
需求突破的最重要途徑就是深入挖掘產品需求與業務需求,即具體情況具體分析。在一些人眼中,有些設計很平常,但在具體的業務場景中,就會脫穎而出。
還是滴滴bus的驗票頁面,脫離了支付寶和微信慣用的對話框形式,但更加符合場景的使用情況。
5、語句簡單但意義明確
在彈出框中,很多人在製作引導用戶的操作時,都會用「是」、「否」、「確定」、「返回」、「關閉」等字眼,雖然這些引導語都含有明確否定或者肯定的意義,但是,其在傳達意義時可能會存在缺陷。例如,刪除相關內容並進行二次確認的彈出框,採用明確意義的」刪除「與」取消「要比採用」是「與」否「的方案好。
在用戶要刪除文件時,二次確認的目的是減少用戶誤操作。但是,左側的操作引導語,不論用戶採用哪一邊的操作都要去確認彈出框的內容,然後去進行提操作。而右側的操作引導語,具有明確的指引作用,即使用戶不閱讀彈出框的文案,也能根據操作引導語完成正確的操作,更加符合Dont make me think設計理念。
交互設計的道路是無止境的,在不同的階段對設計的理解和認知也不一樣,但是,整體會是一個不斷深化、趨於簡單的過程。再多的學習也都是「知道」,只有經歷實踐,才能到的「懂得」,才會更加清楚交互設計的本質,才會做出更佳的設計方案。
願與你同行!
敬請關注UIUX設計工作坊,微信公眾號:UIUX-HUANG,每周會有互聯網產品設計的相關文章更新,是作者的實際工作經驗,願與大家共同進步。
http://weixin.qq.com/r/ITs6IuTEo7ncraBB924z (二維碼自動識別)
推薦閱讀:
※2017阿里巴巴交互設計師實習崗筆試感受
※卓越新騰:2018年UI設計簡潔化成為趨勢代表
※給知識音頻產品設計播放頁有多難?
※交互水深 04 | 選擇設計中的五個要點【單選小坑,多選大坑】(上篇)
※交互設計前期需求分析的「三境界」