線框圖實際應用
為了獲得最好的結果,為下一步的 UI 打下堅實的基礎,需要遵循幾個簡單的規則:
1. 顔色的使用
如果線上框圖中使用豐富的配色,可能會分散觀者的注意力,并使更新變得更困難。
Ecommerce Wireframe Kit
2. 使用簡單的元件
線框圖并不包含全面設計和詳細說明的元件。相反它們應該設計的相對簡單,讓團隊成員更容易識别。
Social Wireframe Kit
3. 保持一緻性
在所有線框圖中,類似的元件必須看起來相同。如果相同的元件看起來不同,開發人員可能會質疑它們的功能是否相同,甚至會因為設計不同而增加估算時間。
在處理線框圖時,記住一個簡單的規則:保持一緻,避免造成混淆。
Snap iOS Wireframes
4. 使用真實内容
我們會常看到UI/UX設計師沒有線上框圖上添加真正的内容,而是重複使用同一些文本。這是很少有設計師意識到的普遍錯誤。
Android M Wireframe Kit
5. 使用注釋
設計中可能會遇到某些解決方案無法直覺地加以說明的情況,例如某些控件背後的邏輯,是以開發人員可能會對它們有疑問。
Teracy Wireframe
6. 線框圖程度
線框圖應該選擇低保真還是高保真,沒有嚴格的規定,取決于項目的具體要求
17個熱門類别中的170多種布局的線框套件
7. 将線框圖延伸到互動原型中
在使用不同産品時,有一些簡單而通用的互動,也有一些互動相當複雜。
線上框圖不足以說明複雜性的情況下,可以将線框圖擴充到互動原型中,而不必寫冗長的注釋并花大量時間進行解釋。
線框套件 Sections Wireframe Kit
更多線框圖模闆素材到樂于分享UI資源的搜UI