鯤育小課堂 UI基礎小知識

網格模式

問題：遇到呈現一系列信息，大多數或者所有信息都由圖片構成，可用於選擇的時候可以用網格模式。

解決方法：陳列顯示一組圖片，基於設備顯示範圍限制，一次只能顯示一部分圖片。

變形處理：

1.信息的呈現和組織沿著一個軸移動（獲得焦點的條目上，同時顯示如標題和日期等文本標籤）

2.把圖片處理排列在平面上，背景可變化（如，桌面）

3.在載入和顯示滾動動效時使用三維效果

4.將縮略圖平鋪在紙或者球面上，類似「無線區域」模式

讓我們來舉個例子~

交互細節：網格中的圖片獲得焦點時可能會使用更多視覺效果。例如：1.稍微放大一點顯示更多細節，2.滾動操作（觸摸手勢，方向鍵或者實時動態）

呈現細節：三維模擬效果，彈出框，幻燈片，位置跳轉，分頁，內部跳轉，走馬燈，內容堆。

錯誤模式：

1.謹慎選擇操作所對應的行為（選擇定義的太簡單，導致關聯行為 等操作變得難以操作）

2.不要讓顯示過於複雜（例如，二維球面網格）

3.只有足夠的屏幕空間和解析度來呈現縮略圖的情況下來使用「網格」模式

4.實時的滾動效果不能實現，避免使用「網格模式」

5.確保在圖片與圖片之間留下足夠間隙。

編輯/鯤育君

GIF/1K

書院簡介

「鯤育」一名，取自《逍遙遊》

「北冥有魚，其名曰鯤。

鯤之大，不知其幾千里也

化而為鳥，其名為鵬。

鵬之背，不知其幾千里也。

怒而飛，其翼若垂天之雲。

互聯網時代風起雲湧，職場技能也是變幻萬千。鯤育核心團隊經歷過軟體時代、互聯網時代、移動互聯網時代，有多年移動互聯網開發運營成功經驗，致力於為職場中迷茫的年輕人提供更有前景的職業發展方向，育化為鯤，展翅高飛！

親，感謝你一路的支持。

現推出新媒體運營

「免費」！

「免費」！

「免費」！

只要你留言，你就能得到免費課程學習，快點關注我們並留言，來領取試聽機會吧！

這是鯤育君良苦用心滴，整理出來噠，我們每天的內容，如果感興趣可以來哦，你要記住這些是免費哦。

目錄

第一天：H5的教學

第二天：PS版式設計

第三天：PS表情包

第四天：產品原型設計

第五天：視頻製作

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！