一張合格草圖范本 ver.1.0.1
時間：2023-09-28 09:36:01 | 來源：網(wǎng)站運營
時間：2023-09-28 09:36:01 來源：網(wǎng)站運營
一張合格草圖范本 ver.1.0.1：
【摘要】以更淺顯易懂的方式了解一張合格的草圖必備內(nèi)容體系，讓草圖繪制不再成為阻礙。
【作者】白金
【重構建議】參考文獻，增加之前關于草圖的所有文章，比如 田甜：精準交付的核心-草圖設計
1.草圖階段是什么？
如圖所示，草圖階段作為程序設計中的第二個階段，奠定了整個程序設計的頁面布局、展示字段、功能、跳轉邏輯等信息。草圖能夠體現(xiàn)客戶本身對于產(chǎn)品的理解，因此，我們推薦您提供符合要求的頁面草圖，闡述自己對于產(chǎn)品本身的期望，以便于設計師實現(xiàn)高保真設計稿。
2.一張草圖頁面的布局是什么？
準確來說，頁面布局指的是界面中UI元素所占的比例。它是抽象思維的具像表達，是把思維變?yōu)榭梢暬牡谝徊?。在繪制草圖初期，我們需要明白哪些大的信息需要我們體現(xiàn)在草圖內(nèi)，并且進一步明確其在頁面中所占的比重。重要的部分所占比重通常會更大一些，它們更加醒目，更容易被用戶所發(fā)現(xiàn)。在初步思考下，通過鉛筆的初步勾勒，繪制出符合自己預期的布局結構，就算是有些粗糙也毫無關系。
3.字段信息在草圖中的重要性
如果說頁面布局是形式上抽象思維具象化，那么字段信息便是將想法落地到實處的鑰匙。字段是具體的，它和項目本身密切聯(lián)系，通過文字信息把需要體現(xiàn)的功能點在草圖中展示出來。它們可能是固定文本，可能是時間，也可能是狀態(tài)。但無論是哪種形式，字段的存在都直觀說明了需要在草圖中顯示的具體信息。
如果你在確定了頁面布局的前提下，進一步明確了頁面中需要體現(xiàn)的字段信息...恭喜你！現(xiàn)在只需要將它們組合起來，在合適的布局模塊里放入對應的字段，一個完整的模塊草圖將會呈現(xiàn)在你面前。
4.頁面之間的邏輯跳轉關系
一個完整的系統(tǒng)體系并不僅僅只有一張頁面，它往往是由多張不同的頁面組成的。這些頁面相互之間有層級關系，父級頁面中包含多個子級頁面的入口，點擊后方可跳轉至子級頁面(二級頁面)。而作為子級頁面，同樣存在返回父級頁面的按鈕。這種相輔相成的關系，也就是頁面間的邏輯跳轉關系。一套完整的草圖，應該清晰表達出頁面之間的跳轉關系。他們觸發(fā)跳轉的媒介，可以是按鈕，可以是特定觸摸區(qū)域，總之，只要有點擊的地方，都會有一個頁面(或事件)與之對應。
就像樹狀圖那樣，不同草圖頁面間通過邏輯跳轉建立起關系網(wǎng)，組合成一個閉合的完整系統(tǒng)。清晰標注草圖頁面中每一個可交互元素的目標跳轉頁面，這將有助于理解整套界面的運作方式，使得不同頁面間的關系清晰，透明。
5.字段和頁面功能間的對應關系
6.為什么說改動草圖字段布局會帶來變動成本
歡迎關注 技術團隊的本站賬號 我們憑團隊實例運作以下專欄， 必須干貨！
互聯(lián)網(wǎng)創(chuàng)業(yè)專欄 (我們小伙伴的創(chuàng)業(yè)歷程)
與您一起聊技術 (APP、微信公眾號、小程序、H5 技術總結)
互聯(lián)網(wǎng)產(chǎn)品研發(fā)管理 (我們公司對產(chǎn)品結構的管理思路)
產(chǎn)品君的案例庫（產(chǎn)品小伙伴深刻總結）
在線咨詢