體驗碎週報第 96 期（2022.5.23）

Opera 瀏覽器選中非當地貨幣的價格後，會自動換算成當地貨幣顯示在文字選擇選單中，點選可直接複製當地貨幣價格到剪貼簿中。

京東歷史訂單提醒囤貨

要是以前看到京東歷史食品訂單提醒我距離上次購買天數和囤貨的提醒，我會覺得京東想錢想瘋了。現在疫情期間看到京東提醒我囤貨，我感到非常溫暖。

體驗槽點

IT 之家置頂資訊

IT 之家的置頂和其他資訊用灰色分割開，但如果剛好置頂有輪播圖又僅有一條置頂資訊的時候，看起來像是一體，會被誤解為輪播圖是置頂資訊的頭圖。

推薦閱讀

那些你分不清的元件：tab、單選框、選單

連結： https://mp.weixin.qq.com/s/m3BUtXOmr9F2pwDWL7eMAg

這篇文章首先把 tab、單選框、選單的來龍去脈講清楚了，最後針對元件的使用場景發表自己的結論：

• 不要製造沒必要的規矩
• 對於絕大多數場景比較簡單的產品，選單/單選/tab不區分也無所謂
• 對於複雜工具型/企業級產品，無論是移動端還是PC/Web，最好區分操作/資訊展示控制元件，嚴格區分單選和tab的樣式。

體驗設計師與競品分析的那些事

連結： https://mp.weixin.qq.com/s/900JRQCzear-pcOfLYOL6A

競品分析是設計工作中不可或缺的一部分，本文將分享競品分析的作用與方法，幫助設計師們快速找到優質競品並快速分析。

為了讓自身設計方案能夠短時間能更好對標頭部產品，在競品分析過程中一共分為如下三個步驟：

1. 選競品：通過使用人群與功能型別選擇頭部公司的直接競品與間接競品；
2. 分析競品：運用表格法、打鉤法、流程對標法等分析工具進行分析；
3. 產出結論：如果需要彙報，將怎麼選競品、分析過程完整地進行闡述，然後寫出言簡意賅的幾句核心結論；如果是個人使用，將關鍵截圖與結論放置在設計文件一旁作為記錄即可.

Macintosh ：38 年之前的故事

連結： https://sspai.com/post/73310

Macintosh 是如今 Mac 系列的鼻祖，喬布斯主導設計的電腦。Macintosh 以其大膽簡潔的外觀設計，友好的圖形介面，在當時轟動業界。這篇文章通過史料拼湊還原出 Macintosh 誕生的傳奇過程。

【手把手】教你從 0 到 1 做一個上傳菜譜的互動流程與原型設計

連結： https://mp.weixin.qq.com/s/9utWR4PqWdndYyNOA1kknA

一篇非常基礎的互動流程與原型設計的文章，值得稱道的是每個步驟思路講得很清楚。

瞭解這 9 種互動機制，不怕跟開發相愛相殺了

連結： https://mp.weixin.qq.com/s/KDg5ZnioKqLL048ni-J0mQ

本文盤點一些常見的互動機制，包括：刪除、中斷、顯示、載入、排序、重新整理、快取、推送（push）。

Apple 人機介面指南的 36 個見解！

連結： https://mp.weixin.qq.com/s/9pvAXT8pMtqN58aRMfcBLw

Apple 為所有為 Apple 產品設計的設計師制定了指導方針，告訴他們如何做才能使應用程式對任何特定裝置或軟體更有用，他們稱之為人機介面指南。本文總結 iOS、macOS、watchOS 人機指南中核心的 36 個觀點。

工具資源

Figma Auto Layout 4.0 Playground (簡體中文翻譯)

連結： https://www.figma.com/community/file/1107713567093326863

每次 Figma 進行大功能更新都會推出官方 Playground 供大家練習，這次 Auto Layout 4.0 更新非常大，這裡有份翻譯為中文的 Playground 可用來學習。

Wireframer —— Figma 佔位符生成外掛

連結： https://www.figma.com/community/plugin/787660853629435276/Wireframer

你可以通過這個外掛生成很酷、很獨特的 SVG 佔位符，放線上框圖中。

HMI 體驗設計資源彙總

連結： https://nextjs-notion-starter-kit-b5c64eg8p-jackywine.vercel.app/hmi

Figma Tokens —— Figma Design Token 外掛

https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

支援的 Token 包括：

• 顏色（填充、邊框顏色 —— HEX、RGBA、HSLA）
• 間距（水平、垂直、間隙）
• 尺寸（寬、高）
• 圓角（單獨或全部）
• 邊框寬度
• 透明度
• 字型（Font family、字重、字型大小、行高、行間距、字間距、段間距）
• 陰影（包括內陰影和外陰影）

《設計領導手冊》中文版

連結：連結: https://pan.baidu.com/s/1xuQMt6VSuVqM7vRHToyG7A?pwd=qvcs 提取碼: qvcs

