長城上的貓

小編:UI組件用的好,下班下的早!那么怎么用的好呢?我們來看看這一篇分享的提高效率的UI組件技巧吧~

 

前言

今年整體的經濟環境不太好,設計單子也比往年少了一些。不過得益于站酷這個平臺的權威性,今年也做了七八個大大小小的單子。隨著工齡的增長,受益最多的不是畫的圖標更漂亮了交互動畫更炫酷了這些表現層的東西,而是懂得利用以往的積累來提高工作效率,用更少的時間完成更多的事情,畢竟Time is money。10個小時做完10000元的單子可不是標題黨,真事兒。雖然不是每個單子都能10小時完成就是了,限定條件比較多,這個文章最后講。

 

1.什么是組件

UI組件,即UI kit,字面的意思就是UI配套元件/成套工具。用白話舉兩個例子:一部智能手機是怎么制造出來的?不同品牌的智能機外形上雖然略有區別,性能上也是有高有低,但為什么功能卻幾乎沒有區別呢?因為現代的手機生產線都是購買一個個的功能模塊拼裝起來的,如拍照模塊,音響模塊,通訊模塊,CPU模塊,內存模塊等等,正是因為科技的積累,才會有這么多現成的模塊供手機廠商選擇,然后用自己擅長的方式組裝起來,配上個性化的外殼以及定制的安卓系統,再貼個標,開個發布會,一款手機就可以上市了。

那一臺品牌電腦怎么來的?主板、CPU、內存、顯卡、硬盤、電源等等,都是用現成的功能模塊拼裝的,幾乎沒有一家手機廠商是從零開始研發一塊CPU,從零開始研發一塊內存。為什么?效率與成本的問題。

那么功能模塊又是怎么來的呢?是由電阻、電容、電感、三極管、二極管等等電子元器件組成。這些電子元器件,我們可以成為“組件”。

 

2.什么是UI組件

經過上面對組件的解釋,相信小伙伴們對組件的定義有了一定了解。同樣,一個app是由什么組成的呢?

不同的組件構成了不同的模塊,不同的模塊又構成了不同的頁面,不同的頁面構成了一個完整的app。

如上圖,這個app首頁拆解后,是由8個組件組合而成。將這些組件整理到組件庫后,以后在其他項目里有類似的結構和功能,就可以直接找出來復用,不需要重新制作。這樣就大大的提高了工作效率。

 

3.UI組件的類型

APP的行業屬性是多種多樣的,如金融類、資訊類、社交類、電商類、視頻類等等,但均可拆分組件化。

透過現象看本質,上面四類app的首頁組件構成其實大同小異。作為UI設計師,需要認真的了解各種UI組件的內容和功能,才能不斷的對已有組件做優化,要為了服務而設計,而不是為了設計而設計。

UI組件可以分為兩大類,一類是通用型組件,一類是業務型組件。

通用型組件也叫基礎組件,絕大多數app都會有這些組件的身影。較常見的有狀態欄組件、導航欄組件、工具欄組件、輪播banner組件、金剛區組件、tab欄組件、彈框組件、List組件、UGC組件、篩選組件、按鈕組件、表單組件、輸入框組件、toast組件、加載組件、空白頁組件等等。

通用型組件的特點在于,換換文本(包括字重、字間距、字號)、配圖或色值,就可以應用到大多數app場景中去。

業務型組件即與業務相關的組件,通常只會應用于特定的場景。如金融類產品的走勢圖組件、表單組件,視頻類的播放組件、錄制組件,社交類的評論組件、對話組件,資訊類的富文本組件,電商類的商品展示組件、支付組件等等。

 

4.如何建立自己的專屬UI組件庫

UI組件的來源主要來自平日里有意識、有目的的收集與整理。

平時設計師接觸最多的應該是自己負責項目的UI,這部分UI是應該優先整理成UI組件的,因為產品每一次的升級迭代,都會有很多UI組件不需要重新設計或僅需要較小改動的設計,這時候直接復用就可以極大的提高工作效率。

另一部分則是平日里收集與整理的UI組件,把各種類型的APP、WEB等設計頁面進行拆解、分類,然后做成組件收錄到自己的UI組件庫中,在新項目中就可以按需調用。

另外,UI組件庫需要定期的維護與升級,這樣才能做到與時俱進,不讓以往的UI組件落伍過時。至于怎么在工具層面來制作組件,這個還是需要看個人的使用習慣,設計工具僅僅是工具。有的人習慣使用PS來做UI設計,那就直接可以用文件夾分組的方式將不同UI組件進行區分;有的人習慣使用sketch來做UI設計,那就可以在頁面中選中想要收錄的組件點擊右鍵-創建組件。

 

