“信息架構(gòu)是將意圖轉(zhuǎn)化為可感知形式的過程,必須先看清全局,再動手搭建局部。”
——《信息架構(gòu):超越Web設(shè)計》
首頁不是設(shè)計“開場動畫”,而是信息的第一道分發(fā)口。
它長得漂亮沒用,走錯一步,用戶直接流失。
做App首頁前,你得畫這三種圖
很多設(shè)計師一上來就開始堆模塊、調(diào)風格,但其實:
信息沒理順,首頁做再多輪都白改。
先畫好這3張圖,再也不怕亂、改、卡思路
01. 內(nèi)容清單(Content Inventory)
目的:你得知道“我手上到底有什么”
把首頁可能出現(xiàn)的所有功能/內(nèi)容列出來,比如:登錄入口、推薦模塊、搜索框、活動banner、常用工具區(qū)……
先不設(shè)計,先看清“原材料”。
書中提醒:“在架構(gòu)信息前,必須先審視現(xiàn)有資源,否則只能是瞎設(shè)計。”
02. 信息地圖(Information Map)
目的:搞清楚“信息之間的邏輯關(guān)系”
將功能/內(nèi)容按主題、優(yōu)先級或使用場景進行分類+排序,畫成一張“信息關(guān)系圖”
比如:
- 搜索模塊 > 連接內(nèi)容頁
- 快捷入口 > 引導核心功能
- banner > 跳轉(zhuǎn)營銷頁
原話指出:“地圖能幫助設(shè)計者理解用戶心智模型與內(nèi)容分發(fā)方式之間的差距。”
03. 信息路徑草圖(Wayfinding Sketch)
目的:確定“用戶在首頁如何移動”
模擬用戶從首頁出發(fā)可能的瀏覽路徑,比如:
- 首次訪問:banner → 注冊 → 功能頁
- 熟練用戶:搜索框 → 內(nèi)容頁
- 想回看某功能:導航欄 → 常用工具區(qū)
這不是UI草圖,是導航行為的動線草圖。
書中強調(diào):“路徑是用戶構(gòu)建意義的方式,他們不是在看首頁,而是在找路。”
小貼士(親測好用):
- 做圖可以手繪,不求美觀,只求理清思路
- 內(nèi)容清單和信息地圖可用Notion或腦圖工具協(xié)作完成
- 別等視覺完稿才調(diào)整,前期圖畫得越清晰,后期越少返工
溫柔收尾
首頁像一座信息大廳,設(shè)計師要當好“動線引導員”而不是“美陳布景師”。
做出真正有用的首頁,得從架構(gòu)圖開始,一步步理清:我們有什么、怎么放、用戶怎么走。
你在設(shè)計首頁時,最容易卡在哪一步?歡迎評論區(qū)暢聊~~
蘭亭妙微(www.x098.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan