繼上篇說了的一些製作界面的主要元件,這次會介紹如何利用那些元件來製作界面;也會說一些製作的流程和一點細節。
繼續閱讀 “界面組件大變身 (實戰篇)"unity-技巧-界面大變身 (基礎篇)
這次說說一件我們開發UI時候,必須處理的事情 — 就是把界面改造成為設計師制定好的樣子;
繼續閱讀 “unity-技巧-界面大變身 (基礎篇)"Unity技巧 #5 – 圖像 Image
次分享的技巧是關於我們製作界面必須使用的Image元件;
內文會分享一些有用功能和需要考慮的細節;
分享的技巧如下:
- Mesh Type: Tight vs FullRect
- 如何令透明位置不會被點擊
- 善用不同的ImageType
- 使用ImageType:Fill來製作進度條
- Image vs Raw Image
- 利用Shader添加特效
Unity技巧 #4 – 界面優化 (UI Optimization)
這次的技巧分享是關於如何優化Unity UI,
這次會分享以下5點:
- 優化相關的數據
- 優化工具: Unity Profile 和 Frame Debugger
- 使用Sprite Atlas
- 找出耗時的邏輯
- 善用UI Canvas
Unity界面技巧 #3 – 文字框 (Text)
這文章會介紹一下在Unity中,5個關於文字框的小技巧;
- 注意字體是否支持Bold/italic
- 如何製造Outline 或 Shadow
- 自動調整大小的文字框
- 文字風格設定
- 使用RichText
建立界面風格規範 (Making UI Style Guide)
我之前做了很多項目,發現很多時候做出來界面感覺不太美觀,要翻改多次才滿意;最近研究界面設計,發現其實我們團隊漏一個蠻重要的步驟,這就是製作"界面風格規範",也是這文章討論的課題;
如果界面設計工作的輸出是不同界面的樣版和界面元素資源, 這一步就是輸入給界面設計工作來把事情做出來。
文章內容:
- 為何需要風格規範
- 如何製作風格規範
- 建立概念
- 界面規範的內容
Unity界面技巧 #2 – 腳本 (Scripting)
這文章會介紹在Unity上製作界面的5個和腳本(Scripting)相關小技巧;
技巧:
- 使用 property 定義界面元件
- 使用 [SerializeField] 取代 public
- 使用 button.onClick.AddListener
- 使用 [Space] [Header] 令 Inspector變得整齊
- 建立自己的視窗控制器 (ViewController)
參考代碼:https://gist.github.com/tklee1975/bb1af2717dcf5d011d028d0195fe03f3
Unity界面技巧#1 – 基本設定
這文章會介紹一下在Unity上製作界面的5個小技巧;
技巧列表:
- 選定一個合適的Pixel Per Unit
- 定義調色盤 (Color Swatches)
- 設定RenderType為Screen Space – Camera
- 設定UICamera的Culling Mask和Clear Flags
- 使用CanvasScaler對應不同大小的界面
關於UX的8件事
在學習界面設計時,很常提及一個詞彙 “UX",也即是用戶體驗;這次的文章會整理一下關於用戶體驗設計(UX Design)的一些知識;
文章重點:
- UX/UI之別
- 了解用戶
- 了解平台
- 了解產品
- 設計體驗
- 設計教程
- 製作Wireframe和User Flow
- 驗證與改進
UIUX筆記:視覺層級之美
最近在研究如何改進界面時,其中一樣最常看到的技巧就是 – 視覺層級(Visual Hierarchy);
這個技巧,也是我以前審核界面也許感受得到,但是沒有研究的東西;
這文章會分享一下Visual Hierarchy相關的知識和例子。
文章大剛:
- 為何需要視覺層級
- 視覺層級元素
- 如何製作視覺層級
- 改造示範