Every text style is a component現在,在屏幕中添加文本的時候,必須從UI組件庫中調取相關的文本。為什麼?因為當你進行到設計階段的時候,如果你想要修改所有界面的文本效果,你就可以一次性在組件庫中修改,然後所有內容就都會跟著變化了。這個概念適用於所有組件。
My Airbnb UI library用這個方法建立所有的組件,比如:Buttons, Inputs, Dropdowns, Navbars, Cards, Labels, Footers等等。我一般先在屏幕中設計這些組件,用頁面需要的內容來創建,然後再拖進UI庫中,將其變為組件,最後再拷貝回頁面中。
My Airbnb wireframes在項目結尾時,所有在你設計稿中的元素都應該是一個個Component,這不僅是為了節省工作時間,更是為了保持產品的一致性,這在UI/UX設計中是非常重要的一點。2.為線框圖添加交互在你做好線框圖,創建好UI組件庫之後,現在應該為線框圖添加交互了。幸運的是,Figma可以非常輕鬆的做到這一點。你只需要在Prototype模式下,將元素拖動到它需要鏈接的頁面中就可以了。記住如果鏈接到一個原始組件下,那麼所有的拷貝項都會應用同樣的鏈接,示例如下。
Making the wireframes interactive下一步就是將可交互的線框圖拿給老闆們看,在prototype上直接獲取反饋和意見。3.設計體系風格化一旦你的可交互的線框圖被確認後,現在可以創建風格化的設計體係了。在這一步中,你向UI組件庫中建立的Component加入品牌設計原則、顏色和設計細節等等,然後就可以將你的線框圖轉變為一個高質量的設計原型了。
A style change on a component applies on all its instances我喜歡提前向老闆們展示一些設計規範,在給他們看所有的設計圖之前就針對設計風格來獲取反饋,我還喜歡添加一些UI組件在上面,讓他們看看這些組件是怎麼組合設計的。
A basic UI library for Airbnb4.精打細磨一旦設計風格和規範被確認了,就剩下更精確的打磨UI交互了。接下來需要確認每個元素都在相應的位置,每個交互都鏈接到正確的頁面。而且有些元素可能不是組件,也同樣需要精細化設計,或者需要補充到組件中。確保原型可以正常交互,並且確保所有的鏈接都正常運轉。
My Airbnb prototype最終的原型完成!現在你可以發送鏈接給老闆得到最終的確認了,然後,將其交付給開發人員,告訴他們如何從Figma下載圖片,同時告訴他們還可以直接在原型上標註問題。