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

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

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

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

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

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

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

項目說明

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

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

設計思路

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

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

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

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

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

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

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

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

不知道大家有沒有發(fā)現(xiàn),有時候跟產(chǎn)品評審交互稿時,總?cè)菀茁牭健拔矣X得這樣不看”、“我覺得這樣很奇怪”,但是你進一步問是哪里不好看,哪里奇怪的時候,總是得不到結果。如果為了這些問題而過于糾結,這可以說是個失敗的評審會。

交互設計

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

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

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

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

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

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

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

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

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

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

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

 

本文由 @陳小妹紙 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

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

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

    回復
    1. sketch

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

      回復
  3. ??

    來自江蘇 回復
  4. 學習了

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

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

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

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

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

      來自廣東 回復