教程·手繪(UI設計) | 手機圖示UI設計手繪方法
UI設計指對軟體的人機互動、操作邏輯以及介面美觀性的整體設計,要達到便於搜尋識別、提高工作效率,便於記憶與回想,以及節約螢幕空間的目的。但軟體只是完成創意的一個工具,做好設計師應該從手繪開始,本篇將為大家介紹APP圖示UI設計手繪效果圖的表現技法與步驟。
前期準備:
設計原則
· 易於識別
· 合適的圖示慣例
· 合理的隱喻
· 聯絡上下文
· 差異性
初期考慮
· 圖示適用於什麼電子裝置
· 圖示適用於什麼風格
· 其他方面的設計要求
注意事項
· 要遵循數學規範,確保比例尺寸準確
· 謹慎使用細節和裝飾
· 學習優秀設計,創新出個性風格
· 利用網格提高圖示的一致性
簡單的圖形設計
在初步設計階段,可從簡單的圓形、正方形等圖形開始設計。花、草、字母等都是適合初步設計的簡單元素,且手稿不用特別精緻,如下圖所示。
詳細步驟
本篇教程使用彩鉛顏色的色卡如下圖。
Step 01 用直線畫出正方形,並對4個角進行圓角處理
Step 02 根據比例關係,用2B鉛筆畫出木頭材質圖示的內部結構。
Step 03 新增區域性細節,進一步完善線稿。注意把握好層次感,線條的疊壓關係要準確。
Step 04 用409號彩鉛鋪第一遍顏色,畫出木材的基本色。
Step 05 用414號彩鉛、478號彩鉛加深暗部,加強顏色明暗對比關係,凸顯體積感。
Step 06 用499號彩鉛、459號彩鉛、466號彩鉛、495號彩鉛、476號彩鉛刻畫棋子、植物等剩餘部分的顏色。
Step 07 用478號彩鉛刻畫木頭材質的肌理效果,注意線條不要畫得過重,要有虛實對比。調整畫面,完成繪製。
TIPS
在繪製時,無論形體大小都要時刻注意畫面的明暗對比關係。上圖為木頭材質圖示設計手繪區域性細節刻畫放大圖。