<object id="ggqic"></object>
<samp id="ggqic"></samp>
2020 年，新冠疫情席卷全球，后疫情時(shí)代的需求也促使設(shè)計(jì)師們不斷提出更有意義的醫(yī)療解決方案。作者梳理了醫(yī)療保健類 APP 的類型，從產(chǎn)品的研究、功能特性、導(dǎo)航、顏色等角度提出了針對醫(yī)療保健 APP 的一系列設(shè)計(jì)建議，簡單直觀的界面、便捷的功能，以及積極的情感，才能使用戶接受并喜歡原本 “令人生畏” 的醫(yī)療產(chǎn)品。
△ Justas Galaburda 繪制的插畫
在移動(dòng)應(yīng)用市場中，的應(yīng)用類別是 “游戲”，而 “健康與健身” 類勉強(qiáng)躋身前十名。2020 年是十分艱難的一年，但也創(chuàng)造了很多機(jī)會(huì)，例如，移動(dòng)應(yīng)用市場中醫(yī)療行業(yè)的產(chǎn)品大熱，受到多方關(guān)注，這類產(chǎn)品直接影響人們的健康行為，可以使人們的生活更加輕松愉快。
為此，大批創(chuàng)業(yè)人士開始關(guān)注醫(yī)療這一領(lǐng)域。首先，你需要制作一個(gè)功能強(qiáng)大的 APP，因?yàn)槿绻豢町a(chǎn)品不能交付使用的話，它就一文不值。但是，這種功能必須通過設(shè)計(jì)能力來呈現(xiàn)。一個(gè)好的醫(yī)療保健 APP 設(shè)計(jì)，應(yīng)突出其最重要的細(xì)節(jié)，引導(dǎo)用戶進(jìn)行操作，并提出下一步建議，從而產(chǎn)生必要的行動(dòng)。APP 本身可以成為有效的潛在客戶開發(fā)工具和公司的主要產(chǎn)品。對于一個(gè)健康或醫(yī)學(xué)相關(guān)的產(chǎn)品來說，用戶界面或用戶體驗(yàn)設(shè)計(jì)尤為重要。
△ George Frigo 設(shè)計(jì)的呼吸檢測 APP
本文將探討一些醫(yī)療保建 APP 設(shè)計(jì)的成功案例和經(jīng)驗(yàn)，這對設(shè)計(jì)師和企業(yè)來說都很有幫助。
值得注意的是，“醫(yī)療保健類 APP” 是一個(gè)綜合性概念，涵蓋了許多與健康和醫(yī)學(xué)相關(guān)的數(shù)字產(chǎn)品。
醫(yī)療保健 APP 類型很多，包括但不限于：
這似乎是一個(gè)相當(dāng)寬泛的主題（例如，卡路里計(jì)數(shù) APP 和醫(yī)學(xué)教育解決方案相差甚遠(yuǎn)，卻都屬于這個(gè)領(lǐng)域）。但是，有一些通用的設(shè)計(jì)方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移動(dòng)醫(yī)療或移動(dòng)健康）：通過移動(dòng)設(shè)備提供與醫(yī)療相關(guān)的服務(wù)，例如，通過 PDA、移動(dòng)電話和衛(wèi)星通信來提供醫(yī)療信息和醫(yī)療服務(wù)等。）
△Victor Nikitin 的醫(yī)療類 APP
一款 APP，即使它不是企業(yè)的主要產(chǎn)品，也可能具有巨大的價(jià)值。例如，用于醫(yī)療工作的配套 APP，能夠?yàn)榭蛻籼峁┬畔⒑头?wù)，從而減輕員工的負(fù)擔(dān)。如果一款醫(yī)療保健類 APP 是企業(yè)的主要產(chǎn)品（例如，健身或冥想 APP），因?yàn)闆]有硬核的業(yè)務(wù)場景支持，會(huì)有很大的風(fēng)險(xiǎn)。有時(shí)，這類 APP 設(shè)計(jì)中的不足會(huì)導(dǎo)致用戶完全放棄使用它。
為了避免這種情況，我們來看看設(shè)計(jì)醫(yī)療保健 APP 的 12 個(gè)要點(diǎn)，以及它們?nèi)绾螏椭O(shè)計(jì)師們設(shè)計(jì)出更具針對性、更直觀、更的 APP。
△ Anatoly 設(shè)計(jì)的 Healthcare APP
1. 研究 – 成功的第一步
在制作 APP 界面原型之前，你需要了解產(chǎn)品的目標(biāo)受眾是誰，他們的地理分布、社會(huì)人口特征以及心理特征是什么。因?yàn)闆]有一種產(chǎn)品可以滿足所有人的需求。用戶的興趣和能力決定了他們?nèi)绾闻c APP 進(jìn)行交互。因此，回答以下問題將對你有所幫助：
一般來說，患者和醫(yī)生都會(huì)使用醫(yī)療保健類 APP（假設(shè)我們將生活方式類 APP 的用戶也視為患者）。這兩類用戶在功能和 UI 設(shè)計(jì)方面有不同的需求。
醫(yī)務(wù)人員通常需要快速找到一些數(shù)據(jù)項(xiàng)，例如 EHR / EMR、藥物規(guī)格、診斷和治療建議、參考材料等。但是，患者希望能與盡可能少的信息進(jìn)行交互，且這些信息應(yīng)該簡單易懂。因?yàn)檫@類用戶中有很多是老年人，或是存在某些障礙的人。
只有在進(jìn)行適當(dāng)?shù)挠脩粞芯?，并得出相?yīng)結(jié)論后，設(shè)計(jì)師才可以著手進(jìn)行醫(yī)療保健類 APP 的設(shè)計(jì)。
△ Chahua 設(shè)計(jì)的健康管理 APP
2. 每一個(gè)案例都簡潔明了
對于一般人來說，醫(yī)學(xué)是一門復(fù)雜的學(xué)科。所以在設(shè)計(jì)醫(yī)療保健類 APP 時(shí)，請盡可能地讓它們保持簡單，這有助于讓用戶平靜下來，并保持專注。
“復(fù)雜性是你的敵人。很多傻瓜都可以讓事情變復(fù)雜，而讓事情變簡單是很困難的?！?— 理查德·布蘭森
為了讓醫(yī)療類 APP 看起來很重要并給人留下深刻印象，而將其界面做得過于詳細(xì)，是沒有意義的。即使該產(chǎn)品是為醫(yī)務(wù)人員設(shè)計(jì)的，也最好 讓界面和邏輯易于理解。
△ lgor Savelev 設(shè)計(jì)的醫(yī)療類 APP
在設(shè)計(jì)醫(yī)療保健類 APP 的用戶界面時(shí)，請?zhí)峁┯幸饬x的用戶引導(dǎo)，并 使界面直觀易懂。否則，用戶可能會(huì)在觸達(dá)該應(yīng)用核心內(nèi)容之前就對其體驗(yàn)感到沮喪。
如果該 APP 清晰明了，醫(yī)生及患者雙方都更容易接受。這樣一來，用戶易于學(xué)習(xí)上手。即使它是針對醫(yī)療的解決方案，人們也不會(huì)感到不習(xí)慣。
為幫助用戶在比較舒適的節(jié)奏下了解產(chǎn)品功能，請使用漸進(jìn)呈現(xiàn)的原則，逐步為用戶提供指示。從新手指引開始，將應(yīng)用程序中的每個(gè)操作分成可管理的小模塊，每次僅提供一個(gè)指引。（漸進(jìn)呈現(xiàn)（progressive disclosure）：每次只展示用戶當(dāng)前需要的信息，引導(dǎo)人們平緩地由簡單狀態(tài)進(jìn)入復(fù)雜狀態(tài)。例如將原本復(fù)雜的邏輯隱藏起來，通過更易于認(rèn)知的界面形式幫助人們輕松完成最為基礎(chǔ)的任務(wù)。）
另外，采用被動(dòng)輸入、自動(dòng)輸入、調(diào)整鍵盤和動(dòng)態(tài)驗(yàn)證字段的方式，能夠限制用戶必須輸入的信息量。
所有醫(yī)療信息必須由受過相關(guān)教育且具備專業(yè)知識的專家提供。否則，內(nèi)容要么不完整，要么包含錯(cuò)誤，對于醫(yī)療產(chǎn)品來說是不可接受的。
△ yurig 為醫(yī)生設(shè)計(jì)的醫(yī)療類 APP
3. 功能和特性
醫(yī)療保健類 APP 的 功能及特性取決于其用途和目標(biāo)受眾。例如，醫(yī)療中心 APP 需為用戶提供個(gè)人帳戶，在該帳戶中，用戶可查看其就診記錄、就診建議以及預(yù)約情況。如果沒有安全加密的視頻會(huì)議和通訊功能，遠(yuǎn)程醫(yī)療 APP 將毫無意義。畢竟醫(yī)療類 APP 依賴的是可靠且有用的通知。
主頁承載著一個(gè) APP 的主要功能。請?jiān)囍卮疬@個(gè)問題：用戶為什么使用你的 APP？或與之類似的 APP 呢？如果用戶訪問 APP 是為了記錄或接收某些信息，或是聯(lián)系醫(yī)生，查看他們的進(jìn)程等，那么這個(gè)功能應(yīng)該位于 APP 的主頁。
重要的是，正如前文所提到的，避免一次性出現(xiàn)太多功能，從而造成混亂。不可否認(rèn)的是，這種情況經(jīng)常發(fā)生在老版本的 APP 上。這些 APP 常常不斷添加新功能，偏離焦點(diǎn)，以至于只有專家用戶才能理解它。
（專家用戶（super-users）：專家用戶在生活中愿意給予企業(yè)反饋，主動(dòng)做口碑，或是積極分享、點(diǎn)贊等，這些無法以價(jià)錢衡量，卻能在品牌價(jià)值傳遞、產(chǎn)品創(chuàng)新、營銷推廣等經(jīng)營各環(huán)節(jié)，為企業(yè)帶來實(shí)質(zhì)貢獻(xiàn)。）
根據(jù)帕累托原理（二八法則），80％ 的用戶傾向于使用不超過 20％ 的功能。因此，務(wù)必確認(rèn)哪些功能對用戶來說是最重要的。
（帕累托原理（ Pareto’s principle）：也稱二八法則。在任何特定群體中，重要的因子通常只占少數(shù)，因此控制具有重要性的少數(shù)因子，即可控制全局。）
△ Manoj Dalvadi 設(shè)計(jì)的 Medicine APP
4. 便于探索與享受的導(dǎo)航
清晰的導(dǎo)航結(jié)構(gòu)是一個(gè)有效的醫(yī)療保健類 APP 的必要條件，也是醫(yī)療保健類 APP 用戶界面設(shè)計(jì)的基礎(chǔ)。沒有清晰的導(dǎo)航，APP 是不會(huì)被廣泛使用的。完善的導(dǎo)航意味著率和易用性，這對用戶來說是十分有價(jià)值的。醫(yī)療專業(yè)人士需要的是能夠快速開展工作的應(yīng)用，因?yàn)樗麄兓ㄙM(fèi)了太多時(shí)間在處理電子健康檔案（EHR）上。一項(xiàng)由斯坦福醫(yī)學(xué)院展開的調(diào)查發(fā)現(xiàn)，醫(yī)生花費(fèi)在每個(gè)病人身上的時(shí)間，有 62% 是用于處理電子健康檔案。如果針對醫(yī)務(wù)人員的 APP 不夠簡潔，那 APP 便失去了使用價(jià)值。同樣的，對于患者來說，他們也不會(huì)喜歡混亂的導(dǎo)航，即使當(dāng)前的任務(wù)不是很重要。
重要的信息應(yīng)放在明顯的位置，并在必要時(shí)提供詳情。根據(jù) 3 次點(diǎn)擊原則，系統(tǒng)應(yīng)保證用戶在 3 次點(diǎn)擊之內(nèi)，找到所需信息。
為了使 APP 導(dǎo)航結(jié)構(gòu)清晰，可采用標(biāo)準(zhǔn)的 APP 導(dǎo)航組件，如漢堡菜單、標(biāo)簽欄或抽屜式導(dǎo)航等。
△ Alex Samofalov 設(shè)計(jì)的醫(yī)療類 APP
一般來說，APP 的顏色選擇取決于目標(biāo)受眾以及該 APP 的主題。
醫(yī)療保健類 APP 設(shè)計(jì)通常采用中性色調(diào)，尤其是冷色調(diào)的藍(lán)色和綠色，背景一般為 白色。設(shè)計(jì)師這樣做是為了達(dá)到以下效果：利用柔和的色彩和醫(yī)療保健行業(yè)的聯(lián)系，緩解用戶焦慮并增加可信度。因此，在醫(yī)療保健類 APP 的用戶界面中，亮紅色或黃色是很少見的。
△ Adam Soko?owski 設(shè)計(jì)的醫(yī)療類 APP — Pharmagy
但是，考慮到醫(yī)療類軟件的多功能性，顏色選擇并沒有特別的限制。主要思路是，這類 APP 的整體外觀應(yīng)營造積極的印象，不應(yīng)引起焦慮、恐懼或其他不良情緒。
例如，深色的健身 APP 看起來優(yōu)雅且有品味：
△ Saepul Rohman 的 UI 設(shè)計(jì)—健康及鍛煉類 APP
而亮色為 APP 增添了許多活力：
△ Michal Parulski 設(shè)計(jì)的移動(dòng)健身 APP
APP 的個(gè)性化定制是近年來最顯著的設(shè)計(jì)趨勢之一。特定的功能與特定的用戶模式相適應(yīng)，并且系統(tǒng)會(huì)暗示用戶下一步可執(zhí)行的操作，以免被用戶忽略。
這些技術(shù)的目標(biāo)是，幫助用戶更快地利用 APP 解決問題。因此，有必要識別和分析用戶模式，并跟進(jìn)他們的變化。
正如每個(gè)人都有著不同的健康狀況，用戶希望他們所使用的 APP 也能提供同樣獨(dú)特的體驗(yàn)。除此之外，在非醫(yī)療保健行業(yè)，也有 33％ 的用戶會(huì)因個(gè)性化程度不足而卸載應(yīng)用程序。
在設(shè)計(jì)醫(yī)療保健類 APP 時(shí)，可以使用許多自定義選項(xiàng)，如顏色主題、個(gè)性化通知、交互元素，以及利用 AI 定制個(gè)性化推薦等。
△ Jawad 設(shè)計(jì)的在線咨詢 APP
無障礙的 UI 設(shè)計(jì)對任何 APP 來說都很重要，對于醫(yī)療類 APP 尤為重要。
移動(dòng)醫(yī)療解決方案針對的是不同年齡，具有不同視覺和聽覺能力、身體和心理特征的用戶。因此，醫(yī)療保健類 APP 主要功能的設(shè)計(jì)，應(yīng)保證每個(gè)潛在用戶都能訪問。請考慮可能存在的限制，并努力克服它們的負(fù)面影響。例如，有暈動(dòng)癥的人不會(huì)喜歡過多的動(dòng)效。
但這并不意味著一個(gè)醫(yī)療保健類 APP 的界面中只能有兩種顏色，也并非所有文本字號都要非常大，但這確實(shí)意味著設(shè)計(jì)師將面臨一些挑戰(zhàn)。對于醫(yī)療保健類 APP 來說，其中的挑戰(zhàn)也許相對多一些。無障礙設(shè)計(jì)能帶來更多的機(jī)會(huì)，而不是負(fù)擔(dān)。試著從瀏覽 W3C 網(wǎng)頁中關(guān)于無障礙指南的內(nèi)容開始，嘗試使用色盲模擬器，如下圖這種。
無需多言，試試移動(dòng)端無障礙設(shè)計(jì)的常用方式：將主要元素的尺寸控制一個(gè)拇指大小的區(qū)域中、添加將視圖改為水平模式的選項(xiàng)，以及放大文本的選項(xiàng)等。
△ keithar 的對比度分析儀和色盲模擬器
醫(yī)學(xué)不僅復(fù)雜，而且通常令人生畏，即使涉及的醫(yī)學(xué)內(nèi)容不多。一個(gè)比較聰明的辦法是使 APP 看起來與醫(yī)學(xué)毫不相干。這將消除用戶因刻板印象而產(chǎn)生的壓力，并使體驗(yàn)更加愉悅。
除了使用柔和的顏色，還可以在用戶使用 APP 的不同階段 推送鼓舞人心的消息、有趣的圖片、歡快的語音或其他元素。醫(yī)療保健類 APP 用戶界面中的圖像和圖標(biāo)，應(yīng)始終帶給用戶積極、愉悅的情緒，并 營造一種無痛感和安全感。
△ Mahdieh Khalili 設(shè)計(jì)的冠狀病毒 APP
當(dāng)產(chǎn)品已具備現(xiàn)成的網(wǎng)站，企業(yè)方甚至設(shè)計(jì)師為了降低制作成本，可能會(huì)想從產(chǎn)品的網(wǎng)頁版中 “借鑒” 一些解決方案直接應(yīng)用在移動(dòng)端設(shè)計(jì)中，這很可能導(dǎo)致用戶拒絕使用 APP。
用戶與移動(dòng)設(shè)備間的交互不同于與電腦間的交互。移動(dòng)設(shè)備的屏幕比顯示器屏幕或筆記本屏幕小。此外，用戶與移動(dòng)設(shè)備交互的方式不同于在電腦上進(jìn)行的操作。在移動(dòng)設(shè)備上，我們做任何事情都依賴手指的移動(dòng)，不愿意輸入冗長的文本，但同時(shí)希望系統(tǒng)能更快地工作。
一般來說，盡管 APP 中的導(dǎo)航也很重要，但對于移動(dòng)設(shè)備而言，更需關(guān)注的是交互設(shè)計(jì)。在大多數(shù)情況下，人們喜歡使用網(wǎng)站來獲取信息，使用 APP 來完成任務(wù)。此外，APP 還集成了智能手機(jī)的功能，如加速度傳感器和攝像頭，這也是導(dǎo)致 APP 的用戶界面設(shè)計(jì)與 Web 版有所不同的原因。
△ Grace Saraswati 設(shè)計(jì)的健康健身類 APP
視覺吸引力與功能性之間的平衡是非常重要的。醫(yī)療保健類 APP 必須便捷，且不能分散用戶對內(nèi)容的注意力。
圖形元素，包括動(dòng)畫，應(yīng)始終以滿足使用目的為前提，來考慮是否需要，如數(shù)據(jù)輸入，以及說明用戶與系統(tǒng)間的微交互等。不能僅僅因?yàn)樗雌饋聿诲e(cuò)而添加。不要過度使用漸變和陰影，要將用戶注意力集中在主要信息上。字體也只需選擇一種，可以通過改變字號和其他特征（如斜體、粗體）來做區(qū)分。
使用簡單的配色方案可以更清晰地傳達(dá)品牌信息，并創(chuàng)造更好的導(dǎo)航效果。
△ Dibbendo Pranto 的健康及活動(dòng)追蹤交互設(shè)計(jì)
你可能會(huì)在某些點(diǎn)上考慮，是否要借鑒一些競爭對手的成功案例。好吧，如果這有用的話……一方面，抄襲其他產(chǎn)品是不明智的，因?yàn)?它們的設(shè)計(jì)可能并不完善。你采納的可能是競爭對手的錯(cuò)誤決策，以至于阻礙 APP 的未來發(fā)展。
另一方面，你應(yīng)該先對其他應(yīng)用進(jìn)行分析，對競品進(jìn)行研究。應(yīng)該參考用戶以前使用其他 APP 的經(jīng)歷，并進(jìn)行借鑒，從而降低用戶的學(xué)習(xí)成本。添加太多創(chuàng)意會(huì)使 APP 顯得很煩人，用戶需要花大量時(shí)間去習(xí)慣并學(xué)習(xí)操作。為此，可以參考蘋果制定的人機(jī)交互指南（Human Interface Guidelines ）和谷歌制定的材料設(shè)計(jì)指南（ Material Design）。
“用戶大部分時(shí)間是花在別人家的網(wǎng)站上?！?— 雅各布定律
（雅各布定律：用戶在其他千千萬萬個(gè)網(wǎng)站中積累經(jīng)驗(yàn)，學(xué)會(huì)如何使用網(wǎng)站，當(dāng)一個(gè)網(wǎng)站跟其他網(wǎng)站一致時(shí)，用戶會(huì)立刻知道該如何操作，但如果違反了雅各布定律，用戶會(huì)毫不猶豫地離開。）
必須根據(jù)品牌、服務(wù)和產(chǎn)品細(xì)節(jié)來進(jìn)行設(shè)計(jì)。例如，健身類 APP 與醫(yī)學(xué)計(jì)算器有著很大區(qū)別。設(shè)計(jì)必須完全符合目標(biāo)受眾的要求、APP 的功能細(xì)節(jié)及主題場景等。
△ Martyna Zielińska 的醫(yī)療提醒 APP
最后，重要的是要記住，每個(gè)設(shè)計(jì)師都有自己的觀點(diǎn)，認(rèn)為這個(gè)或那個(gè)決定是合理或有效的。他們可能會(huì)對 APP 架構(gòu)和導(dǎo)航的一致性，嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)解決方案，以及產(chǎn)品的實(shí)用價(jià)值深信不疑，以至于忘記了測試。通過不斷的實(shí)踐，設(shè)計(jì)師提高了自己的共情能力，可以更好地理解用戶需求。但事實(shí)上，直覺和經(jīng)驗(yàn)帶來的潛在陷阱也會(huì)給應(yīng)用帶來負(fù)面影響。
只有在分析用戶與 APP 界面交互的相關(guān)數(shù)據(jù)后，才能得出相對準(zhǔn)確的結(jié)論。測試有助于及時(shí)獲得反饋，覆蓋 APP 中的所有行為場景，并檢查交互模式。
用戶的積極參與是成功的關(guān)鍵。相關(guān)測試受眾的年齡、職業(yè)、地理位置、性別、文化和宗教背景等要盡可能接近目標(biāo)受眾，越接近越好。盡可能多地讓他們使用 APP 的主要功能并收集反饋。
△ Alex Samofalov 設(shè)計(jì)的患者卡片 APP
設(shè)計(jì)所關(guān)注的并不僅僅是顏色和字體，而是創(chuàng)造價(jià)值和解決業(yè)務(wù)問題的能力。健康是一個(gè)敏感且具有挑戰(zhàn)性的問題，需要特別注意。設(shè)計(jì)師們一直努力地在醫(yī)療類 APP 極高的安全性及可用性要求與界面美觀性之間取得平衡。
經(jīng)過深思熟慮的醫(yī)療保健用戶體驗(yàn)和 UI 設(shè)計(jì)是一種極好的工具，它能憑借簡單直觀的界面、便捷的功能以及它所帶來的積極情感等，吸引用戶參與體驗(yàn)。
文章來源：優(yōu)設(shè)網(wǎng) 作者：TCC翻譯情報(bào)局
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
大約在 3 年前我就注意到像 Facebook 等國外社交 App 在大幅度使用頭像。比如明明文字就能表達(dá)的地方，偏偏要塞下幾個(gè)小頭像。這個(gè)現(xiàn)象我琢磨好久，直到我最近在自己參與的項(xiàng)目中也嘗試著加入頭像，發(fā)現(xiàn)數(shù)據(jù)非常好看，因此和大家分享一下這個(gè)成果。
在沒有進(jìn)行實(shí)踐之前，我嘗試從理論中尋找原因。
頭像視覺面積更大、顏色更豐富，比文字更吸引人的注意力。
之前在網(wǎng)上流行過把微波爐豎著放，就特別像笑臉的事件。為什么有兩個(gè)圓圈一道弧線的圖形會(huì)被當(dāng)作人臉的微笑？
科學(xué)界對此早有研究，把這種誤把具有臉特征的視覺圖形當(dāng)作人臉的現(xiàn)象稱為“空想性錯(cuò)視（Pareidolia）”。
早在 1952 年，生物學(xué)家赫胥黎（JulianHuxley）就已提出空想性錯(cuò)視源于人類演化的過程。他認(rèn)為在人類漫長的進(jìn)化過程中會(huì)遇到各種危險(xiǎn)，殘暴的野獸和同族的人類都具有“臉孔”。對“臉孔”的識別越快，就能讓我們在復(fù)雜的環(huán)境中快速識別潛在的危險(xiǎn)或盟友。久而久之，隨著人類進(jìn)化就衍生出與生俱來對“臉孔”的辨識能力。
通過現(xiàn)代科技研究發(fā)現(xiàn)，在人類大腦中，梭狀回面孔區(qū)（right fusiform face area，rFFA）主要負(fù)責(zé)人臉的認(rèn)知。它能整合經(jīng)視皮層處理的視覺刺激，讓我們快速識別人臉。有研究發(fā)現(xiàn)，只需 130ms 面孔可以被檢測到。
很顯然，在界面設(shè)計(jì)中，因?yàn)榇蠖鄶?shù)人的頭像也具有“臉孔”特征，因此能很快地被用戶注意到。
心理學(xué)家研究發(fā)現(xiàn)，人在觀察事物時(shí)，并不是對事物部分屬性孤立觀察，而總是傾向于把具有不同屬性、不同部分的對象作為一個(gè)統(tǒng)一的整體。格式塔原理即是這一特征的反映。
這個(gè)原理不僅作用于視覺，人對其他人的觀察也是一樣。我們在互相多次交往后才發(fā)現(xiàn)和第一印象偏差很大。因?yàn)榈谝挥∠笾皇沁@個(gè)人的部分特征，并不完整。大腦會(huì)傾向于根據(jù)這些部分特征腦補(bǔ)出完整的人，長得漂亮的人會(huì)被認(rèn)為聰明善良，著裝正式的人看著技術(shù)更專業(yè)即是如此，這種被某個(gè)亮眼的特征所籠罩，讓你腦補(bǔ)完整屬性的情況稱為光暈效應(yīng)。
因此摳腳大漢用美女頭像能騙到部分男人就見怪不怪了。
基于以上 3 點(diǎn)分析，用戶會(huì)認(rèn)為頭像背后的就是活生生的人類。
在理論分析后不久我剛好得到了一次實(shí)踐的機(jī)會(huì)。在我們的在線問診 App 中促使用戶購買醫(yī)生提供的治療方案是核心目標(biāo)之一，最開始我們的醫(yī)患溝通界面和閑魚類似，分為對話和服務(wù)卡片兩種信息。
通過用戶訪談我們發(fā)現(xiàn)患者非常在乎醫(yī)生的回復(fù)內(nèi)容（因?yàn)榛ㄥX買的就是醫(yī)生的內(nèi)容），但是卻表示沒有注意到治療方案卡片。我猜測是由于治療卡片并不像醫(yī)生提供的內(nèi)容，更像是我們系統(tǒng)推送的某種廣告，因此被用戶忽略。于是我做了一個(gè)非常小的改動(dòng)，將治療方案卡片用醫(yī)生對話回復(fù)的樣式包起來，并增加一句文案。患者能正確理解治療方案也是醫(yī)生提供內(nèi)容，結(jié)果治療方案的購買率有明顯提升！
增加一個(gè)醫(yī)生頭像和聊天氣泡，下一步轉(zhuǎn)化也有明顯增長。
通過這兩次實(shí)踐團(tuán)隊(duì)成員開玩笑說這是“加頭像數(shù)據(jù)就會(huì)上漲的方法論”，奈何我們幾個(gè)詞藻有限不能再做更高程度的包裝。不過以上案例確實(shí)是很好的利用了視覺傳達(dá)、面孔識別和光暈效應(yīng)的原理。
以上實(shí)踐都是增加對方的頭像，那界面上展示用戶自己的頭像又有什么意義呢？團(tuán)隊(duì)成員通過探討得出以下觀點(diǎn)：
1. 切換多賬號，避免登錯(cuò)號
有些公司職員需要打理公司的社交網(wǎng)絡(luò)賬號同時(shí)也有自己的賬號，甚至還有另外的小號。如果一不小心登錯(cuò)號發(fā)錯(cuò)內(nèi)容，可能會(huì)導(dǎo)致社會(huì)性死亡。推特 App 在發(fā)布界面顯示自己的頭像點(diǎn)擊可以切換不同的賬號，能有效避免這些問題。
2. 頭像讓我發(fā)言更注意自身形象
自己的頭像是自己現(xiàn)實(shí)人格在網(wǎng)絡(luò)上的映射，看著自己的頭像在輸入框旁邊，發(fā)言時(shí)難免會(huì)有“這是我在說話”的潛意識。因此在發(fā)表內(nèi)容時(shí)會(huì)注意自己的措辭，維持自己的身份形象。同理，如果做匿名社交，在輸入框旁邊放上匿名頭像，也讓用戶覺得自己帶上了面具，發(fā)言更肆無忌憚。
3. 頭像更像溝通
如果在別人的帖子下面發(fā)表評論，有頭像更像是你和帖子的作者進(jìn)行平等的對話溝通，沒頭像就顯得你在蕓蕓眾生中仰望作者。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
文章來源：優(yōu)設(shè) 作者：龍爪槐守望者
公司微信小程序缺省
轉(zhuǎn)自：站酷
作者：cattie喵星
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
小貓寵物是一款面向大眾化的手機(jī)寵物app，這里有來自天南地北的愛寵人士的動(dòng)態(tài)分享，也有專業(yè)的醫(yī)療人員在線解答各式難題，更有超多實(shí)惠的寵物用品等你來搶
轉(zhuǎn)自：站酷
作者：憨寶鴨
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
生意越來越不好做，是大家目前的普遍狀況，大多數(shù)做生意的手里都有一批貨，急著處理回籠資金卻又賣不出去
生意越來越不好做，是大家目前的普遍狀況，大多數(shù)做生意的手里都有一批貨，急著處理回籠資金卻又賣不出去，所以我們的愛航信息平臺應(yīng)運(yùn)而生。
如果你告訴企業(yè)或者商家出售他的產(chǎn)品或服務(wù)需要支付一部分現(xiàn)金，他肯定會(huì)皺眉，或者選擇放棄。但是，如果你告訴他，他可以使用一些自己的產(chǎn)品或者服務(wù)來置換廣告位，而不需要花錢，他肯定會(huì)欣然接受?！皩?shí)際上，仔細(xì)考慮這件事的原因可能是許多人在觀念中往往都堅(jiān)持“現(xiàn)金為王”的心理。
所謂易貨廣告，就是在企業(yè)或者商家無法以資金支付廣告位的時(shí)候，可以采用以商品或者服務(wù)來置換廣告服務(wù)，廣告交易可以不通過資金的形式，該種廣告置換的方式可在多個(gè)企業(yè)或者商家中進(jìn)行，易貨廣告，是企業(yè)或者商家在不用現(xiàn)金的情況下進(jìn)行置換廣告服務(wù)的有效方式。
互聯(lián)網(wǎng)是提供貨物與廣告置換交易的絕佳平臺，可以大大提升以物易物的可行性。以物易物這種遠(yuǎn)古時(shí)代的交易方法讓其出現(xiàn)在互聯(lián)網(wǎng)上，其共同點(diǎn)和成功之處就在于，商戶或企業(yè)總能尋找到自己需要的，而當(dāng)交易物品的價(jià)值相差不是太遠(yuǎn)時(shí)，商戶或企業(yè)總會(huì)選擇自己需要的。
此外，通過提供易貨廣告服務(wù)的平臺，還可幫助企業(yè)或商家有效解決銷售不暢、資金短缺、產(chǎn)能過剩和庫存積壓的難題?，F(xiàn)代易貨廣告之所以快速發(fā)展，除了電子商務(wù)的催化作用，還有一個(gè)重要推動(dòng)力就是現(xiàn)代企業(yè)經(jīng)營思想的轉(zhuǎn)變，“愛航信息不僅是一種廣告模式，更會(huì)是一種經(jīng)營思想”。
轉(zhuǎn)自：站酷
作者：愛航信息
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
音樂可以敲開封閉的心靈，紓解憂郁苦悶的心情，讓人的身心都得到適度的發(fā)展、解放。
愛聽音樂是一款集音樂播放和音樂資訊分享于一體的音樂APP。
自己平常作圖，學(xué)習(xí)都會(huì)聽歌曲，于是就設(shè)計(jì)了這款A(yù)PP。
在這次設(shè)計(jì)中，自己又對用戶分析，競品分析，產(chǎn)品的框架又有了重新的認(rèn)識，
整個(gè)過程中也是受益匪淺，希望自己不忘初心，繼續(xù)努力，繼續(xù)前行！
（APP部分界面設(shè)計(jì)使用圖片來自網(wǎng)絡(luò))
僅作為自己設(shè)計(jì)練習(xí)使用，不作為任何商業(yè)用途!
設(shè)計(jì)軟件
Adobe Photoshop
Adobe Illustrator
Adobe After Effects
轉(zhuǎn)自：站酷
作者：故事從未開始
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
啟動(dòng)界面
快速記賬界面
資產(chǎn)管理界面
統(tǒng)計(jì)排行
我的界面
提示信息界面
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
最近做的都是小程序的項(xiàng)目，小程序設(shè)計(jì)進(jìn)一步的研究的時(shí)候，發(fā)現(xiàn)現(xiàn)在關(guān)于小程序的文章很少，也不全面。目前大部分的問題通過微信開放社區(qū)，所以來結(jié)合官方指南和文章資料，結(jié)合工作設(shè)計(jì)中遇到的問題，總結(jié)一份比較全面的小程序設(shè)計(jì)指南，希望可以幫助到大家。
小程序是一種即用即走，無需下載的手機(jī)應(yīng)用，和APP不同，用戶不用擔(dān)心會(huì)占用手機(jī)內(nèi)存的問題。用戶可以直接通過掃一掃或附近搜索即可使用。小程序刨除一切繁雜的程序，將用戶的操作變得更加靈活快捷，大大提高了用戶體驗(yàn)，使用量也大大增加。
2016年1月11日，2016微信公開課PRO版在廣州舉行，“微信之父”張小龍首次公開演講，宣布微信公眾號將推出“應(yīng)用號”，通過公眾號完成一些App的部分功能。
2016年11月3日晚間，微信團(tuán)隊(duì)宣布：微信小程序正式開放公測。
2017年9月20日，支付寶小程序向用戶開放公測。
2018年7月，百度AI開發(fā)者大會(huì)上，百度宣布百度智能小程序正式上線。
2019年6月1日，QQ小程序在安卓的新版QQ上如期上線，5天后，正式登陸 iOS 版手機(jī)QQ。至此，QQ小程序完成全面上線。
從最早的微信到現(xiàn)在，支付寶小程序、百度小程序、抖音小程序，幾大巨頭都布局了小程序。
主流小程序平臺網(wǎng)絡(luò)關(guān)注度差異較大，微信小程序的網(wǎng)絡(luò)關(guān)注度最高，其次是百度小程序和支付寶小程序。對比用戶認(rèn)知來看，微信小程序以分享鏈接出現(xiàn)，百度小程序是搶紅包平臺，支付寶小程序是搶特價(jià)和抽獎(jiǎng)平臺等;小程序平臺網(wǎng)絡(luò)關(guān)注度差異折射用戶對小程序平臺生態(tài)的認(rèn)知。
微信作為國民社交軟件，日活用戶已達(dá)3億，這無疑是巨大的用戶流量聚集地，對商家的吸引程度可想而知。我們接下來也是按照微信小程序?yàn)槔齺碇鸩街v解。
微信官方文檔：https://developers.weixin.qq.com/miniprogram/design/
特點(diǎn)：依附微信強(qiáng)社交模式，引流能力強(qiáng)，流失率低，推廣迅速
量級：月活10億
百度作為中國最大的搜索引擎工具，有天然的數(shù)據(jù)支撐。百度每日的搜索量可達(dá)到幾十個(gè)億，又是一個(gè)巨大的流量地。此外，基于產(chǎn)品的搜索特性，百度小程序能精準(zhǔn)覆蓋目標(biāo)用戶。通過小程序?yàn)橛脩籼峁┬畔⑴c服務(wù)，通過提升整體的服務(wù)效率實(shí)現(xiàn)用戶留存。
百度-智能小程序設(shè)計(jì)規(guī)范：https://smartprogram.baidu.com/docs/design/overview/introduction/
特點(diǎn)：基于百度搜索引擎的優(yōu)勢，增加產(chǎn)品詞的優(yōu)化曝光。
量級：月活5億
抖音小程序開發(fā)基于字節(jié)跳動(dòng)客戶，面向字節(jié)跳動(dòng)所有產(chǎn)品線用戶（包括抖音、今日頭條等），不同小程序/小游戲滿足不同種類用戶需求。支持小游戲和小程序產(chǎn)品形態(tài)，支持個(gè)人與企業(yè)開發(fā)者，只要有優(yōu)質(zhì)內(nèi)容或優(yōu)質(zhì)服務(wù)。產(chǎn)品形態(tài)與接口形式適配行業(yè)標(biāo)準(zhǔn)，減少開發(fā)者開發(fā)成本。
字節(jié)小程序：https://microapp.bytedance.com/docs/zh-CN/mini-app/design/design-guidelines/Design-guidelines
特點(diǎn)：旨在利用優(yōu)質(zhì)內(nèi)容所關(guān)聯(lián)和產(chǎn)生的使用場景進(jìn)行小程序?qū)Я鳎鉀Q開發(fā)者流量與轉(zhuǎn)化困擾。
量級：月活9億
支付寶小程序依托支付寶的商業(yè)和生活服務(wù)基因，小程序細(xì)分行業(yè)分布也以生活服務(wù)、金融保險(xiǎn)和電商等小程序?yàn)橹?。同時(shí)支付寶成熟的信用體系也為商家提供了類似于免押租賃等玩法，借助芝麻信用、螞蟻花唄等功能為流量變現(xiàn)創(chuàng)造更多的想象空間。
支付寶小程序設(shè)計(jì)規(guī)范：https://docs.alipay.com/mini/design
特點(diǎn)：在組件上采用了此前成熟的Ant Design 設(shè)計(jì)，在開放API上則面向自身特色能力來封裝，在框架方面采用開源的React/webpack等技術(shù)為基礎(chǔ)，結(jié)合了支付寶自身的多年技術(shù)沉淀來實(shí)現(xiàn)。
量級：月活7億
裂變型小程序是為我們其他小程序，在短期內(nèi)提供大量流量的。比如跳一跳娛樂游戲類的小程序，還有電商裂變的成功典范可以屬拼多多。
針對于裂變型的小程序來說，裂變點(diǎn)就是痛點(diǎn)，除了產(chǎn)品的主功能，小程序的裂變設(shè)計(jì)為什么要用戶裂變？比如拼多多，用戶為了零元購商品才分享的，并且?guī)兔车娜艘蚕肓阍蒙唐贰?
缺點(diǎn)：在裂變后幾乎是無法使用，產(chǎn)品的擴(kuò)展性差
優(yōu)點(diǎn)：用戶流量來取快、用戶路徑可以達(dá)到最短
設(shè)計(jì)點(diǎn): 考慮最優(yōu)的用戶裂變路徑
小程序一直是用完即走的使用體驗(yàn)。留存型小程序是我們用來沉淀客戶的。需要我們結(jié)合自身的產(chǎn)品，發(fā)掘能沉淀目標(biāo)客戶的場景，一般需要結(jié)合原有APP來開發(fā)，開發(fā)一款對用戶有價(jià)值、簡單易上手的小程序。
可以從這幾個(gè)方面來考慮：
強(qiáng)運(yùn)營：一個(gè)小程序能給用戶提供的能量畢竟是有限的，現(xiàn)在競品太多，如果不能持續(xù)給用戶刺激，沉寂是早晚的事，所以電商產(chǎn)品會(huì)通過優(yōu)惠券、分享立減、拼團(tuán)來刺激用戶消費(fèi)。
搭建激勵(lì)體系：針對用戶的損失厭惡，建立用戶的激勵(lì)體系 - 如利用積分商城，引導(dǎo)用戶通過簽到、消費(fèi)、分享各種行為獎(jiǎng)勵(lì)用戶，增加用戶的離開成本。
社區(qū)：基于微信的社交基礎(chǔ)上，把微信群建立到小程序里，可以長期培養(yǎng)用戶的使用習(xí)慣，而且可以利用社交的互動(dòng)性，低成本的完成裂變轉(zhuǎn)化。
產(chǎn)品型的小程序一般是有了APP的商家建立小程序，是為了彼此相互融合，相互促進(jìn)。因?yàn)樾〕绦蜷_發(fā)成本更低，更多曝光的機(jī)會(huì)。產(chǎn)品型的小程序設(shè)計(jì)一般是照搬全部，或者精簡設(shè)計(jì)，一般要結(jié)合商家業(yè)務(wù)來判斷。
如果對于一些垂直品類的產(chǎn)品，像馬蜂窩和攜程旅游將酒店預(yù)訂、景點(diǎn)門票預(yù)訂、周邊游、租車包車游等各項(xiàng)服務(wù)都做了一個(gè)功能拆分，生成的了各項(xiàng)小程序的入口，更好的將服務(wù)垂直，縮短產(chǎn)品和業(yè)務(wù)觸達(dá)用戶的渠道，自然轉(zhuǎn)化率更高。
對于想為了借助微信這一大流量平臺發(fā)展的APP可以照搬APP那一套
在小程序中工具型是最符合“用完即走”這個(gè)理念的，就像家里的工具一樣想要的時(shí)候拿出來。比如識圖、查公交線路、寄快遞、抽獎(jiǎng)等小程序，只要打開對應(yīng)的小程序就可以了，不用的時(shí)候也不占用內(nèi)存。還有一種本地服務(wù)小程序，借助“附近的小程序”功能，為周邊提供便利服務(wù)，如上門維修、家電回購、本地商圈等等小程序。
工具型的小程序關(guān)注點(diǎn)在于功能本身，解決人們的某一個(gè)需求，讓他們更便捷。在設(shè)計(jì)的時(shí)候要注意視覺和結(jié)構(gòu)和信息布局的簡潔，然后考慮易懂先考慮功能理解度和識別性，將功能產(chǎn)品化快速提高用戶的效率。然后引導(dǎo)用戶快捷完成任務(wù)。
APP開發(fā)根據(jù)開發(fā)方式可分為原生APP和Web APP，APP主流開發(fā)操作系統(tǒng)有安卓和IOS。
安卓版本原生APP的開發(fā)語言為JAVA，IOS版原生APP的開發(fā)語言為Objective-C。
安卓版本W(wǎng)eb APP的開發(fā)語言為JAVA+HTML，IOS 版Web APP的開發(fā)語言為Objective-C+HTML。
小程序是基于騰訊、今日頭條、百度等平臺的小程序開發(fā)框架進(jìn)行開發(fā)，開發(fā)技術(shù)類似HTML。
載體不同則用戶群體不同，小程序是基于微信平臺的應(yīng)用，用戶群僅限微信用戶，截至目前也就是微信10億+的用戶量；而APP則是上架在App Store及Android應(yīng)用市場，面向全球擁有智能手機(jī)的用戶，也就是33億+的用戶量。
APP
一直存在手機(jī)中會(huì)占用空間，太多的APP可能會(huì)導(dǎo)致內(nèi)存不足，總是清理緩存。
小程序
因?yàn)椴恍枰惭b，占用內(nèi)存空間忽略不計(jì)。
APP
APP在實(shí)際開發(fā)中，它需要開發(fā)安卓系統(tǒng)和iOS系統(tǒng)兩種版本，所用到開發(fā)語言不同，同時(shí)還需要根據(jù)手機(jī)的不同尺寸進(jìn)行適配，開發(fā)成本較高。
一款完善的雙平臺APP平均的開發(fā)周期約3個(gè)月。
開發(fā)成本低，一次開發(fā)就可以適配所有手機(jī)。平均開發(fā)周期約2周。
原生App的內(nèi)存就不受控制，那么內(nèi)容框架可以根據(jù)產(chǎn)品定位隨意增添，可發(fā)揮的空間非常大，一些電商、社區(qū)等等無論多么復(fù)雜的應(yīng)用都能一一實(shí)現(xiàn)。
因?yàn)閮?nèi)存受限的控制，導(dǎo)致內(nèi)容框架不同，在小程序上功能架構(gòu)設(shè)計(jì)的比較簡單，符合輕量化、“用完即走”。
功能比較受限，因?yàn)榻涌诠δ苡邢蕖?
現(xiàn)在小程序現(xiàn)有接口
如上：豆瓣原生app包含了首頁-書影音-小組討論-市集-我的等多個(gè)內(nèi)容板塊，但是小程序只保留了豆瓣最核心的部分-電影評分的欄目，將其商城和社區(qū)的模塊全部砍掉了，只是將小程序作為一個(gè)資訊型的瀏覽窗口。
其實(shí)移動(dòng)端產(chǎn)品的設(shè)計(jì)規(guī)范和原則大致是相同的，但是因?yàn)槭苤朴谖⑿判〕绦虻目蚣?，小程序產(chǎn)品與App產(chǎn)品在部分版塊的表現(xiàn)形式上會(huì)存在一些差異：如頂部導(dǎo)航欄區(qū)域等。
其實(shí)移動(dòng)端產(chǎn)品的設(shè)計(jì)規(guī)范和原則大致是相同的，但是因?yàn)槭苤朴谖⑿判〕绦虻目蚣埽〕绦虍a(chǎn)品與App產(chǎn)品在部分版塊的表現(xiàn)形式上會(huì)存在一些差異，主要體現(xiàn)在以下幾個(gè)方面
小程序的導(dǎo)航欄官方指定了兩種樣式，一深一淺，背景色可自定義，遵循“導(dǎo)航明確、來去自如”的原則。
底部標(biāo)簽欄是移動(dòng)端產(chǎn)品的主要導(dǎo)航方式，主要表示用戶當(dāng)前所在的位置，所以會(huì)有選中與未選中兩種切換方式
App：可支持最少2個(gè)，最多5個(gè)的tab切換，圖標(biāo)大小以及底部標(biāo)簽欄高度可自定義。
小程序：也可支持最少2個(gè)，最多5個(gè)的tab切換，使用原生控件時(shí)，要遵從 icon 尺寸81*81px。
App：流暢、體驗(yàn)佳，例如發(fā)朋友圈時(shí)拖動(dòng)照片排序。
小程序：除非必要，否則不建議使用拖動(dòng)排序。圖片和列表拖動(dòng)在 Android機(jī)型上體驗(yàn)不夠，會(huì)有卡頓的情況。
APP：會(huì)隔三差五給用戶推送廣告，太多未讀提示會(huì)逼死強(qiáng)迫癥
小程序：不允許主動(dòng)給用戶發(fā)送廣告，僅能回復(fù)模版消息
APP:直接打開
小程序：從微信首頁，下拉，點(diǎn)擊打開。
APP:界面切換的流暢度以及加載數(shù)據(jù)的響應(yīng)速度都會(huì)比小程序更好一些
小程序：當(dāng)在比較深的頁面上，或者不是原生的頁面加載時(shí)間會(huì)比較長，會(huì)卡頓。
APP:動(dòng)畫不受限，活動(dòng)運(yùn)營比較好營造氛圍感，帶給用戶非常友好的沉浸感和歸屬感。
小程序：受內(nèi)存的影響，而且小程序都是輕量化的功能，動(dòng)畫的展示元素會(huì)非常的少，因而在界面會(huì)覺得很平淡，像是工具型產(chǎn)品。
APP:在原生APP里可以開發(fā)客服，或者直接轉(zhuǎn)化。APP到小程序里可以直接跳轉(zhuǎn)。
小程序：小程序的虛擬支付會(huì)影響iOS用戶的轉(zhuǎn)化，并影響整個(gè)業(yè)務(wù)的轉(zhuǎn)化?？头彩切枰P(guān)閉小程序單獨(dú)對話。與APP的響應(yīng)需要一個(gè)繁瑣的步驟。
APP:推廣新用戶需要下載APP，需要占用手機(jī)內(nèi)存，推廣率低。但是APP的開發(fā)自由度高，推廣方式不受限制，渠道多，轉(zhuǎn)化率高
小程序：依靠微信平臺，可以通過掃描二維碼、搜索、發(fā)送好友和朋友圈，推廣率高。雖然推廣率高，但是因?yàn)楣俜降母鞣N限制，增加營銷難度，轉(zhuǎn)化率低。
微信小程序的官方設(shè)計(jì)規(guī)范，在微信的官方文檔里都有全面的講解微信小程序的設(shè)計(jì)指南，我就不多贅述了。按照官方的來對于設(shè)計(jì)一個(gè)基本的小程序是完全夠用的。
友好禮貌、清晰明確、便捷優(yōu)雅、統(tǒng)一穩(wěn)定
大家可以自自行查閱微信官方平臺 ：
https://developers.weixin.qq.com/miniprogram/design/#%E5%8F%8B%E5%A5%BD%E7%A4%BC%E8%B2%8C
我知道大家可能看官方指南覺得枯燥，特意找來一篇很不錯(cuò)的小程序的文章，建議結(jié)合服用，效果更好。
設(shè)計(jì)師必看的小程序設(shè)計(jì)指南：https://www.zcool.com.cn/article/ZMTA4NjYxMg==.html
在最基礎(chǔ)的設(shè)計(jì)，我想跟大家聊一下，在微信的設(shè)計(jì)規(guī)范內(nèi)如何進(jìn)行進(jìn)階設(shè)計(jì)，這也是我實(shí)際工作中探索的結(jié)果，希望能給大家更多的啟發(fā)。
官方指南：開發(fā)者可根據(jù)自身功能設(shè)計(jì)需要在頁面內(nèi)添加自有導(dǎo)航。并保持不同頁面間導(dǎo)航一致，指向清晰，有路可退。受限于手機(jī)屏幕尺寸的限制，小程序頁面的導(dǎo)航應(yīng)盡量簡單。建議開發(fā)者設(shè)計(jì)的自有導(dǎo)航樣式與微信官方小程序菜單樣式保持一定差異，以便區(qū)分。
在根據(jù)官方的指導(dǎo)下我們?nèi)绾芜M(jìn)行設(shè)計(jì)呢
需要注意的是：自定義導(dǎo)航欄之后要加微信默認(rèn)的下拉刷新會(huì)出現(xiàn)一個(gè)問題：下拉刷新組件會(huì)出現(xiàn)在導(dǎo)航欄上面！所以如果你需要做自定義導(dǎo)航欄，就需要自定義下拉刷新。下面提供luyimei微信小程序下拉刷新組件。
官方指南：開發(fā)者可為小程序頁面添加標(biāo)簽分頁（Tab）導(dǎo)航。標(biāo)簽分頁欄可固定在頁面頂部或者底部，便于用戶在不同的分頁間做切換。標(biāo)簽數(shù)量不得少于2個(gè)，最多不得超過5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過4項(xiàng)。一個(gè)頁面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽分頁欄。
按照產(chǎn)品需求也可以直接去掉底部導(dǎo)航欄。
頂部標(biāo)簽分頁欄顏色可自定義。在自定義顏色選擇中，務(wù)必注意保持分頁欄標(biāo)簽的可用性、可視性和可操作性。
微信官方小程序里啟動(dòng)頁加載樣式是由微信官方提供，只需要提供logo就可以。
頁面下拉刷新加載雖然微信官方文檔說，開發(fā)者無需自行開發(fā)，但是想要更改loading也是可以的?，F(xiàn)在小程序開發(fā)的比較完善，盡量用小程序標(biāo)準(zhǔn)走，自定義開發(fā)有可能會(huì)破壞小程序的用戶體驗(yàn)。
頁面內(nèi)加載反饋、模態(tài)加載和其余的加載樣式都可以根據(jù)需求設(shè)計(jì)，新手可以參考著官方指南來。
若載入時(shí)間較長,應(yīng)提供取消操作,并使用進(jìn)度條顯示載入的進(jìn)度。
載入過程中,應(yīng)保持動(dòng)畫效果 ; 無動(dòng)畫效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺。
不要在同一個(gè)頁面同時(shí)使用超過1個(gè)加載動(dòng)畫。
在頁面設(shè)計(jì)的時(shí)候盡量考慮到手機(jī)鍵盤輸入困難或者容易引起誤操作，小程序的設(shè)計(jì)可以利用一些接口來優(yōu)化用戶體驗(yàn)。
遇到必須輸入的場景可以盡量讓用戶選擇。讓比如搜索時(shí)的歷史記錄和模糊搜索，而減少或避免不必要的鍵盤輸入，可以大大減少用戶的輸入成本。
復(fù)雜表單的輸入會(huì)給用戶帶來心理負(fù)擔(dān)，在遇到大量輸入的場景下，可以把輸入換成選擇，盡可能的減少操作，例如掃描銀行卡可以只需點(diǎn)擊按鈕，采用攝像頭識別接口來識別信息。除此之外微信團(tuán)隊(duì)還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性，進(jìn)而優(yōu)化體驗(yàn)。
關(guān)于小程序的適配設(shè)計(jì)師不用過多的關(guān)心，但是可以了解一下。小程序里的尺寸單位叫 rpx，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。在750*1334的設(shè)計(jì)稿里，1px = 1rpx。在小程序里寬度都是750rpx,高度就通過那個(gè)寬高比獲得，只要涉及具體數(shù)值的高度的都通過這個(gè)比例計(jì)算就行。
官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D
小程序的普通數(shù)據(jù)可以通過“小程序數(shù)據(jù)助手”查看，有特殊觀察的數(shù)據(jù)可以單獨(dú)埋點(diǎn)。當(dāng)前功能模塊包括數(shù)據(jù)概況、訪問基礎(chǔ)分析（用戶趨勢、來源分析、留存分析、時(shí)長分析、頁面詳情）、實(shí)時(shí)統(tǒng)計(jì)和用戶畫像（年齡性別、省份城市、終端機(jī)型），數(shù)據(jù)與小程序后臺常規(guī)分析一致。
疫情期間產(chǎn)品設(shè)計(jì)師的價(jià)值，可以查看周邊疫情情況，和確診人員到自己的距離。
網(wǎng)易嚴(yán)選的品牌理念是“好的生活，沒那么貴”。清晰的品牌設(shè)計(jì)，設(shè)計(jì)語言透著追求品質(zhì)生活的態(tài)度。
多抓魚二手書是一款人性化的二手書交易市場小程序。
京東良研小程序是專業(yè)調(diào)研及數(shù)據(jù)分析的率工具，整體的簡潔、輕量化的設(shè)計(jì)很符合調(diào)研場景的商務(wù)感。
豆瓣評分提供的電影介紹及評論。豆瓣是典型的有情懷，小而美的產(chǎn)品了。
因?yàn)樵谛〕绦蚶飳?dǎo)航欄的層級是最高的，即使隱藏導(dǎo)航欄Title Bar也是依然存在的。
除了官方指南里的模態(tài)對話框，也可以嘗試半屏彈窗，一是承載更多信息，二是更好的繼續(xù)流程不被打斷。
在運(yùn)營活動(dòng)中，活動(dòng)彈窗起著活動(dòng)引導(dǎo)，突出重點(diǎn)的作用。這類彈窗往往要設(shè)計(jì)的“熱鬧”一些，可以更好的引導(dǎo)用戶留存裂變。
微信小程序官方曾發(fā)布過整改通知，小程序?qū)τ趇OS系統(tǒng)上提供的虛擬物品不能展現(xiàn)不能出現(xiàn)支付、購買、獲取VIP、開通會(huì)員、價(jià)格、iOS限制、蘋果系統(tǒng)限制等購買相關(guān)字眼；也不能出現(xiàn)引導(dǎo)字眼，比如掃描二維碼獲取。即使實(shí)際上它們都不可使用；也不得引導(dǎo)至為外部網(wǎng)頁或App來實(shí)現(xiàn)支付功能。
也就是說在蘋果設(shè)備（IOS）系統(tǒng)中，小程序中不能進(jìn)行虛擬物品的支付，比如積分、購買課程、打賞等等，對于在線教育而言，由于課為售賣的主體，與課程售賣相關(guān)的購買、營銷推廣（秒殺、砍價(jià)等）等都產(chǎn)生了一系列因虛擬支付衍生的問題。
目前沒有特別完美的解決方案，要不犧牲用戶體驗(yàn)曲線救國，要不冒著小程序被封的風(fēng)險(xiǎn)頂風(fēng)作案。
直接關(guān)閉小程序iOS支付，這種是最合規(guī)但是也是最無奈的方式，“親寶故事”就是采用這種方式，用ios打開界面入口都跟安卓不一樣。然而實(shí)際上他只是把入口給隱藏了，通過安卓手機(jī)分享依然可以打開被隱藏的收費(fèi)信息，當(dāng)然這個(gè)方案對于沒有APP的產(chǎn)品損失還是很大的。
線上課程的話，可以讓用戶提前在公眾號或者社群里跟iOS用戶解釋為什么不能購課，或者是還有哪些途徑可以獲課。其他途徑提前支付，在后端生成驗(yàn)證碼，直接輸入解鎖課程。
而在ios上，把原本虛擬物品轉(zhuǎn)化成實(shí)物品，比如賣光盤，而本質(zhì)上的價(jià)值是音頻本身。如果按節(jié)賣可能實(shí)物成本及配送費(fèi)過高，那么在ios上可以按系列專輯打包賣，使用ios設(shè)備的用戶只能賣專輯，買完后可以解鎖該專輯下的所有音頻。當(dāng)然，這種方式不知道在運(yùn)營商是否存在問題。
從官方給出的規(guī)則細(xì)則解讀來看，這種引導(dǎo)也算是不合規(guī)的，將支付引導(dǎo)去公眾號、到APP上進(jìn)行。聯(lián)系客服完成支付或購買流程。這個(gè)是非常不建議的，一旦被發(fā)現(xiàn)會(huì)有舉報(bào)被封的危險(xiǎn)。
小程序的頁面之前的邏輯跳轉(zhuǎn)，最多可以支持10個(gè)層級。在小程序的開發(fā)過程中會(huì)反復(fù)確認(rèn)頁面之間的跳轉(zhuǎn)邏輯有有沒有遺漏，但是會(huì)忽略掉用戶循環(huán)操作，可能會(huì)造成打開頁面層級過多而導(dǎo)致無法繼續(xù)操作。
即使用戶打開10個(gè)頁面以內(nèi)5個(gè)以上頁面，也會(huì)需要連續(xù)按多次“返回”按鈕才可以退出小程序，導(dǎo)致用戶的體驗(yàn)也相當(dāng)?shù)夭缓谩?
除正常頁面跳轉(zhuǎn)的邏輯沒有問題之外，在小程序的交互中還需要考慮兩件事，一個(gè)是整個(gè)用戶點(diǎn)擊的最長路徑是不是過長，二是考慮頁面流失率的情況下，對路徑中終端的頁面導(dǎo)航欄設(shè)計(jì)到首頁的跳轉(zhuǎn)，即可解決這個(gè)問題。
小程序最大的優(yōu)勢就是可以分享社交好友，比如看到產(chǎn)品拼單才可以購買的話，用戶會(huì)積極的邀請自己的好友一起購買，達(dá)到快速的裂變，給企業(yè)帶來巨大的流量。而且按照這個(gè)樣分享路徑推廣的成本是極低的。分享的方式可以是分享朋友圈、二維碼分享、微信分享好友。
它是用來顯示h5頁面的組件。只需傳一個(gè)h5頁面的地址，就可以顯示該頁面。
小程序中可以使用 webview 組件，直接把 mobile web 套到小程序里，比如「多抓魚」就是以 webview 為主的。
節(jié)省工作量，已有的 mobile web 不用重復(fù)開發(fā)。
不需要等審核，隨時(shí)部署更新。
直接兼容一些小程序不支持的原生標(biāo)簽，比如 <pre/>。
一個(gè)頁面里只能有一個(gè) <webview/> 組件，不能有其它。比如想用原生的 <button/> 來調(diào)起支付、分享，就不可以。
只有綁定為業(yè)務(wù)域名的 url 才能跳轉(zhuǎn)，不可以隨便打開什么網(wǎng)頁，上限 20 個(gè)。
目前掃一掃頁面時(shí)不支持二次設(shè)計(jì)的，必須調(diào)用微信小程序的官方接口。
具體文檔可參考：https://developers.weixin.qq.com/miniprogram/dev/framework/product/
現(xiàn)在信息爆炸的時(shí)代，很多信息和彈窗會(huì)給用戶造成打擾，忽略了消息的本質(zhì)是為了服務(wù)，因此微信對訂閱消息加了很多限制和優(yōu)化。最主要的便是把選擇權(quán)留給用戶。
在訂閱消息授權(quán)需要用戶主動(dòng)點(diǎn)button 觸發(fā)，如果沒有勾選「總是保持以上選擇，不再詢問」，選擇允許，也只可以收到一條訂閱消息，則每次都會(huì)發(fā)起彈窗詢問；如果用戶勾選「總是保持以上選擇，不再詢問」，只是不喚起彈窗，但也不是可以無限次打擾用戶發(fā)送消息。
長期訂閱消息目前只對特定行業(yè)開放，如政府民生、金融、醫(yī)療等，一般我們也接觸不到，所以不做贅述。
在微信小程序里想獲取用戶的信息，不可以登錄小程序后自動(dòng)彈出登錄彈窗。需要用戶主動(dòng)觸發(fā)登錄按鈕進(jìn)行登錄流程，并且必須為用戶提供「暫不登錄」的選項(xiàng)。
具體文檔可參考：
https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401?scene=0&clicktime=1563895955&from=groupmessage&isappinstalled=0
從小程序鏈接了10多億用戶，在生活中不停的挖線下場景，解決工作、娛樂、購物多種生活需求。小程序已經(jīng)融入了我們線下生活，隨著用戶習(xí)慣的養(yǎng)成，使用頻次和平均時(shí)長逐漸增加。小程序的快速獲客速度，和極低的開發(fā)成本，成為各個(gè)公司的新寵，希望開發(fā)新的小程序入口可以快速且單一的讓用戶有一個(gè)更純粹的產(chǎn)品功能體驗(yàn)，同時(shí)也可以對現(xiàn)有的APP起到引流的目的。
針對小程序的留存一直是開發(fā)者非常在乎的問題，因?yàn)椴幌馎PP開發(fā)者的話語權(quán)很大，因?yàn)樾〕绦虻钠脚_性質(zhì)，對小程序開發(fā)進(jìn)行了很多的限制，讓推廣和營銷還有轉(zhuǎn)化都增加的了難度。沒辦法讓一個(gè)產(chǎn)品孤注一擲的做小程序，目前只能是和APP搭配著來開發(fā)，作為一個(gè)產(chǎn)品功能單一路徑的功能產(chǎn)品。
在設(shè)計(jì)小程序時(shí)不能依靠傳統(tǒng)APP的思維去設(shè)計(jì)，按照輕量、社交、價(jià)值、引流、用戶數(shù)據(jù)和打造小程序生態(tài)環(huán)境。
在設(shè)計(jì)思路上把握設(shè)計(jì)輕量化和用完即走的原則。同時(shí)深挖小程序的用戶場景，梳理APP中的核心主流功能，弱化次要功能。依照原有APP去設(shè)計(jì)更符合小程序使用體驗(yàn)。利用好微信的社交特點(diǎn)，融入微信生態(tài)為后期的服務(wù)升級、轉(zhuǎn)化或者對接其他矩陣小程序留好余地。
因?yàn)橐咔楸l(fā)，生鮮電商在寒冬中迎來了機(jī)會(huì)，給大家養(yǎng)成了消費(fèi)習(xí)慣。社區(qū)電商更是一個(gè)2-3億的一個(gè)巨大市場，本就是以用戶為中心，基于體驗(yàn)和分享去中心化的體驗(yàn)?zāi)Ｊ?，在疫情的情況下培養(yǎng)用戶成本大幅度減少，借助小程序加快向下沉市場滲透的速度。
現(xiàn)在資本也很看好小程序，以后的小程序還會(huì)發(fā)展的越來越快，設(shè)計(jì)師越早掌握小程序的設(shè)計(jì)語言方法越好。市面上關(guān)于小程序的文章不是很多，大家可以著重去這兩個(gè)網(wǎng)站了解相關(guān)問。
微信開放社區(qū)：https://developers.weixin.qq.com/community/develop/mixflow
微信官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/wechatpay.html
把這半年來接觸到的問題跟大家在這里分享，還有很多角落問題還有待深入了解，隨著微信小程序官方文檔和通知的不斷更新，深入挖掘更深入的場景和進(jìn)行更多全面的探索后，后期還會(huì)繼續(xù)會(huì)跟大家分享。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
根據(jù)當(dāng)前品牌升級的需要
對產(chǎn)品APP的視覺做的一次重新設(shè)計(jì)
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
終于趕在2020年的尾巴發(fā)出來了。下半年開始摸索著學(xué)習(xí)UI設(shè)計(jì)和交互設(shè)計(jì)，用這個(gè)作品給這一階段畫上一個(gè)小逗號，新的一年好好學(xué)習(xí)，好好生活。
第一次做redesign練習(xí)，知道自己做的有很多需要改進(jìn)，有不成熟不合理的地方感謝大家?guī)臀抑赋觯黄鸾涣?。感謝@酸梅干超人老師，從作品中學(xué)到很多。
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn