莫b
界面清單(interface inventories)也就是把自己將要做的組件、模塊都列出來找到參考并截圖分類,方便打開自己的設計思路、統一設計風格。

 

問題的開始

在開始我剛開始后臺設計的時候,因為有了像 Ant Design,Element等這些優秀的團隊所貢獻的規范指導,剛開始后臺搭建的時候往往會覺得很簡單,但是隨著后臺項目所涉及的功能增加,使用其他平臺現成的組件進行照搬根本就沒辦法解決自己現在的問題,而此時項目往往已經開始了一段時間了,現在再重新做實在有些來不及,只能各種尋找類似的組件搭建出一個令自己不是很滿意的界面。
圖片來源于網絡
怎么去解決這樣的困境呢?在學習原子設計(Atomic Design)的時候,里面所講述列界面清單的方法一定會對你有所幫助。

 

準備工作

制作一個界面清單會產生許多的截圖,選擇你常用的工具就行。我通常會用 Sketch 進行排列。
工具使用什么都行,主要看它是否利于截圖的查看和分類整理。
圖片來源《Atomic Design》

 

列出清單

在開始前,你需要盡可能多的把自己要做的項目中的界面元素盡可能全的列舉出來。你可以先從大的類別開始,還記得原子設計中之前說過的界面的構成元素么?
原子、分子、有機體、模版、頁面

 

原子是在構成頁面時最基本和最小的單位,,例如:顏色、文字、圖標、分割線等。我們將幾個原子組合起來便形成了分子,也就是在頁面中所出現相對簡單的組件例如:按鈕、輸入欄、導航欄、搜索框等。當原子和分子組合排列就會得到有機體,它是界面中相對復雜的組件。而模版就是將上面提到過的原子、分子、有機體都排列組合起來,將它們分層放置在布局中。最后將真實的數據、狀態應用到模版中去,就形成了我們所使用的頁面。
圖片來源《Atomic Design》

 

從大的類別開始然后往下拆分,比如你可以試著從這些方面入手:
  • 通用組件:在整個系統中通用的組件,如頁眉,頁腳等。
  • 導航:頭部導航,頁腳導航,分頁導航等,只要是能用于用戶界面導航的任何東西。
  • 圖像:logo的擺放,首頁大圖的鋪開方式,用戶頭像,縮略圖,背景,在界面中顯示的任何其他類型的圖像模式。
  • ?圖標:不同的風格或者是你之后會用到的特殊行業的圖標,不管是首頁、上傳、確定、發現、搜索等等。
  • 表單:輸入,文本區域,選擇菜單,復選框,開關,單選按鈕,滑塊和其他一切形式的用戶輸入。
  • 按鈕:主要按鈕,次要按鈕,大按鈕,小按鈕,禁用按鈕,活動,加載,甚至看起來像文本鏈接的按鈕。
  • 標題:有 h1 , h2 , h3 , h4 , h5 , h6和排版標題的變體。
  • 列表:列表類型的格式是以無序的,有序的,定義,項目符號,編號,線框表,條紋表,或任何組元素呈現的。
  • 媒體:視頻播放器,音頻播放器和其他多媒體元素。
  • 第三方組件:窗口小部件,內部框架,對話框,分享,任何未在你的域名上托管的組件。
  • 廣告:所有的廣告類型和尺寸。
  • 消息:警示,成功,錯誤,警告,驗證,加載,彈出窗口,工具提示等。
  • 顏色:收集界面中呈現的所有種類的顏色。
  • 交互動效:如移動,淡化,抖動,轉換或閃爍的任何UI元素,截圖不方便的話可以選擇錄屏。
  • 交互式組件:折疊面板,Tab標簽,輪播圖,和其他具有移動部件的功能模塊。
以上所列舉的并不是固定的,開始分類的時候一定要注意好好理解項目,根據你要做的項目來制定清單列表。當你所需要的清單都完成了之后,你就要好好審視一下:有哪些樣式保留,哪些應該去除,哪些樣式可以合并?哪些參考是我們可以使用的組件模式,哪些組件是可以借鑒的?有沒有可以優化的交互方式,或者哪些交互可以用在自己的項目中?
各個按鈕的樣式和狀態? 來源《Atomic Design》

 

審視完界面清單以后,就要準備選出自己需要用到的模塊和組件好復用在自己的界面設計中。這一個過程就像是搭樂高積木一樣,收集、整理、組裝。
圖片來源《Atomic Design》

 

注意事項

很多時候我們去找參考,素材找的越多越不知道自己要做什么。這時候一定要記得回想一下我們剛開始所設定的風格規則,想想我們是要用卡片的還是描邊的,是間距大的還是緊湊的。邊找素材邊提醒自己:這個界面雖然好看,但它不符合我開始設定的規則。
圖片來源于網絡

 

還有就是一定要注意時間,不要貪多!大致看一眼參考和自己設定的風格一樣就可以留下來不要想其他。每一個類別花40-70 分鐘就已經夠了。截圖的時候你可以試著給自己設定一個鬧鐘,后面我們還會對截圖進行篩選所以不要在這一步花太多時間。
圖片來源于網絡

 

關于界面清單

在我們剛開始學習美術的時候,都是從臨摹開始的,沒有一開始就選擇進行創作的。通過臨摹一點一點的打牢基礎,有了扎實的基礎才進行下一步的學習。
我覺得設計也是一樣的,沒有說突然間有了快速設計界面的方法,羅馬不是一夜建成的一步一步來,看下別人用的什么方法和樣式,尤其對于 UI設計來說借鑒成熟的設計模式能讓你成長的更快。剛開始制作界面清單的時候會比較困難,但你堅持下去從現有的截圖中找到規律,為你后面構建一個完善的界面打下牢固的基礎。
圖片來源于網絡

 

參考文獻:
https://wenku.baidu.com/view/53a0322759fb770bf78a6529647d27284b7337a3.html《原子設計》

 

原文地址:海鹽社(公眾號)
作者:劉清

轉載請注明:學UI網 » 界面清單-幫你打開設計思路

登錄收藏
 
你可能喜歡的:
運營專題高效設計法(下)運營專題高效設計法(下)
看看你的手機鍵盤,隱藏了多少設計細節?看看你的手機鍵盤,隱藏了多少設計細節?
原來折疊屏是這樣設計適配的(附案例實戰)原來折疊屏是這樣設計適配的(附案例實戰)
Apple 的設計哲學 · UI 篇Apple 的設計哲學 · UI 篇
騰訊動漫7.0—陪伴騰訊動漫7.0—陪伴
數據可視化設計 - 3D粒子模型科技感動效【進階教程】數據可視化設計 – 3D粒子模型科技感動效【進階教程】
設計沉思錄|58部落品牌視覺升級設計沉思錄|58部落品牌視覺升級
關于基金申購流程的一些思考關于基金申購流程的一些思考
設計沉思錄|美事升級,不止于改版設計沉思錄|美事升級,不止于改版
漫畫內容設計之專題三板斧漫畫內容設計之專題三板斧
?
江苏11选五今天开结果查询 有多少人配资交易期 秒速赛车官方网站开奖 体彩山西11选5玩法 广西快乐十分每天开奖结果 航天动力股票行情 贵州十一选五基本走势图 炒股软件 贵州十一选五玩法 天津11选5顺口溜 快中彩中奖规则 幸运28是怎么坑人的 湖北福彩官方网站 云南11选5定位走势图 上证指数年线图分析 福彩湖北快3投注技巧 新手怎样炒股入门知识