預(yù)約清單ui設(shè)計(jì)

重點(diǎn) (Top highlight)

Over the past few months, my design team at StreetEasy has started experimenting in adding a “design buddy” check-in to the final stages of the design process.

在過(guò)去的幾個(gè)月中，我在StreetEasy的設(shè)計(jì)團(tuán)隊(duì)已開(kāi)始嘗試在設(shè)計(jì)過(guò)程的最后階段添加“設(shè)計(jì)伙伴”簽到項(xiàng) 。

We were inspired by how engineers use pull requests in their workflows. For those unfamiliar, a pull request is a way for a developer to notify team members that they have completed a feature or update.

工程師如何在工作流程中使用拉取請(qǐng)求啟發(fā)了我們。 對(duì)于不熟悉的人，拉取請(qǐng)求是開(kāi)發(fā)人員通知團(tuán)隊(duì)成員他們已完成功能或更新的一種方法。

In addition to notifying, the pull request usually triggers a peer or manager review of the proposed feature. If there are any problems with the changes, teammates can post feedback in the pull request and even tweak the feature by pushing follow-up commits. Once discussion is complete, the project maintainer will merge the feature into the official repository.

除了通知外，拉取請(qǐng)求通常還會(huì)觸發(fā)對(duì)等或管理員對(duì)提議功能的審查。 如果更改有任何問(wèn)題，隊(duì)友可以在拉取請(qǐng)求中發(fā)布反饋，甚至可以通過(guò)推送后續(xù)提交來(lái)調(diào)整功能。 討論完成后，項(xiàng)目維護(hù)者將把功能合并到官方存儲(chǔ)庫(kù)中。

There are many benefits to this model. It makes for easier collaboration, clear documentation of decisions / updates, and important checks.

此模型有很多好處。 它使協(xié)作更容易，決策/更新的清晰文檔以及重要的檢查。

On our team, product designers have ownership in their individual product pods. While we welcome and seek out feedback from other designers on our individual pod work, we haven’t had this level of peer checks.

在我們的團(tuán)隊(duì)中，產(chǎn)品設(shè)計(jì)師在各自的產(chǎn)品包中擁有所有權(quán)。 盡管我們歡迎并尋求其他設(shè)計(jì)師對(duì)我們的個(gè)人吊艙作品的反饋意見(jiàn)，但我們還沒(méi)有達(dá)到這一水平的同行檢查。

We started this process with the goal of ensuring quality and consistency of all designs being shipped. An extra design eye is always helpful to make sure all bases are covered!

我們開(kāi)始這一過(guò)程的目的是確保所發(fā)貨的所有設(shè)計(jì)的質(zhì)量和一致性 。 額外的設(shè)計(jì)眼總是有助于確保覆蓋所有底座！

這是我們實(shí)施“設(shè)計(jì)伙伴檢查”的方式 (Here’s how we implemented the “Design Buddy Check”)

When? As you finalize designs for implementation, reach out to your design buddy (everyone was assigned one person — we may switch every quarter to keep things fresh). After the design buddy check, you are cleared to hot-potato (AKA handoff) with engineers and make any contributions to our feature specs and design system.

什么時(shí)候？ 在最終確定要實(shí)施的設(shè)計(jì)時(shí)，請(qǐng)與您的設(shè)計(jì)伙伴聯(lián)系( 每個(gè)人都分配了一個(gè)人，我們可能每季度切換一次以保持最新?tīng)顟B(tài) )。 設(shè)計(jì)伙伴檢查后，您將與工程師通關(guān)進(jìn)行熱土豆 (AKA交接)工作，并對(duì)我們的功能規(guī)格和設(shè)計(jì)系統(tǒng)做出任何貢獻(xiàn)。

How? In Covid-19 times, this is all done virtually. Share your Figma link with your buddy, and go through it together, using the checklist below. Compare the designs to our Style Guide. Note down new reusable components that could be added to our Design System (more on this process later).

怎么樣？ 在Covid-19時(shí)代，這一切都是虛擬完成的。 與您的好友共享Figma鏈接，并使用下面的清單一起進(jìn)行瀏覽。 將設(shè)計(jì)與我們的風(fēng)格指南進(jìn)行比較。 記下可以添加到我們的設(shè)計(jì)系統(tǒng)中的新可重用組件( 稍后將在此過(guò)程中進(jìn)行更多介紹 )。

The checklist below has been updated to remove any organization-specific checks. Thank you to Lisa Gorn for helping put this checklist together!

下面的清單已更新，以刪除所有組織特定的檢查。 感謝 Lisa Gorn 幫助將此清單合并在一起！

視覺(jué)效果 (Visual)

• Are you using brand colors exclusively?
  您是否僅使用品牌顏色？

• Is relative spacing to UI elements as base unit of 8 (if necessary, 4)?

  UI元素的相對(duì)間距是否為8的基本單位(如有必要，為4)？

• Does your relative spacing match the relative spacing of similar UI elements?
  您的相對(duì)間距是否與相似的UI元素的相對(duì)間距匹配？
• Are you using the right shadow criteria?
  您使用的陰影標(biāo)準(zhǔn)正確嗎？
• Does your icon choice communicate effectively?
  您選擇的圖標(biāo)是否有效溝通？
• Is your icon the right size?
  您的圖標(biāo)尺寸合適嗎？

一致性 (Consistency)

• Do interactions, icons that perform the same actions as others that already exist in the site or app?
  交互，圖標(biāo)執(zhí)行的功能與網(wǎng)站或應(yīng)用程序中已經(jīng)存在的其他圖標(biāo)一樣嗎？
