我們都在交互稿中放了些什么?
作為一名交互設計師,在輸出交互稿件之時,要考慮的不僅是如何將需求轉為具體頁面,而且還要清晰的將其中的思想傳達給對方。
“你是什么樣的人,就會說什么樣的話,做什么樣的稿子”,作為一名交互設計師,在輸出交互稿件之時,要考慮的不僅是如何將需求轉為具體頁面,而且還要清晰的將其中的思想傳達給對方,這看似是一份交互稿,其實更像是一篇表達你思想的文章。
如何才能讓對方清晰的感受到你想表達些什么呢?一般我都是通過從以下幾點去向別人說明我想表達的內容:
- 我是誰?
- 我想干什么?
- 我想達到什么目的?
- 我會通過什么方式去做達到這個目的?
- 為了達到目的,我做了哪些準備
自然而然,我在做設計稿的時候也是通過這種方式去思考和表達的,如下圖:
項目說明
其實項目說明在這里就是一個交代和總結,交代這個項目的基本信息、進行程序以及相關人員,告訴別人這個產品是什么,也就是我剛說的第一個問題“我是誰”。這對后續使用該交互稿的人都存在一定的幫助,可以加速別人對產品的了解,高效上手。
總結指的則是告訴別人,“我想要干什么”,這是自己對需求的看法,同時也是產品與交互討論達成的共同意識。這樣一來也避免從開始就產生理解偏差的這種錯誤,是為了后續能朝著一個正確方向而做了鋪墊。
設計思路
當向別人介紹了我的用意和想法的時候,就是時候該告訴別人,“我想達到什么目的”,“我又會通過什么方式去達到這個目的”?設計思路就是為了解釋這個而存在的,我將設計思路分成了兩塊,分別是產品定位和競品分析,產品定位告訴著我們你的產品將給我們呈現怎樣的感受,輕松?愉悅?還是沉穩,這都是需要思考的,而競品分析的作用就是為了產品定位去做的鋪墊,你只要對比競爭,才能明白怎樣算會讓人覺得輕松、愉悅或者是沉穩。
有時候往往我們會因為一些原因,沒辦法做到這一塊的呈現,但你絕不能因此而忽略甚至跳過此環節,原因是什么呢?
一個完整的設計思路就像是一個交互的靈魂。如果沒有這個思路的說明,上來就給別人看頁面,給人的感覺就像是一副畢加索的畫,你不懂他好在哪里,你也不能很清晰的明白這幅畫的意義所在。因為在一個非專業人士來說,看到的都只能是表象。
就像很多人不能理解為什么微信撤回消息之后,還得給對方一個消息提示,提示“對方撤回了一條消息”。
假設你在設計思路那里就體現了你的想法,其實你之所以這么做的原因,一是技術難以實現撤回無痕,二是想告訴廣大群眾要對自己說的話負責,不要輕易亂說話(這是我看到的一些觀點,不完全正確)。這樣一來,拿到這份稿子的人就能理解為什么你當初是這樣設計的。
凡存在,即有其道理。除了在這里說明自己的思路,還會在設計思路里面有相應的競品分析,為的是告訴大家,我的頁面布局甚至是機制并不是空穴來風,是有事實依據的,這樣的說服力明顯會翻倍,才不至于被他惹前者鼻子走。這也是告訴大家,你在做這份設計的時候是花了心思和時間的,我的努力并不但只是頁面上的呈現,思維才是我的靈魂。這大概也是為什么很多人拿到交互稿之后,總會說交互設計也不過如此,并沒有想象中那么難。
你將項目說明及設計思路都跑完后,建議能跟產品或者是BA再次探討一下,看這樣的方法和思路是否存在問題,在確認沒問題的時候,就可以進入到實際的交互設計環節了,這樣能減少后續的爭執及返工情況。
例如如對方覺得你的布局存在不合理,覺得太繁雜,此時你可以很明確的告訴他:這是因為我們當初討論的時候,是說了必須要在頁面突出這幾個功能點。如此一來很容易能避免那些帶有感觀上的問題,就是莫名覺得不好看的那種提問。
不知道大家有沒有發現,有時候跟產品評審交互稿時,總容易聽到“我覺得這樣不看”、“我覺得這樣很奇怪”,但是你進一步問是哪里不好看,哪里奇怪的時候,總是得不到結果。如果為了這些問題而過于糾結,這可以說是個失敗的評審會。
交互設計
交互設計這塊則是將需求具象到頁面中的設計,也是最終的交互輸出物,是時候該告訴別人,你為了達到這個目的,都做了些什么實際的準備和工作。
不過說到交互頁面,是我的一個弱項,因為我無數次的發現,想把許多細節都在交互稿清晰明了的體現,實在是堪比登天(所以看到那些交互稿畫的如同視覺稿一般,連規格大小都按照規范走的大神們,只能說你們是我所努力的對象)。我在畫稿的過程中,通常都是邏輯流程圖和頁面流程圖相結合使用,邏輯流程圖在前,頁面流程圖在后;但是在碰到邏輯復雜的大流程時,我一般只會畫出主流程線,細節則會在具體頁面流程圖上體現,如下圖:
兩者結合一起使用的好處在于:在還未看到具體頁面時,就可以先對整個交互有個大致的了解,知道下方的頁面流程主要分幾大塊,會怎么跑。就跟看電視劇一樣:先看個簡介,知道個主線,接著再具體看每一個鏡頭,都拍了些什么,都說了些什么話。
頁面流程圖就是在交代細節部分。細節是個很不好把控的東西,它很復雜,但卻能看得出一個交互設計師的基本功。其中頁面流程圖的展現方式其實是先變萬化的,我們沒法給出個模版或者是套路,但是它有其可遵循的原則,如果能遵循這幾點,應該不會差到哪里去。
那么在具體頁面流程圖中,應該要遵循那幾點呢?
- 邏輯清晰,狀態完整
- 有相應的文字注釋,遵守就近注釋原則
- 盡量還原真實場景(文字上)
- 少用截圖,要表現出層次(盡量用灰白)
以上四點并不是最完整的,只是目前我在做設計過程中的一個小總結,如果有更好的,都可以一起探討。
在遵守原則的前提下,具體表現形式上則可以依據實際場景來定,但也需要考慮這份交互稿主要是給誰看的。
舉個例子,我以前在做某個app的整體框架優化的時候,做了一份對比稿;就是我拿著舊版和新版的對比著擺放在頁面中,為的是能讓別人清晰的感受到我究竟改了哪些地方,改動前后的效果是什么。這份交互稿給產品評審的時候,獲得了很大的認可,但是給部門內的其它交互同仁們看,就被小小的“批判”了一下,原因是他們不懂這其中的業務和流程,用對比稿很容易讓他們混亂。而產品組的人因為對這款app非常了解,他們不需要任何講解,只需要給出對比圖,就能達到他們想要的結果。
所以為了避免這種事情,不管是給誰看,都應該在畫交互稿之前,交代清楚業務及設計思路,以體現自己的專業度。
但是在實際工作中會發現,我們往往會因為各類原因,無法在限定時間內給出一份如此完整的交互設計稿。這種事情無法避免,你能做到的就是即使不能當下給出完整的稿子,但必須有這個思考過程;你可以事后再繼續完善稿子,爭取做到完整的跑一遍設計流程,丟三落四切記不可取~
本文由 @陳小妹紙 原創發布于人人都是產品經理。未經許可,禁止轉載
大神好厲害,可以交個朋友嗎
這句話是我要說的才對,啊菜。
問下美女,那個流程圖用什么畫的?
sketch
哦,我去喵喵
??
學習了
思考的基本思路還有待完善,核心應該是:有什么問題,要怎么做,為什么這樣做。
競品應該是個參考,不是依據,核心還是自己產品的業務。
交互稿的主要面向對象,如設計和研發,他們對交互稿的理解和在意點也是不一樣的,要注意,繼續加油吧。
恩,思路總是需要不斷完善的,我可能在言語表達上還不夠清晰,謝謝你的建議~感謝你用心讀完我的文章,希望下次還能給出建議~
交互這個詞怎么解讀?
交互可以理解為設計理念草圖嗎
可以理解為框架,主要是理念和思維的體現,因為我不知道你所謂的草圖是什么樣的,沒辦法直接回答。