InVision 設計教育副總裁 Aarron Walter 和 MailChimp 設計團隊創始人 Eli Woolery 編寫的手冊，這本書將幫助你找到自己作為領導者的定位以及獲得自信，同時從那些設計領導力專家那裡學習戰術方法，這樣你就可以支援你的團隊，推進你的職業發展。

貝克街的設計師 將這本手冊翻譯成中文版供大家下載學習。

Side Project 指南

連結： https://sideproject.guide

工作之餘，很多程式設計師喜歡用程式碼建造一些小工具。有時候是為了解決一些自己或者朋友遇到的小問題，有時候是為了好玩兒。通常稱之為 Side Project（業餘專案）。這份手冊總結如何判斷一個點子的好壞，如何快速實現，如何傳播，幫助你用 Side Project 成功賺到錢。

產品發現

MagicPip —— 在 iOS 畫中畫展示其他內容

連結： https://apps.apple.com/app/id1613046504

最近網易雲音樂宣佈 iOS 版本支援桌面歌詞，原理是把歌詞做成影片然後利用 iOS 畫中畫功能，在桌面顯示歌詞影片。

既然可以把其他檔案轉換成影片利用畫中畫在桌面播放，那騷操作就來了。MagicPip 這款工具能把 txt、PDF、圖片、網頁通過 iOS 畫中畫顯示。

海綿樂隊 —— 位元組跳動推出的音訊剪輯 App

這是一款手機端的行動式音訊創作工具，在實現傳統的錄音、效果器同時，引入大量 AI 智慧來協助創作，降低使用難度，提高創作趣味和效率。此產品將更好的服務於汽水音樂和抖音上對音樂編輯有所需求的使用者。

acapela —— 工作通知聚合

連結： https://acapela.com

工作中往往需要在不同的軟體裡檢視通知提醒，這樣頻繁打斷注意力很疲勞。這款工具能將 Slack、 Notion、 GitHub、Figma、Jira、Linear 等工作軟體的通知聚合在一起，便於統一處理。

泡麵蓋子 4 Kindle

連結： https://pmgz.jichao.top

Kindle 因為買來經常吃灰，被網友戲稱為“只能做泡麵蓋子”。於是就真有網友做了個適配 Kinde 的泡麵倒計時提醒網頁。

來自 @蟻工廠

我的第一個 NFT

連結： https://myfirstnft.info

一個公益科普網頁，可以在上面學習 Web3、區塊鏈的概念、NFT 的價值和一些安全知識，最後可以鑄造了一個免費的 NFT 來當頭像。

Liuli —— 一站式構建多源、乾淨、個性化的閱讀環境

連結： https://github.com/liuli-io/liuli

具備四大模組實現自定義閱讀環境。

• 採集器 ：監控各自關注的公眾號、書籍或者部落格源等自定義閱讀源，以統一標準格式流入 Liuli 作為輸入源；
• 處理器 ：對目標內容進行自定義處理，如基於歷史廣告資料，利用機器學習實現一個廣告分類器自動打標籤，或者引入鉤子函式在相關節點執行等；
• 分發器 ：依靠介面層進行資料請求&響應，為使用者提供個性化配置，然後根據配置自動進行分發，將乾淨的文章流向微信、釘釘、TG、RSS 客戶端甚至自建網站；
• 備份器 ：將處理後的文章進行備份，如持久化到資料庫或者 GitHub 等。

支付寶螞蟻森林內測「神奇海洋」

支付寶的螞蟻森林既激勵使用者使用支付寶，也真的在大西北種樹環保，是商業和公益的經典案例。最近支付寶在內測「神奇海洋」，本質和螞蟻森林一樣，只是玩法和環保模式改成培育海域植物 + 清理海域垃圾海洋。

相關資訊

The iOS App Icon Book 已發貨

連結： https://www.appiconbook.com/

之前在 Kickstarter 眾籌 1400+ 的 The iOS App Icon Book，售價 60 英鎊（人民幣 400 多元）。150 頁，很多經典 icon 都有收錄（經過授權和高清檔案提供），把早年 iOS 的 icon 設計十年黃金時代，用印刷的方式記錄下來。這兩天看到 Twitter 上不少收到貨晒單的。

來自 @劉英滕

網路劇片發行許可證標誌亮相

連結： https://mp.weixin.qq.com/s/aeM2UpHU30VqybWZTphRVw

近年來隨著流媒體的迅速發展，網路電影、網路電視劇開始受到觀眾的追捧。廣電總局為網劇制定的發行許可證 LOGO，就像院線電影片頭的龍標一樣。網劇標的核心部分由篆體字「網路視聽」四個字組成。

微軟為殘疾人設計多款自適應滑鼠和按鈕

連結： https://news.microsoft.com/ability-summit-2022/

微軟在 2022 年 5 月舉辦微軟能力峰會（Microsoft Ability Summit 2022），該峰會旨在加強對包容性技術的關注。微軟為此釋出了多款適合殘疾人使用的自適應滑鼠和按鈕，這些硬體將於今年秋季開售。