• Are you using the appropriate sizes and elements for desktop vs. mobile web vs. app?
  您是否針對(duì)臺(tái)式機(jī)，移動(dòng)網(wǎng)絡(luò)和應(yīng)用程序使用了適當(dāng)?shù)拇笮『驮?#xff1f;

• Are you using our existing controlled vocabulary for similar actions?

  您是否正在使用我們現(xiàn)有的受控詞匯表執(zhí)行類(lèi)似操作？

  Are you using our existing controlled vocabulary for similar actions?(e.g. close vs. cancel, back vs. go back, view vs. see)

  您是否正在使用我們現(xiàn)有的受控詞匯表執(zhí)行類(lèi)似操作？ (例如，關(guān)閉與取消，返回與返回，查看與查看)

• Are existing patterns being used for similar actions/items?

  現(xiàn)有模式是否用于類(lèi)似的動(dòng)作/項(xiàng)目？

  Are existing patterns being used for similar actions/items?(e.g. text link vs. secondary button, back arrow vs. back link, tooltip vs. exposed helper copy)

  現(xiàn)有模式是否用于類(lèi)似的動(dòng)作/項(xiàng)目？ (例如，文本鏈接與輔助按鈕，后退箭頭與后退鏈接，工具提示與公開(kāi)的幫助程序副本)

• Are you using existing elements / components where appropriate?
  您是否在適當(dāng)?shù)牡胤绞褂矛F(xiàn)有的元素/組件？

• Is your icon placement relative to text appropriate?

  您相對(duì)于文字的圖標(biāo)位置合適嗎？

  Is your icon placement relative to text appropriate?(e.g. left vs. right, case dependent)

  您相對(duì)于文字的圖標(biāo)位置合適嗎？ (例如，左與右，視情況而定)

相互作用 (Interaction)

• Are all states accounted for?

  是否所有州都入帳？

  Are all states accounted for?(e.g. default, touch, hover, disabled, etc)

  是否所有州都入帳？ (例如，默認(rèn)，觸摸，懸停，禁用等)

• Are animation curves and durations for enter, exit, and state change defined?
  是否定義了進(jìn)入，退出和狀態(tài)更改的動(dòng)畫(huà)曲線和持續(xù)時(shí)間？

版式 (Typography)

• Are you using our typography library?
  您在使用我們的排版庫(kù)嗎？
• Are you using heading, body, eyebrow, and helper copy styles correctly?
  您是否正確使用了標(biāo)題，身體，眉毛和輔助復(fù)制樣式？
• Are you using the right colors for the type style that you have chosen?
  您是否為所選的字體樣式使用了正確的顏色？

層次結(jié)構(gòu) (Hierarchy)

• Do the most important UI elements take priority?
  最重要的UI元素優(yōu)先嗎？
• Are you using the correct type elements to communicate hierarchy?
  您是否使用正確的類(lèi)型元素來(lái)傳達(dá)層次結(jié)構(gòu)？

案例 (Cases)

• What happens to text when it gets too long?

  文本過(guò)長(zhǎng)會(huì)如何處理？

  What happens to text when it gets too long?(e.g. truncation, wrapping, etc)

  文本過(guò)長(zhǎng)會(huì)如何處理？ (例如，截?cái)?#xff0c;換行等)

• Are empty states accounted for?
  空國(guó)家占了嗎？
• Are error states accounted for?
  是否考慮了錯(cuò)誤狀態(tài)？
• Are loading states accounted for?
  是否考慮了加載狀態(tài)？

輔助功能最佳做法 (Accessibility Best Practices)

• Ensure the color contrast of text is accessible.

  確保可以訪問(wèn)文本的顏色對(duì)比度。

• Write good alt text for your images. (place in annotations for the engineers)

  為您的圖像寫(xiě)一個(gè)好的替代文本 。 (為工程師添加注釋)

• Don’t indicate important information using color alone. Pair messages with an icon.
  不要僅使用顏色來(lái)表示重要信息。 將消息與圖標(biāo)配對(duì)。
• Don’t indicate state changes using color alone.
  不要僅使用顏色來(lái)指示狀態(tài)變化。
• Always design focus states to help users navigate and understand where they are. At minimum, consider using browser defaults for focus states.
  始終設(shè)計(jì)焦點(diǎn)狀態(tài)以幫助用戶導(dǎo)航并了解他們的位置。 至少應(yīng)考慮將瀏覽器默認(rèn)值用于焦點(diǎn)狀態(tài)。
• Help users understand inputs, and help them avoid and correct mistakes.
  幫助用戶理解輸入，并幫助他們避免和糾正錯(cuò)誤。
• If an experience cannot be made accessible, create another route for users to get that information.
  如果無(wú)法獲得一種體驗(yàn)，請(qǐng)為用戶創(chuàng)建另一條途徑以獲取該信息。
• Place secondary actions inside of menus (or non-modal dialogs), and don’t use hover states to hide the trigger.
  將輔助操作放置在菜單(或非模式對(duì)話框)中，并且不要使用懸停狀態(tài)隱藏觸發(fā)器。

—

-

And that’s it! Let me know your thoughts.

就是這樣！ 讓我知道你的想法。

Do you do a similar quality check in your organization? Are we missing anything in the checklist?

您是否在組織中進(jìn)行過(guò)類(lèi)似的質(zhì)量檢查？ 我們?cè)谇鍐沃羞z漏了什么嗎？

翻譯自: https://uxdesign.cc/the-checklist-streeteasy-uses-to-consistently-ship-quality-design-b30713f4b6b6

預(yù)約清單ui設(shè)計(jì)

總結(jié)

以上是生活随笔為你收集整理的预约清单ui设计_持续交付质量设计所需的UI清单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。