我們都在交互稿中放了些什么?

12 評論 12099 瀏覽 73 收藏 11 分鐘

作為一名交互設計師,在輸出交互稿件之時,要考慮的不僅是如何將需求轉為具體頁面,而且還要清晰的將其中的思想傳達給對方。

“你是什么樣的人,就會說什么樣的話,做什么樣的稿子”,作為一名交互設計師,在輸出交互稿件之時,要考慮的不僅是如何將需求轉為具體頁面,而且還要清晰的將其中的思想傳達給對方,這看似是一份交互稿,其實更像是一篇表達你思想的文章。

如何才能讓對方清晰的感受到你想表達些什么呢?一般我都是通過從以下幾點去向別人說明我想表達的內容:

  1. 我是誰?
  2. 我想干什么?
  3. 我想達到什么目的?
  4. 我會通過什么方式去做達到這個目的?
  5. 為了達到目的,我做了哪些準備

自然而然,我在做設計稿的時候也是通過這種方式去思考和表達的,如下圖:

項目說明

其實項目說明在這里就是一個交代和總結,交代這個項目的基本信息、進行程序以及相關人員,告訴別人這個產品是什么,也就是我剛說的第一個問題“我是誰”。這對后續使用該交互稿的人都存在一定的幫助,可以加速別人對產品的了解,高效上手。

總結指的則是告訴別人,“我想要干什么”,這是自己對需求的看法,同時也是產品與交互討論達成的共同意識。這樣一來也避免從開始就產生理解偏差的這種錯誤,是為了后續能朝著一個正確方向而做了鋪墊。

設計思路

當向別人介紹了我的用意和想法的時候,就是時候該告訴別人,“我想達到什么目的”,“我又會通過什么方式去達到這個目的”?設計思路就是為了解釋這個而存在的,我將設計思路分成了兩塊,分別是產品定位和競品分析,產品定位告訴著我們你的產品將給我們呈現怎樣的感受,輕松?愉悅?還是沉穩,這都是需要思考的,而競品分析的作用就是為了產品定位去做的鋪墊,你只要對比競爭,才能明白怎樣算會讓人覺得輕松、愉悅或者是沉穩。

有時候往往我們會因為一些原因,沒辦法做到這一塊的呈現,但你絕不能因此而忽略甚至跳過此環節,原因是什么呢?

一個完整的設計思路就像是一個交互的靈魂。如果沒有這個思路的說明,上來就給別人看頁面,給人的感覺就像是一副畢加索的畫,你不懂他好在哪里,你也不能很清晰的明白這幅畫的意義所在。因為在一個非專業人士來說,看到的都只能是表象。

就像很多人不能理解為什么微信撤回消息之后,還得給對方一個消息提示,提示“對方撤回了一條消息”。

假設你在設計思路那里就體現了你的想法,其實你之所以這么做的原因,一是技術難以實現撤回無痕,二是想告訴廣大群眾要對自己說的話負責,不要輕易亂說話(這是我看到的一些觀點,不完全正確)。這樣一來,拿到這份稿子的人就能理解為什么你當初是這樣設計的。

凡存在,即有其道理。除了在這里說明自己的思路,還會在設計思路里面有相應的競品分析,為的是告訴大家,我的頁面布局甚至是機制并不是空穴來風,是有事實依據的,這樣的說服力明顯會翻倍,才不至于被他惹前者鼻子走。這也是告訴大家,你在做這份設計的時候是花了心思和時間的,我的努力并不但只是頁面上的呈現,思維才是我的靈魂。這大概也是為什么很多人拿到交互稿之后,總會說交互設計也不過如此,并沒有想象中那么難。

你將項目說明及設計思路都跑完后,建議能跟產品或者是BA再次探討一下,看這樣的方法和思路是否存在問題,在確認沒問題的時候,就可以進入到實際的交互設計環節了,這樣能減少后續的爭執及返工情況。

例如如對方覺得你的布局存在不合理,覺得太繁雜,此時你可以很明確的告訴他:這是因為我們當初討論的時候,是說了必須要在頁面突出這幾個功能點。如此一來很容易能避免那些帶有感觀上的問題,就是莫名覺得不好看的那種提問。

不知道大家有沒有發現,有時候跟產品評審交互稿時,總容易聽到“我覺得這樣不看”、“我覺得這樣很奇怪”,但是你進一步問是哪里不好看,哪里奇怪的時候,總是得不到結果。如果為了這些問題而過于糾結,這可以說是個失敗的評審會。