5.10小時掙10000?

Time is money,這是個效率問題。一個20多個頁面的小程序,在溝通清楚需求的情況下完成設計輸出,10個小時完成并達到甲方要求,是完全有可能的,這就是UI組件化的最大功效。不過這里面有一些限制條件(肯定不是每一單都可以啊,錢哪有那么好掙?。?,熟悉的產品領域+分析需求文檔的能力+好溝通的甲方。

熟悉的領域:這個就是有過類似項目經驗,不需要過多的去做競品調研就知道應該如何去做,怎么樣做到更好。

分析需求文檔的能力:實際操作中,無論是自己公司的項目還是甲方的項目,完全按照PRD文檔和產品原型來做設計會遇到很多問題,這就需要設計師具有分析需求文檔的能力。絕大多數公司的產品經理提供的產品原型并不能夠直接做設計產出的,僅僅能當做參考(中小公司,不代表大公司也這樣)。這需要設計師根據需求文檔的描述,結合產品原型去深度的理解需求,然后再去優化表現層和交互層的設計。否則往往會遇到設計師按照產品原型做出來的其實并非產品想要的情況。這一點很尷尬,這就不得不去返工修改,效率極低,次數多了很容易情緒崩潰。

好溝通的甲方:(打錢爽快)很重要,或者說最重要。要想項目快速的一稿過,其實最重要的是前期和甲方的溝通。有的甲方很容易溝通,只要找出問題并提出可行的有效方案,他會很快get到,并信任你讓你放手去做,只要能解決問題便可。而且會第一時間把錢準備到位(簡直是天使)。反之則是油鹽不進難溝通,不知道自己要什么,需求一天變N次,給錢還磨磨唧唧永遠再走流程那種,這種碰上了只能自求多福了。

 

總結

本文的核心思想其實就是通過UI組件化的方式建立自己的UI組件庫,然后在實際項目中調取可直接復用的部分,減少重復性的勞動,提高工作效率。對開發工程師來說,也有類似的工作思路,即一處設計,多處復用。對大多數勤奮的設計師來說,肩周炎和腱鞘炎是如影相隨的痛苦,因為每天手指和手腕都要承受至少8個多小時的工作強度。我曾經一個人同時負責4個項目,用的設計工具還是效率較低的photoshop,連續2年,雙手出現了嚴重的腱鞘炎,嚴重時只要摸硬物手指就火辣辣的疼,為此連續纏了2年膏藥,然而收效甚微。直到16年學會了sketch以及把UI組件化的工作思路,工作效率提高了一倍不止,省下的時間可以做更多的事情,比如主動的去了解產品相關的知識等,手指手腕的負擔減輕了,腱鞘炎也得到了明顯的好轉。

以上就是我對于UI組件化的一點點心得體會,希望對各位UI設計師有所幫助。有描述錯誤或欠妥的地方還請指出批評,不吝賜教。最后感謝大家閱讀,?( ′???` )比心~

 

原文地址:站酷

作者:MoeDesigner

 

轉載請注明:學UI網 » 10個小時掙10000元?如何用UI組件提高工作效率

登錄收藏
 
你可能喜歡的:
觸摸鍵盤的設計解析 | 智能化工具產品觸摸鍵盤的設計解析 | 智能化工具產品
你對信息架構圖了解多少?你對信息架構圖了解多少?
這4個配色技巧,解決你80%色彩問題這4個配色技巧,解決你80%色彩問題
十萬個為什么設計系列02-內容個性化十萬個為什么設計系列02-內容個性化
騰訊動漫8.0——用戶為本騰訊動漫8.0——用戶為本
蘋果絕對不會告訴你表單設計原則:我研究3年后才發現蘋果絕對不會告訴你表單設計原則:我研究3年后才發現
從4款主流產品中掌握登錄注冊流程從4款主流產品中掌握登錄注冊流程
【新系列】十萬個為什么設計-為什么行為召喚按鈕的位置在右側【新系列】十萬個為什么設計-為什么行為召喚按鈕的位置在右側
你必須知道的8種金剛區的設計樣式你必須知道的8種金剛區的設計樣式
引導設計里被忽略的,那些你所不知道的細節引導設計里被忽略的,那些你所不知道的細節
?
类似钱咖的高额赚钱