原型說明咋寫-單選框

0 評論 1322 瀏覽 2 收藏 5 分鐘

開發吐槽原型說明不清晰,領導催促原型要快細節再說,真是夾縫中生存的產品。今天教大家一個方法,既快又全。文末提供模板,可直接用。

步驟一:約定規范

如圖,與開發、UI約定組件規范,并維護在獨立文檔中。

步驟二:使用模板

如圖,Axure可將帶說明的通用組件置入元件庫,出原型時使用;開發看到組件,則使用約定規范;墨刀同理?!綪S:想了解word如何使用,請評論留言哈】

那么,規范與模板應該怎么寫?本系列將通過“通用、輸入、輸出、反饋”四類約43個常用組件及3篇頁面(表單頁、列表頁、詳情頁)寫法,將規范與模板分享予您。強烈建議點個【關注】或【收藏】不迷路。

以下,enjoy~

當前為本系列第6篇,剩40篇。

單選框,適用于在多個互斥的選項中選擇的場景,所有選項默認可見,方便用戶在比較中選擇,因此選項不宜過多。由于選項默認可見,不宜過多。若選擇項超過5項,建議使用下拉選擇器。

一、約定規范

本節為開發與設計師默認要實現的內容;以及產品會通過哪種形式約束哪些參數,通過一份規范文檔維護。

1. 交互規范

基礎狀態及操作

  • + 鼠標移入選項,對應選項呈懸停狀態
  • + 鼠標點擊選項,對應選項切換為選中,點擊范圍為圖標與文字區域
  • – 再次點擊已選中選項,無法取消選中
  • – 已有選中基礎上,點擊其他選項則切換選中
  • + 禁用狀態下,無懸停效果,也無法選中

排版說明

  • +選項之間會隨著選項文字數調整間距,使選項間距始終一致。
  • +在有限橫向范圍內,一行放不下所有選項,則換行顯示。(注:非文字換行)

2. 設計規范

  • +可根據頁面要求,定義選項間距參數等,未定義則使用默認值
  • +可定義樣式有“帶邊框樣式”、“組合按鈕樣式”,未定義則使用默認樣式

3. 可控參數

  • +狀態:默認,可選禁用
  • +可選項:如果可選項數量是固定的,則直接標明,不建議在原型維護選項,因為要照顧排版,比較浪費時間;
  • +默認值:根據實際業務需求來確定,原型說明中需寫明。
  • +操作后置結果:選擇后,將影響關聯數據表數據及關聯控件的使用狀態。

二、產出模板

組件名稱前加個“規范”,便于通過此標識讓團隊知道此組件已編制規范。
  • 組件名稱:單選框
  • +狀態:可用
  • +可選項:選項名1、選項名2
  • +默認值:選項名1
  • +操作后置結果:暫無

結語

本系列持續更新,喜歡的朋友請點個關注】或【收藏】,您的鼓勵是我們持續分享的動力。

本文由 @產品工具庫 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!