交互設計

交互設計這塊則是將需求具象到頁面中的設計,也是最終的交互輸出物,是時候該告訴別人,你為了達到這個目的,都做了些什么實際的準備和工作。

不過說到交互頁面,是我的一個弱項,因為我無數次的發現,想把許多細節都在交互稿清晰明了的體現,實在是堪比登天(所以看到那些交互稿畫的如同視覺稿一般,連規格大小都按照規范走的大神們,只能說你們是我所努力的對象)。我在畫稿的過程中,通常都是邏輯流程圖和頁面流程圖相結合使用,邏輯流程圖在前,頁面流程圖在后;但是在碰到邏輯復雜的大流程時,我一般只會畫出主流程線,細節則會在具體頁面流程圖上體現,如下圖:

兩者結合一起使用的好處在于:在還未看到具體頁面時,就可以先對整個交互有個大致的了解,知道下方的頁面流程主要分幾大塊,會怎么跑。就跟看電視劇一樣:先看個簡介,知道個主線,接著再具體看每一個鏡頭,都拍了些什么,都說了些什么話。

頁面流程圖就是在交代細節部分。細節是個很不好把控的東西,它很復雜,但卻能看得出一個交互設計師的基本功。其中頁面流程圖的展現方式其實是先變萬化的,我們沒法給出個模版或者是套路,但是它有其可遵循的原則,如果能遵循這幾點,應該不會差到哪里去。

那么在具體頁面流程圖中,應該要遵循那幾點呢?

  1. 邏輯清晰,狀態完整
  2. 有相應的文字注釋,遵守就近注釋原則
  3. 盡量還原真實場景(文字上)
  4. 少用截圖,要表現出層次(盡量用灰白)

以上四點并不是最完整的,只是目前我在做設計過程中的一個小總結,如果有更好的,都可以一起探討。

在遵守原則的前提下,具體表現形式上則可以依據實際場景來定,但也需要考慮這份交互稿主要是給誰看的。

舉個例子,我以前在做某個app的整體框架優化的時候,做了一份對比稿;就是我拿著舊版和新版的對比著擺放在頁面中,為的是能讓別人清晰的感受到我究竟改了哪些地方,改動前后的效果是什么。這份交互稿給產品評審的時候,獲得了很大的認可,但是給部門內的其它交互同仁們看,就被小小的“批判”了一下,原因是他們不懂這其中的業務和流程,用對比稿很容易讓他們混亂。而產品組的人因為對這款app非常了解,他們不需要任何講解,只需要給出對比圖,就能達到他們想要的結果。

所以為了避免這種事情,不管是給誰看,都應該在畫交互稿之前,交代清楚業務及設計思路,以體現自己的專業度。

但是在實際工作中會發現,我們往往會因為各類原因,無法在限定時間內給出一份如此完整的交互設計稿。這種事情無法避免,你能做到的就是即使不能當下給出完整的稿子,但必須有這個思考過程;你可以事后再繼續完善稿子,爭取做到完整的跑一遍設計流程,丟三落四切記不可取~

 

本文由 @陳小妹紙 原創發布于人人都是產品經理。未經許可,禁止轉載

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大神好厲害,可以交個朋友嗎

    回復
    1. 這句話是我要說的才對,啊菜。

      回復
  2. 問下美女,那個流程圖用什么畫的?

    回復
    1. sketch

      來自廣東 回復
    2. 哦,我去喵喵

      回復
  3. ??

    來自江蘇 回復
  4. 學習了

    來自上海 回復
  5. 思考的基本思路還有待完善,核心應該是:有什么問題,要怎么做,為什么這樣做。
    競品應該是個參考,不是依據,核心還是自己產品的業務。
    交互稿的主要面向對象,如設計和研發,他們對交互稿的理解和在意點也是不一樣的,要注意,繼續加油吧。

    來自上海 回復
    1. 恩,思路總是需要不斷完善的,我可能在言語表達上還不夠清晰,謝謝你的建議~感謝你用心讀完我的文章,希望下次還能給出建議~

      回復
    2. 交互這個詞怎么解讀?

      回復
    3. 交互可以理解為設計理念草圖嗎

      回復
    4. 可以理解為框架,主要是理念和思維的體現,因為我不知道你所謂的草圖是什么樣的,沒辦法直接回答。

      來自廣東 回復