如何根據規範設計一個列表頁面

不知道你有沒有注意過，在使用APP的時候，個人中心介面都是十分簡單的，一般都是一些選項跳轉頁面，這種我們稱之為列表頁面，下面來學習如何設計一個規範的列表頁面。

列表頁面設計

（01）我們以sketch軟體來進行設計，開啟軟體建立一張畫布，尺寸為375*667。

（02）對於導航欄和狀態列來說，系統是有規範的，導航欄高度為44px，字型為18px，在軟體中找個預設的來新增就行了。

（03）一般列表頁面都是有一個返回的，我們可以利用“矩形”工具來繪製一個，你也可以在網上找png格式的透明圖示直接使用。

（04）接著我們給頁面新增一個底色，選擇矩形工具建立375*667的矩形，置於最底層，然後在右側填充中調整下顏色。

（05）接著用矩形工具繪製白色的形狀，當做內容區域，它與導航欄的距離為16px。

（06）接著我們輸入最租車的文字資訊，字號為14px，上下間距和左側間距都是16px，這樣能保證視覺上的統一。

（07）在右側我們一般都是有一個跳轉符號和文字平行，符號的高度為14Px，你可以直接用返回圖示來使用，使用旋轉方向。

（08）選擇“直線”來新增一個新增，這樣我們就製作完成了一條資訊，是不是很熟悉。

（09）利用這個方法來繪製完成所有列表選項，Ctrl+d能夠快速複製。

（10）最後提醒大家一點，在設計的時候，你可以將不同類別的選項用白塊來分開，這樣對於使用者的體驗更換，兩個白塊之間的距離也是16px哦。