先從一個問題開始

手機版不是縮小:重新安排閱讀順序

手機螢幕比較窄,就像把展覽從大廳搬進走廊:不是把所有看板縮小,而是重新決定參觀順序。下面是虛構工作室的教學示例。

01 · 動手試看看

先操作,再觀察

使用下方控制項,觀察畫面或文字如何變化。

可用寬度:文字與圖片並排。

讓餐飲品牌有自己的樣子

從標誌到包裝,整理一致的視覺。

看作品

示範作品區:這裡可以放三件作品與服務範圍。

寬度模擬不等於所有實體手機;「直接縮小」是刻意做得難讀的教學示例。

02 · 帶回自己的網站

手機要重新安排什麼?

先讓人看見主要訊息與下一步,再放支持訊息的圖片。原本左右排列的區塊,到了手機可以上下排列;主標題應自然換行,而不是縮到看不清。

圖片與導覽

重要物件不要被裁掉。導覽收起來時,仍要有清楚的選單入口,並讓觸控區域容易點到。

拿真實內容測試

放入最長的標題、不同數量的作品和放大後的文字。比較工具只是起點,最後仍需要實際手機及真實讀者檢查。

帶走一張決策表:桌機先看什麼?手機先看什麼?哪些區塊必須重排?

回到互動練習 ↑