UI 設計師如何讓設計稿100%還原(上)

6 評論 26920 瀏覽 116 收藏 9 分鐘

大部分新手設計師可能都會遇到一個問題,設計效果很贊,為何還原效果那么差?是開發不行?然后就吐槽開發傻瓜,可很少有人想過是否是自自身的原因,在開發過程中就不斷和開發撕逼。今天我介紹一些關鍵點,通過這套系統的方法來解決你的視覺還原度,希望這篇文章能幫助到你。

五大核心關鍵因素

關于如何能讓設計稿還原度像我們原版視覺一樣,這里我總結了幾大點,從我個人多次和開發交流過程中所總結的一些經驗。

  1. 定稿前的評審
  2. 整理一份標注文檔
  3. 向開發宣講標注
  4. 積極響應開發的每一個疑問
  5. 開發還原度檢視

1. 定稿前的評審

和誰評審?這里當然是和產品經理,設計領導,還有開發同學,測試妹妹們(為什么沒有boss,因為boss你根本看不到啦)。

當然在最開始初期不需要叫這么多人,直接和設計領導就好了,因為版落地設計,是需要多次評審的,所以前期這里我們就不談了,那么在設計中期評審就一定要拉上產品鏈中的關鍵角色。

首先評審的時候一定要把改版視覺變化最大的要和開發說明清楚,布局框架改變都會增加開發工作量,能否實現或者實現是否功耗很高(一般有高級動效就會有很大功耗),這時候開發leader 就會在這里提前預估判斷下,因為這個環節如果不把握好,到后期如果出現意外,實現難度大,那么就又得重新修改視覺,那時候,時間是非常緊張的,所以一定要把握好各個關節環節

這里有人會問,框架前期不是交互已經和開發評審了嗎?這個不一定的,因為如果我們在設計過程中,靈感爆發,有些之前想的不到位的,這時候可能會做一些改動啥的,搞不好就把局部框架改了一些,所以一定要注意這些細節點。

這個環節把握好了,那基本都能實現出來,特殊情況除外,比如前期忽略了一些后臺數據的問題。

2. 整理一份標注文檔

為什么要整理一份標注文檔?

這里文檔不一定要十分嚴格的按照交互文檔或者視覺規范文檔來做,可以簡易的做,關鍵是能讓開發看得懂。

文檔里面放什么?是全部放?

如果是小版本迭代,那么相對簡單一些,因為前面幾本控件已經有了,只要標注里面寫清楚了,可以不需要寫文檔。

那如果是大版本迭代呢?比如7.0到8.0一個全新的視覺語言,那么這時候就必須整理一份文檔。

文檔里面就把這次更新迭代的共同的頁面整理出來,公共控件,整理出來標注一份就好了,然后說明細節處理問題。

比如:

  • list幾種類型,單雙行高度,如果是動態list,那么寫明字符截斷規則,如果可以允許換行,那么寫清楚最多換幾行,一般最多3(多語言時候用),超大模式如何處理?一般list文字上下都會標有一個高度,這樣即使是超大模式,超大字體也不會導致控件穿插。
  • 導航在超大模式下處理規則如何,多語言如何換行(比如阿語),換行規則是什么?先縮小字體,在換行?等等
  • 圖片宮格布局類型的如何處理,小屏和大屏顯示幾個(指的是phone和pad),橫豎屏顯示規則是什么,如何實現自適應布局等
  • 記住banner一定要給出比例,常用21:9,16:9,4:3
  • 非常關鍵的一點,設計師標注一定要把點擊區域標注出來,如果你不標注出來,開發直接拿你切圖填充進去,然后最后導致可用性非常差,最后導致來回調試。

這個環節是標注的核心部分,非常細微的還原實現這步非常關鍵

3. 向開發宣講標注

為什么要向開發走讀layout? 因為有些細微的地方需要我們特別像開發說明,也加深他們的映像,在實現時候就減少出錯,像開發走讀的時候,只把關鍵核心點,規則講清楚,我們前面每走一步,都是為了后面我們檢視還原度的時候要輕松一些,開發也輕松一些,就比如前期基礎沒打好,后面深入很難。(如果大視覺沒還原好,如何叫開發打磨細節?

4. 積極響應開發的每一個疑問

在開發緊張環節中,即使我們前面所有工作都準備好了,也很難避免開發不找我溝通,這時候我們要積極回應他們,并且和他們一起處理問題,比如某些難度大一點的頁面,開發實現效果和設計稿差異不小,那么這時候,開發會截一張他們實現的效果圖給你看,這時你就要仔細去找問題,不要一口咬定就是開發的原因,先溝通具體原因,然后找出解決辦法,如果是標注出現問題,比如標注標死了,頁面不靈活,適配局限性很大。

那么你就要思考layout的問題了,比如間距是否能標成百分比關系等等

5. 開發還原度檢視

經過前面和開發的各種協同作戰到最后一步驗收環節了,還原度檢視,這時候你必須要有一雙火眼精金,那怎么檢視?

檢視是有一套科學方法的,部分同學,估計拿著手機就開始看頁面的問題了,這樣檢視是很容易漏掉場景的。

那么如何科學檢視還原度?

按場景檢視,我前面寫了一篇文章,關于app 命名系統,這里就派上用場啦!(歡迎有興趣的同學再去閱讀《App設計中,如何更專業管理設計命名系統?

比如,我可以就按我畫布上面這些順序來檢視,這樣就避免漏掉場景,異常場景等等。更高級的做法,可以做一個測試用列,這樣百分之百不漏掉場景。

總結

五大黃金步驟,如果每步把握好了,幾本能實現高還原度的開發成果,這是一個細心的活,期待你們產品百分百還原。

  1. 定稿前的評審
  2. 整理一份標注文檔
  3. 向開發宣講標注
  4. 積極響應開發的每一個疑問
  5. 開發還原度檢視

【未完待續】

 

作者:Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。

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

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很棒,這個問題,很詳細

    來自陜西 回復
  2. Tony老師,你好!我想咨詢個問題,是否有方法或標準來對設計還原度進行量化,評估界面的還原度是高還是低?

    來自廣東 回復
  3. ?? ????????

    回復
  4. 不錯??,這問題很常見

    回復
  5. 11

    來自廣東 回復
    1. 這是啥

      回復