制作UI 設(shè)計規(guī)范時,你遇到的最大瓶頸是什么?

9 評論 21362 瀏覽 85 收藏 7 分鐘

上一篇文章是給大家提供一個制作UI設(shè)計規(guī)范的大體思路,這一篇準備來聊聊我們在具體執(zhí)行過程中遇到的最大問題、瓶頸是什么!

此篇文章適讀人群:想進階的初級UI設(shè)計師、有追求的初級交互設(shè)計師。

發(fā)現(xiàn)問題

前期做規(guī)范的過程是十分痛苦的,每做一個板塊都要花很多時間去思考怎么表達、展示才能讓其他設(shè)計師和程序員都一目了,然而隨著內(nèi)容的增加,發(fā)現(xiàn)很多地方無法深入的執(zhí)行下去,只能含糊其辭,給我們制作規(guī)范的人員帶來了很大苦惱。

為什么有如此大的執(zhí)行阻礙呢?帶著問題我們找到團隊的一位設(shè)計前輩請教了一番,在前輩的指點下,終于發(fā)現(xiàn)了問題所在:我們對于前端如何實現(xiàn)設(shè)計稿其實并沒有很好的了解。

解決問題

大家要明白,如果你沒有徹底了解你做的界面,那么做規(guī)范就會十分艱難,因為你只是做了表層的視覺設(shè)計,換句話來說就是你根本不明白界面是怎么用代碼實現(xiàn)出來的。我就是因為遇到了這樣的問題,所以在做規(guī)范的時候,經(jīng)常無從下手。

了解原因之后,我們決定如果后期再發(fā)生執(zhí)行困難的情況,我們就會向設(shè)計前輩或者前端程序員咨詢一些簡單的實現(xiàn)方法,慢慢了解他們的思維模式,讓設(shè)計執(zhí)行變得越來越順暢。

舉個實例

其實遇到困惑的地方還是蠻多的,這里就拿二級導(dǎo)航來舉例,希望大家能舉一反三,多多思考與實踐。

圖1-1是XX項目的所有關(guān)于二級導(dǎo)航的樣式,因為這一塊的界面不是我做的(都是借口),所以規(guī)范不太了解,導(dǎo)致在做整個項目的規(guī)范時,遇到了極大的阻礙。

最初看這幾個二級導(dǎo)航時,我的第一感覺是4個樣式遵循相同規(guī)則:整條導(dǎo)航欄平均N等分后,文字在每個等分區(qū)域內(nèi)居中,但是仔細查看間距后發(fā)現(xiàn)只有2、3的樣式遵循這樣的規(guī)律,1和4并不遵循,那1和4的樣式到底是什么呢?

導(dǎo)航1,如下圖

標明顏色后,我們可以清晰看出,原來這個導(dǎo)航是平均分成了3等分(紅綠藍),只不過將綠色分割成兩半放在左右兩邊,這樣我們就可以根據(jù)整條導(dǎo)航的長度計算出每塊區(qū)域的長度,不論是開發(fā)還是設(shè)計師都可以一目了然并且明白其中的設(shè)計規(guī)則。

導(dǎo)航4,如下圖

首先我們先來認識一個單詞:auto(自動的意思),就是指數(shù)值可以變化、不固定。

再來看這個導(dǎo)航樣式,在程序員眼中這個導(dǎo)航其實是由兩個容器組成的,一個容器是:綠色區(qū)域+紅色區(qū)域+藍色區(qū)域,另一個容器是:黃色區(qū)域(不可滑動,大小固定)。

而第一個容器內(nèi)的綠色和藍色部分(間距)也是固定的,所以只有紅色區(qū)域是可變化的,因為紅色區(qū)域的文字個數(shù)是可以變化的,我們只要給出字體大小即可。

所以對于導(dǎo)航4的規(guī)范,我們要給出綠色、藍色、黃色區(qū)域的寬度;文字(選中、未選中)的大小及顏色;黃色區(qū)域內(nèi)圖標的大小、間距以及滑動規(guī)則就基本可以高度還原出視覺稿的樣式了。

了解了這些前端知識之后,我們發(fā)現(xiàn)再次制做二級導(dǎo)航的規(guī)范時,過程順暢很多。

心得

先來總結(jié)一下當設(shè)計師擁有一定開發(fā)思維后的好處有哪些?

  1. 減少與開發(fā)哥哥不必要的溝通,推進工作的順利進行。
  2. 對于設(shè)計師自身管理設(shè)計文件、規(guī)范化作圖、規(guī)范的制定、頁面標注都有極大的幫助。
  3. 避免設(shè)計很多無法落地的設(shè)計方案,省時省力,提高工作效率。

任何事情都有其內(nèi)在的套路與規(guī)律,我們必須要了解事物的本質(zhì),才能幫助我們更好的執(zhí)行;所有的苦惱與迷茫都是源自你對事物的理解不夠透徹,所以讓我們從現(xiàn)在開始,鍛煉透過事物看本質(zhì)的思維能力,就算以后你不做設(shè)計了,這種能力也可以伴隨著你,讓你受益終身!

 

作者:菜心(微信號:410628210 ?微信公眾號:菜心設(shè)計鋪),華為ITUX用戶體驗設(shè)計師(主視覺),3年工作經(jīng)驗,參與華為Welink、3MS、連長社區(qū)等多個項目的用戶體驗設(shè)計工作。歡迎大家互相交流關(guān)注。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 一開始就抱著理解各種軟件自身的算法本質(zhì),在學習中卻慢慢,,,是丟失了這種原則,還是,,,我們很多的東西無法找到途徑去獲得?就像我想知道各種adobe軟件設(shè)置的時候各種意義和本質(zhì),需要去理解 一開始不理解 有的是做著作者就發(fā)現(xiàn)其中的原則,有的好像不太那么容易知道,,,

    回復(fù)
  2. 我們平時就是遇到過很多這種問題,所以有時候ui頁面和實際做出來的東西有差距,然后產(chǎn)品就一頓嗷嗷叫

    來自上海 回復(fù)
  3. 暫時沒有用過,我們現(xiàn)在用sketch配合flinto做,現(xiàn)在軟件層出不窮,真心學不過來,哈哈

    來自廣東 回復(fù)
  4. 暫時沒有用過,我們現(xiàn)在用sketch配合flinto做,現(xiàn)在軟件層出不窮,真心學不過來,哈哈

    來自廣東 回復(fù)
  5. 非常棒

    來自福建 回復(fù)
    1. 謝謝支持哦

      來自廣東 回復(fù)
  6. 作者說的并非是規(guī)范吧,說白了就是說明設(shè)計不懂程序這個點而已

    來自廣東 回復(fù)
    1. 關(guān)于規(guī)范上一篇文章已經(jīng)展示了,寫一篇只是講述自己做規(guī)范時遇到的問題,舉這么一個點來講解,我覺得做規(guī)范一定要了解界面實現(xiàn)的基本常識,僅此而已。

      回復(fù)
  7. ??

    來自北京 回復(fù)