<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          周周

          2020 年,新冠疫情席卷全球,后疫情時代的需求也促使設計師們不斷提出更有意義的醫療解決方案。作者梳理了醫療保健類 APP 的類型,從產品的研究、功能特性、導航、顏色等角度提出了針對醫療保健 APP 的一系列設計建議,簡單直觀的界面、便捷的功能,以及積極的情感,才能使用戶接受并喜歡原本 “令人生畏” 的醫療產品。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Justas Galaburda 繪制的插畫

          在移動應用市場中,的應用類別是 “游戲”,而 “健康與健身” 類勉強躋身前十名。2020 年是十分艱難的一年,但也創造了很多機會,例如,移動應用市場中醫療行業的產品大熱,受到多方關注,這類產品直接影響人們的健康行為,可以使人們的生活更加輕松愉快。

          為此,大批創業人士開始關注醫療這一領域。首先,你需要制作一個功能強大的 APP,因為如果一款產品不能交付使用的話,它就一文不值。但是,這種功能必須通過設計能力來呈現。一個好的醫療保健 APP 設計,應突出其最重要的細節,引導用戶進行操作,并提出下一步建議,從而產生必要的行動。APP 本身可以成為有效的潛在客戶開發工具和公司的主要產品。對于一個健康或醫學相關的產品來說,用戶界面或用戶體驗設計尤為重要。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ George Frigo 設計的呼吸檢測 APP

          本文將探討一些醫療保建 APP 設計的成功案例和經驗,這對設計師和企業來說都很有幫助。

          醫療保健應用的類型

          值得注意的是,“醫療保健類 APP” 是一個綜合性概念,涵蓋了許多與健康和醫學相關的數字產品。

          醫療保健 APP 類型很多,包括但不限于:

          • 醫護人員與患者進行遠程咨詢的 APP(遠程醫療)
          • 患者與其電子健康病歷(EMR,Electronic Health Records)進行交互的 APP
          • 記錄和管理患者生命體征的 APP
          • 提醒患者何時服用藥物或進行運動的 APP
          • 用于醫學計算的 APP
          • 包含醫療信息的參考型 APP
          • 健身和運動類 APP
          • 健康生活方式和健康管理類 APP(日常飲水量、睡眠管理等)

          這似乎是一個相當寬泛的主題(例如,卡路里計數 APP 和醫學教育解決方案相差甚遠,卻都屬于這個領域)。但是,有一些通用的設計方案,可以提高任何一款 mHealth APP 的易用性。( mHealth(Mobile Health,移動醫療或移動健康):通過移動設備提供與醫療相關的服務,例如,通過 PDA、移動電話和衛星通信來提供醫療信息和醫療服務等。)

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △Victor Nikitin 的醫療類 APP

          如何設計移動醫療保健 APP

          一款 APP,即使它不是企業的主要產品,也可能具有巨大的價值。例如,用于醫療工作的配套 APP,能夠為客戶提供信息和服務,從而減輕員工的負擔。如果一款醫療保健類 APP 是企業的主要產品(例如,健身或冥想 APP),因為沒有硬核的業務場景支持,會有很大的風險。有時,這類 APP 設計中的不足會導致用戶完全放棄使用它。

          為了避免這種情況,我們來看看設計醫療保健 APP 的 12 個要點,以及它們如何幫助設計師們設計出更具針對性、更直觀、更的 APP。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Anatoly 設計的 Healthcare APP

          1. 研究 – 成功的第一步

          在制作 APP 界面原型之前,你需要了解產品的目標受眾是誰,他們的地理分布、社會人口特征以及心理特征是什么。因為沒有一種產品可以滿足所有人的需求。用戶的興趣和能力決定了他們如何與 APP 進行交互。因此,回答以下問題將對你有所幫助:

          • 產品的目標受眾是誰?
          • 他們喜歡什么?
          • 他們每天都使用哪些 APP?
          • 他們使用這些 APP 是出于什么目的?

          一般來說,患者和醫生都會使用醫療保健類 APP(假設我們將生活方式類 APP 的用戶也視為患者)。這兩類用戶在功能和 UI 設計方面有不同的需求。

          醫務人員通常需要快速找到一些數據項,例如 EHR / EMR、藥物規格、診斷和治療建議、參考材料等。但是,患者希望能與盡可能少的信息進行交互,且這些信息應該簡單易懂。因為這類用戶中有很多是老年人,或是存在某些障礙的人。

          只有在進行適當的用戶研究,并得出相應結論后,設計師才可以著手進行醫療保健類 APP 的設計。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Chahua 設計的健康管理 APP

          2. 每一個案例都簡潔明了

          對于一般人來說,醫學是一門復雜的學科。所以在設計醫療保健類 APP 時,請盡可能地讓它們保持簡單,這有助于讓用戶平靜下來,并保持專注。

          “復雜性是你的敵人。很多傻瓜都可以讓事情變復雜,而讓事情變簡單是很困難的?!?— 理查德·布蘭森

          為了讓醫療類 APP 看起來很重要并給人留下深刻印象,而將其界面做得過于詳細,是沒有意義的。即使該產品是為醫務人員設計的,也最好 讓界面和邏輯易于理解。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ lgor Savelev 設計的醫療類 APP

          在設計醫療保健類 APP 的用戶界面時,請提供有意義的用戶引導,并 使界面直觀易懂。否則,用戶可能會在觸達該應用核心內容之前就對其體驗感到沮喪。

          如果該 APP 清晰明了,醫生及患者雙方都更容易接受。這樣一來,用戶易于學習上手。即使它是針對醫療的解決方案,人們也不會感到不習慣。

          為幫助用戶在比較舒適的節奏下了解產品功能,請使用漸進呈現的原則,逐步為用戶提供指示。從新手指引開始,將應用程序中的每個操作分成可管理的小模塊,每次僅提供一個指引。(漸進呈現(progressive disclosure):每次只展示用戶當前需要的信息,引導人們平緩地由簡單狀態進入復雜狀態。例如將原本復雜的邏輯隱藏起來,通過更易于認知的界面形式幫助人們輕松完成最為基礎的任務。)

          另外,采用被動輸入、自動輸入、調整鍵盤和動態驗證字段的方式,能夠限制用戶必須輸入的信息量。

          所有醫療信息必須由受過相關教育且具備專業知識的專家提供。否則,內容要么不完整,要么包含錯誤,對于醫療產品來說是不可接受的。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ yurig 為醫生設計的醫療類 APP

          3. 功能和特性

          醫療保健類 APP 的 功能及特性取決于其用途和目標受眾。例如,醫療中心 APP 需為用戶提供個人帳戶,在該帳戶中,用戶可查看其就診記錄、就診建議以及預約情況。如果沒有安全加密的視頻會議和通訊功能,遠程醫療 APP 將毫無意義。畢竟醫療類 APP 依賴的是可靠且有用的通知。

          主頁承載著一個 APP 的主要功能。請試著回答這個問題:用戶為什么使用你的 APP?或與之類似的 APP 呢?如果用戶訪問 APP 是為了記錄或接收某些信息,或是聯系醫生,查看他們的進程等,那么這個功能應該位于 APP 的主頁。

          重要的是,正如前文所提到的,避免一次性出現太多功能,從而造成混亂。不可否認的是,這種情況經常發生在老版本的 APP 上。這些 APP 常常不斷添加新功能,偏離焦點,以至于只有專家用戶才能理解它。

          (專家用戶(super-users):專家用戶在生活中愿意給予企業反饋,主動做口碑,或是積極分享、點贊等,這些無法以價錢衡量,卻能在品牌價值傳遞、產品創新、營銷推廣等經營各環節,為企業帶來實質貢獻。)

          根據帕累托原理(二八法則),80% 的用戶傾向于使用不超過 20% 的功能。因此,務必確認哪些功能對用戶來說是最重要的。

          (帕累托原理( Pareto’s principle):也稱二八法則。在任何特定群體中,重要的因子通常只占少數,因此控制具有重要性的少數因子,即可控制全局。)

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Manoj Dalvadi 設計的 Medicine APP

          4. 便于探索與享受的導航

          清晰的導航結構是一個有效的醫療保健類 APP 的必要條件,也是醫療保健類 APP 用戶界面設計的基礎。沒有清晰的導航,APP 是不會被廣泛使用的。完善的導航意味著率和易用性,這對用戶來說是十分有價值的。醫療專業人士需要的是能夠快速開展工作的應用,因為他們花費了太多時間在處理電子健康檔案(EHR)上。一項由斯坦福醫學院展開的調查發現,醫生花費在每個病人身上的時間,有 62% 是用于處理電子健康檔案。如果針對醫務人員的 APP 不夠簡潔,那 APP 便失去了使用價值。同樣的,對于患者來說,他們也不會喜歡混亂的導航,即使當前的任務不是很重要。

          重要的信息應放在明顯的位置,并在必要時提供詳情。根據 3 次點擊原則,系統應保證用戶在 3 次點擊之內,找到所需信息。

          為了使 APP 導航結構清晰,可采用標準的 APP 導航組件,如漢堡菜單、標簽欄或抽屜式導航等。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Alex Samofalov 設計的醫療類 APP

          顏色的選擇

          一般來說,APP 的顏色選擇取決于目標受眾以及該 APP 的主題。

          醫療保健類 APP 設計通常采用中性色調,尤其是冷色調的藍色和綠色,背景一般為 白色。設計師這樣做是為了達到以下效果:利用柔和的色彩和醫療保健行業的聯系,緩解用戶焦慮并增加可信度。因此,在醫療保健類 APP 的用戶界面中,亮紅色或黃色是很少見的。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Adam Soko?owski 設計的醫療類 APP — Pharmagy

          但是,考慮到醫療類軟件的多功能性,顏色選擇并沒有特別的限制。主要思路是,這類 APP 的整體外觀應營造積極的印象,不應引起焦慮、恐懼或其他不良情緒。

          例如,深色的健身 APP 看起來優雅且有品味:

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Saepul Rohman 的 UI 設計—健康及鍛煉類 APP

          而亮色為 APP 增添了許多活力:

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Michal Parulski 設計的移動健身 APP

          追求個性化

          APP 的個性化定制是近年來最顯著的設計趨勢之一。特定的功能與特定的用戶模式相適應,并且系統會暗示用戶下一步可執行的操作,以免被用戶忽略。

          這些技術的目標是,幫助用戶更快地利用 APP 解決問題。因此,有必要識別和分析用戶模式,并跟進他們的變化。

          正如每個人都有著不同的健康狀況,用戶希望他們所使用的 APP 也能提供同樣獨特的體驗。除此之外,在非醫療保健行業,也有 33% 的用戶會因個性化程度不足而卸載應用程序。

          在設計醫療保健類 APP 時,可以使用許多自定義選項,如顏色主題、個性化通知、交互元素,以及利用 AI 定制個性化推薦等。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Jawad 設計的在線咨詢 APP

          無障礙性是必需的

          無障礙的 UI 設計對任何 APP 來說都很重要,對于醫療類 APP 尤為重要。

          移動醫療解決方案針對的是不同年齡,具有不同視覺和聽覺能力、身體和心理特征的用戶。因此,醫療保健類 APP 主要功能的設計,應保證每個潛在用戶都能訪問。請考慮可能存在的限制,并努力克服它們的負面影響。例如,有暈動癥的人不會喜歡過多的動效。

          但這并不意味著一個醫療保健類 APP 的界面中只能有兩種顏色,也并非所有文本字號都要非常大,但這確實意味著設計師將面臨一些挑戰。對于醫療保健類 APP 來說,其中的挑戰也許相對多一些。無障礙設計能帶來更多的機會,而不是負擔。試著從瀏覽 W3C 網頁中關于無障礙指南的內容開始,嘗試使用色盲模擬器,如下圖這種。

          無需多言,試試移動端無障礙設計的常用方式:將主要元素的尺寸控制一個拇指大小的區域中、添加將視圖改為水平模式的選項,以及放大文本的選項等。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ keithar 的對比度分析儀和色盲模擬器

          積極態度的力量

          醫學不僅復雜,而且通常令人生畏,即使涉及的醫學內容不多。一個比較聰明的辦法是使 APP 看起來與醫學毫不相干。這將消除用戶因刻板印象而產生的壓力,并使體驗更加愉悅。

          除了使用柔和的顏色,還可以在用戶使用 APP 的不同階段 推送鼓舞人心的消息、有趣的圖片、歡快的語音或其他元素。醫療保健類 APP 用戶界面中的圖像和圖標,應始終帶給用戶積極、愉悅的情緒,并 營造一種無痛感和安全感。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Mahdieh Khalili 設計的冠狀病毒 APP

          區別于 Web 設計

          當產品已具備現成的網站,企業方甚至設計師為了降低制作成本,可能會想從產品的網頁版中 “借鑒” 一些解決方案直接應用在移動端設計中,這很可能導致用戶拒絕使用 APP。

          用戶與移動設備間的交互不同于與電腦間的交互。移動設備的屏幕比顯示器屏幕或筆記本屏幕小。此外,用戶與移動設備交互的方式不同于在電腦上進行的操作。在移動設備上,我們做任何事情都依賴手指的移動,不愿意輸入冗長的文本,但同時希望系統能更快地工作。

          一般來說,盡管 APP 中的導航也很重要,但對于移動設備而言,更需關注的是交互設計。在大多數情況下,人們喜歡使用網站來獲取信息,使用 APP 來完成任務。此外,APP 還集成了智能手機的功能,如加速度傳感器和攝像頭,這也是導致 APP 的用戶界面設計與 Web 版有所不同的原因。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Grace Saraswati 設計的健康健身類 APP

          好事過頭反成壞事

          視覺吸引力與功能性之間的平衡是非常重要的。醫療保健類 APP 必須便捷,且不能分散用戶對內容的注意力。

          圖形元素,包括動畫,應始終以滿足使用目的為前提,來考慮是否需要,如數據輸入,以及說明用戶與系統間的微交互等。不能僅僅因為它看起來不錯而添加。不要過度使用漸變和陰影,要將用戶注意力集中在主要信息上。字體也只需選擇一種,可以通過改變字號和其他特征(如斜體、粗體)來做區分。

          使用簡單的配色方案可以更清晰地傳達品牌信息,并創造更好的導航效果。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Dibbendo Pranto 的健康及活動追蹤交互設計

          是否借鑒競爭對手

          你可能會在某些點上考慮,是否要借鑒一些競爭對手的成功案例。好吧,如果這有用的話……一方面,抄襲其他產品是不明智的,因為 它們的設計可能并不完善。你采納的可能是競爭對手的錯誤決策,以至于阻礙 APP 的未來發展。

          另一方面,你應該先對其他應用進行分析,對競品進行研究。應該參考用戶以前使用其他 APP 的經歷,并進行借鑒,從而降低用戶的學習成本。添加太多創意會使 APP 顯得很煩人,用戶需要花大量時間去習慣并學習操作。為此,可以參考蘋果制定的人機交互指南(Human Interface Guidelines )和谷歌制定的材料設計指南( Material Design)。

          “用戶大部分時間是花在別人家的網站上?!?— 雅各布定律

          (雅各布定律:用戶在其他千千萬萬個網站中積累經驗,學會如何使用網站,當一個網站跟其他網站一致時,用戶會立刻知道該如何操作,但如果違反了雅各布定律,用戶會毫不猶豫地離開。)

          必須根據品牌、服務和產品細節來進行設計。例如,健身類 APP 與醫學計算器有著很大區別。設計必須完全符合目標受眾的要求、APP 的功能細節及主題場景等。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △ Martyna Zielińska 的醫療提醒 APP

          可用性測試

          最后,重要的是要記住,每個設計師都有自己的觀點,認為這個或那個決定是合理或有效的。他們可能會對 APP 架構和導航的一致性,嚴謹的設計解決方案,以及產品的實用價值深信不疑,以至于忘記了測試。通過不斷的實踐,設計師提高了自己的共情能力,可以更好地理解用戶需求。但事實上,直覺和經驗帶來的潛在陷阱也會給應用帶來負面影響。

          只有在分析用戶與 APP 界面交互的相關數據后,才能得出相對準確的結論。測試有助于及時獲得反饋,覆蓋 APP 中的所有行為場景,并檢查交互模式。

          用戶的積極參與是成功的關鍵。相關測試受眾的年齡、職業、地理位置、性別、文化和宗教背景等要盡可能接近目標受眾,越接近越好。盡可能多地讓他們使用 APP 的主要功能并收集反饋。

          這份醫療保健類 APP 設計的 12 個要點,我先收藏了

          △  Alex Samofalov 設計的患者卡片 APP

          結論

          設計所關注的并不僅僅是顏色和字體,而是創造價值和解決業務問題的能力。健康是一個敏感且具有挑戰性的問題,需要特別注意。設計師們一直努力地在醫療類 APP 極高的安全性及可用性要求與界面美觀性之間取得平衡。

          經過深思熟慮的醫療保健用戶體驗和 UI 設計是一種極好的工具,它能憑借簡單直觀的界面、便捷的功能以及它所帶來的積極情感等,吸引用戶參與體驗。


          文章來源:優設網     作者:TCC翻譯情報局



          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          頭像在界面設計中的運用

          資深UI設計者

          大約在 3 年前我就注意到像 Facebook 等國外社交 App 在大幅度使用頭像。比如明明文字就能表達的地方,偏偏要塞下幾個小頭像。這個現象我琢磨好久,直到我最近在自己參與的項目中也嘗試著加入頭像,發現數據非常好看,因此和大家分享一下這個成果。

          案例實戰!聊聊頭像在界面設計中的運用

          理論

          在沒有進行實踐之前,我嘗試從理論中尋找原因。

          視覺傳達

          頭像視覺面積更大、顏色更豐富,比文字更吸引人的注意力。

          面孔識別

          之前在網上流行過把微波爐豎著放,就特別像笑臉的事件。為什么有兩個圓圈一道弧線的圖形會被當作人臉的微笑?

          案例實戰!聊聊頭像在界面設計中的運用

          科學界對此早有研究,把這種誤把具有臉特征的視覺圖形當作人臉的現象稱為“空想性錯視(Pareidolia)”。

          早在 1952 年,生物學家赫胥黎(JulianHuxley)就已提出空想性錯視源于人類演化的過程。他認為在人類漫長的進化過程中會遇到各種危險,殘暴的野獸和同族的人類都具有“臉孔”。對“臉孔”的識別越快,就能讓我們在復雜的環境中快速識別潛在的危險或盟友。久而久之,隨著人類進化就衍生出與生俱來對“臉孔”的辨識能力。

          通過現代科技研究發現,在人類大腦中,梭狀回面孔區(right fusiform face area,rFFA)主要負責人臉的認知。它能整合經視皮層處理的視覺刺激,讓我們快速識別人臉。有研究發現,只需 130ms 面孔可以被檢測到。

          案例實戰!聊聊頭像在界面設計中的運用

          很顯然,在界面設計中,因為大多數人的頭像也具有“臉孔”特征,因此能很快地被用戶注意到。

          光暈效應

          心理學家研究發現,人在觀察事物時,并不是對事物部分屬性孤立觀察,而總是傾向于把具有不同屬性、不同部分的對象作為一個統一的整體。格式塔原理即是這一特征的反映。

          案例實戰!聊聊頭像在界面設計中的運用

          這個原理不僅作用于視覺,人對其他人的觀察也是一樣。我們在互相多次交往后才發現和第一印象偏差很大。因為第一印象只是這個人的部分特征,并不完整。大腦會傾向于根據這些部分特征腦補出完整的人,長得漂亮的人會被認為聰明善良,著裝正式的人看著技術更專業即是如此,這種被某個亮眼的特征所籠罩,讓你腦補完整屬性的情況稱為光暈效應。

          案例實戰!聊聊頭像在界面設計中的運用

          因此摳腳大漢用美女頭像能騙到部分男人就見怪不怪了。

          基于以上 3 點分析,用戶會認為頭像背后的就是活生生的人類。

          實踐

          在理論分析后不久我剛好得到了一次實踐的機會。在我們的在線問診 App 中促使用戶購買醫生提供的治療方案是核心目標之一,最開始我們的醫患溝通界面和閑魚類似,分為對話和服務卡片兩種信息。

          案例實戰!聊聊頭像在界面設計中的運用

          通過用戶訪談我們發現患者非常在乎醫生的回復內容(因為花錢買的就是醫生的內容),但是卻表示沒有注意到治療方案卡片。我猜測是由于治療卡片并不像醫生提供的內容,更像是我們系統推送的某種廣告,因此被用戶忽略。于是我做了一個非常小的改動,將治療方案卡片用醫生對話回復的樣式包起來,并增加一句文案?;颊吣苷_理解治療方案也是醫生提供內容,結果治療方案的購買率有明顯提升!

          案例實戰!聊聊頭像在界面設計中的運用

          增加一個醫生頭像和聊天氣泡,下一步轉化也有明顯增長。

          案例實戰!聊聊頭像在界面設計中的運用

          通過這兩次實踐團隊成員開玩笑說這是“加頭像數據就會上漲的方法論”,奈何我們幾個詞藻有限不能再做更高程度的包裝。不過以上案例確實是很好的利用了視覺傳達、面孔識別和光暈效應的原理。

          擴展

          以上實踐都是增加對方的頭像,那界面上展示用戶自己的頭像又有什么意義呢?團隊成員通過探討得出以下觀點:

          1. 切換多賬號,避免登錯號

          有些公司職員需要打理公司的社交網絡賬號同時也有自己的賬號,甚至還有另外的小號。如果一不小心登錯號發錯內容,可能會導致社會性死亡。推特 App 在發布界面顯示自己的頭像點擊可以切換不同的賬號,能有效避免這些問題。

          案例實戰!聊聊頭像在界面設計中的運用

          2. 頭像讓我發言更注意自身形象

          自己的頭像是自己現實人格在網絡上的映射,看著自己的頭像在輸入框旁邊,發言時難免會有“這是我在說話”的潛意識。因此在發表內容時會注意自己的措辭,維持自己的身份形象。同理,如果做匿名社交,在輸入框旁邊放上匿名頭像,也讓用戶覺得自己帶上了面具,發言更肆無忌憚。

          案例實戰!聊聊頭像在界面設計中的運用

          3. 頭像更像溝通

          如果在別人的帖子下面發表評論,有頭像更像是你和帖子的作者進行平等的對話溝通,沒頭像就顯得你在蕓蕓眾生中仰望作者。

          案例實戰!聊聊頭像在界面設計中的運用


          文章來源:優設  作者:龍爪槐守望者

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          TMT微信小程序-缺省頁

          前端達人

          公司微信小程序缺省


          轉自:站酷

          作者:cattie喵星


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          小貓寵物

          前端達人

          小貓寵物是一款面向大眾化的手機寵物app,這里有來自天南地北的愛寵人士的動態分享,也有專業的醫療人員在線解答各式難題,更有超多實惠的寵物用品等你來搶

          收藏
          收藏
          收藏
          收藏
          收藏



          轉自:站酷

          作者:憨寶鴨


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          愛航信息app平臺的優勢有哪些?

          前端達人

          生意越來越不好做,是大家目前的普遍狀況,大多數做生意的手里都有一批貨,急著處理回籠資金卻又賣不出去

          生意越來越不好做,是大家目前的普遍狀況,大多數做生意的手里都有一批貨,急著處理回籠資金卻又賣不出去,所以我們的愛航信息平臺應運而生。

           

          如果你告訴企業或者商家出售他的產品或服務需要支付一部分現金,他肯定會皺眉,或者選擇放棄。但是,如果你告訴他,他可以使用一些自己的產品或者服務來置換廣告位,而不需要花錢,他肯定會欣然接受?!皩嶋H上,仔細考慮這件事的原因可能是許多人在觀念中往往都堅持“現金為王”的心理。

           

          所謂易貨廣告,就是在企業或者商家無法以資金支付廣告位的時候,可以采用以商品或者服務來置換廣告服務,廣告交易可以不通過資金的形式,該種廣告置換的方式可在多個企業或者商家中進行,易貨廣告,是企業或者商家在不用現金的情況下進行置換廣告服務的有效方式。

           

          互聯網是提供貨物與廣告置換交易的絕佳平臺,可以大大提升以物易物的可行性。以物易物這種遠古時代的交易方法讓其出現在互聯網上,其共同點和成功之處就在于,商戶或企業總能尋找到自己需要的,而當交易物品的價值相差不是太遠時,商戶或企業總會選擇自己需要的。

           

          此外,通過提供易貨廣告服務的平臺,還可幫助企業或商家有效解決銷售不暢、資金短缺、產能過剩和庫存積壓的難題。現代易貨廣告之所以快速發展,除了電子商務的催化作用,還有一個重要推動力就是現代企業經營思想的轉變,“愛航信息不僅是一種廣告模式,更會是一種經營思想”。



          轉自:站酷

          作者:愛航信息


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          愛聽音樂APP2.0視覺升級

          前端達人

          音樂可以敲開封閉的心靈,紓解憂郁苦悶的心情,讓人的身心都得到適度的發展、解放。
          愛聽音樂是一款集音樂播放和音樂資訊分享于一體的音樂APP。
          自己平常作圖,學習都會聽歌曲,于是就設計了這款APP。
          在這次設計中,自己又對用戶分析,競品分析,產品的框架又有了重新的認識,
          整個過程中也是受益匪淺,希望自己不忘初心,繼續努力,繼續前行!

          (APP部分界面設計使用圖片來自網絡)
          僅作為自己設計練習使用,不作為任何商業用途!

          設計軟件
          Adobe Photoshop
          Adobe Illustrator
          Adobe After Effects

          收藏
          收藏
          收藏
          收藏




          轉自:站酷

          作者:故事從未開始


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          APP界面設計

          前端達人

          啟動界面

          快速記賬界面

          資產管理界面

          統計排行

          我的界面


          提示信息界面

          轉自:站酷

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          小程序指南

          資深UI設計者

          最近做的都是小程序的項目,小程序設計進一步的研究的時候,發現現在關于小程序的文章很少,也不全面。目前大部分的問題通過微信開放社區,所以來結合官方指南和文章資料,結合工作設計中遇到的問題,總結一份比較全面的小程序設計指南,希望可以幫助到大家。








          1. 小程序的定義


          小程序是一種即用即走,無需下載的手機應用,和APP不同,用戶不用擔心會占用手機內存的問題。用戶可以直接通過掃一掃或附近搜索即可使用。小程序刨除一切繁雜的程序,將用戶的操作變得更加靈活快捷,大大提高了用戶體驗,使用量也大大增加。





          2.小程序的發展



          2016年1月11日,2016微信公開課PRO版在廣州舉行,“微信之父”張小龍首次公開演講,宣布微信公眾號將推出“應用號”,通過公眾號完成一些App的部分功能。


          2016年11月3日晚間,微信團隊宣布:微信小程序正式開放公測。


          2017年9月20日,支付寶小程序向用戶開放公測。


          2018年7月,百度AI開發者大會上,百度宣布百度智能小程序正式上線。


          2019年6月1日,QQ小程序在安卓的新版QQ上如期上線,5天后,正式登陸 iOS 版手機QQ。至此,QQ小程序完成全面上線。





          3.小程序的現狀


          從最早的微信到現在,支付寶小程序、百度小程序、抖音小程序,幾大巨頭都布局了小程序。

          主流小程序平臺網絡關注度差異較大,微信小程序的網絡關注度最高,其次是百度小程序和支付寶小程序。對比用戶認知來看,微信小程序以分享鏈接出現,百度小程序是搶紅包平臺,支付寶小程序是搶特價和抽獎平臺等;小程序平臺網絡關注度差異折射用戶對小程序平臺生態的認知。




          3.1 微信小程序

          微信作為國民社交軟件,日活用戶已達3億,這無疑是巨大的用戶流量聚集地,對商家的吸引程度可想而知。我們接下來也是按照微信小程序為例來逐步講解。


          開源文檔

          微信官方文檔:https://developers.weixin.qq.com/miniprogram/design/



          特點:依附微信強社交模式,引流能力強,流失率低,推廣迅速

          量級:月活10億





          3.2 百度智能小程序

          百度作為中國最大的搜索引擎工具,有天然的數據支撐。百度每日的搜索量可達到幾十個億,又是一個巨大的流量地。此外,基于產品的搜索特性,百度小程序能精準覆蓋目標用戶。通過小程序為用戶提供信息與服務,通過提升整體的服務效率實現用戶留存。


          開源文檔:

          百度-智能小程序設計規范:https://smartprogram.baidu.com/docs/design/overview/introduction/

          特點:基于百度搜索引擎的優勢,增加產品詞的優化曝光。

          量級:月活5億






          3.3 抖音小程序

          抖音小程序開發基于字節跳動客戶,面向字節跳動所有產品線用戶(包括抖音、今日頭條等),不同小程序/小游戲滿足不同種類用戶需求。支持小游戲和小程序產品形態,支持個人與企業開發者,只要有優質內容或優質服務。產品形態與接口形式適配行業標準,減少開發者開發成本。


          開源文檔:

          字節小程序:https://microapp.bytedance.com/docs/zh-CN/mini-app/design/design-guidelines/Design-guidelines

          特點:旨在利用優質內容所關聯和產生的使用場景進行小程序導流,解決開發者流量與轉化困擾。

          量級:月活9億





          3.4 支付寶小程序

          支付寶小程序依托支付寶的商業和生活服務基因,小程序細分行業分布也以生活服務、金融保險和電商等小程序為主。同時支付寶成熟的信用體系也為商家提供了類似于免押租賃等玩法,借助芝麻信用、螞蟻花唄等功能為流量變現創造更多的想象空間。


          開源文檔

          支付寶小程序設計規范:https://docs.alipay.com/mini/design

          特點:在組件上采用了此前成熟的Ant Design 設計,在開放API上則面向自身特色能力來封裝,在框架方面采用開源的React/webpack等技術為基礎,結合了支付寶自身的多年技術沉淀來實現。

          量級:月活7億








          4.小程序的類型



          裂變型

          裂變型小程序是為我們其他小程序,在短期內提供大量流量的。比如跳一跳娛樂游戲類的小程序,還有電商裂變的成功典范可以屬拼多多。


          針對于裂變型的小程序來說,裂變點就是痛點,除了產品的主功能,小程序的裂變設計為什么要用戶裂變?比如拼多多,用戶為了零元購商品才分享的,并且幫忙砍的人也想零元得商品。


          拼多多

          • 缺點:在裂變后幾乎是無法使用,產品的擴展性差

          • 優點:用戶流量來取快、用戶路徑可以達到最短

          • 設計點: 考慮最優的用戶裂變路徑





          留存型

          小程序一直是用完即走的使用體驗。留存型小程序是我們用來沉淀客戶的。需要我們結合自身的產品,發掘能沉淀目標客戶的場景,一般需要結合原有APP來開發,開發一款對用戶有價值、簡單易上手的小程序。

          可以從這幾個方面來考慮:


          • 強運營:一個小程序能給用戶提供的能量畢竟是有限的,現在競品太多,如果不能持續給用戶刺激,沉寂是早晚的事,所以電商產品會通過優惠券、分享立減、拼團來刺激用戶消費。


          • 搭建激勵體系:針對用戶的損失厭惡,建立用戶的激勵體系 - 如利用積分商城,引導用戶通過簽到、消費、分享各種行為獎勵用戶,增加用戶的離開成本。


          • 社區:基于微信的社交基礎上,把微信群建立到小程序里,可以長期培養用戶的使用習慣,而且可以利用社交的互動性,低成本的完成裂變轉化。





          產品型

          產品型的小程序一般是有了APP的商家建立小程序,是為了彼此相互融合,相互促進。因為小程序開發成本更低,更多曝光的機會。產品型的小程序設計一般是照搬全部,或者精簡設計,一般要結合商家業務來判斷。


          如果對于一些垂直品類的產品,像馬蜂窩和攜程旅游將酒店預訂、景點門票預訂、周邊游、租車包車游等各項服務都做了一個功能拆分,生成的了各項小程序的入口,更好的將服務垂直,縮短產品和業務觸達用戶的渠道,自然轉化率更高。


          對于想為了借助微信這一大流量平臺發展的APP可以照搬APP那一套






          工具型

          在小程序中工具型是最符合“用完即走”這個理念的,就像家里的工具一樣想要的時候拿出來。比如識圖、查公交線路、寄快遞、抽獎等小程序,只要打開對應的小程序就可以了,不用的時候也不占用內存。還有一種本地服務小程序,借助“附近的小程序”功能,為周邊提供便利服務,如上門維修、家電回購、本地商圈等等小程序。


          工具型的小程序關注點在于功能本身,解決人們的某一個需求,讓他們更便捷。在設計的時候要注意視覺和結構和信息布局的簡潔,然后考慮易懂先考慮功能理解度和識別性,將功能產品化快速提高用戶的效率。然后引導用戶快捷完成任務





          5.小程序與APP的區別


          01. 開發技術區別:

          APP開發根據開發方式可分為原生APP和Web APP,APP主流開發操作系統有安卓和IOS。

          安卓版本原生APP的開發語言為JAVA,IOS版原生APP的開發語言為Objective-C。

          安卓版本Web APP的開發語言為JAVA+HTML,IOS 版Web APP的開發語言為Objective-C+HTML。

          小程序是基于騰訊、今日頭條、百度等平臺的小程序開發框架進行開發,開發技術類似HTML。




          02.用戶群體

          載體不同則用戶群體不同,小程序是基于微信平臺的應用,用戶群僅限微信用戶,截至目前也就是微信10億+的用戶量;而APP則是上架在App Store及Android應用市場,面向全球擁有智能手機的用戶,也就是33億+的用戶量。



          03.下載及安裝

          APP

          一直存在手機中會占用空間,太多的APP可能會導致內存不足,總是清理緩存。


          小程序

          因為不需要安裝,占用內存空間忽略不計。




          04.開發成本

          APP

          APP在實際開發中,它需要開發安卓系統和iOS系統兩種版本,所用到開發語言不同,同時還需要根據手機的不同尺寸進行適配,開發成本較高。

          一款完善的雙平臺APP平均的開發周期約3個月。


          小程序

          開發成本低,一次開發就可以適配所有手機。平均開發周期約2周。




          05.產品定位

          APP

          原生App的內存就不受控制,那么內容框架可以根據產品定位隨意增添,可發揮的空間非常大,一些電商、社區等等無論多么復雜的應用都能一一實現。


          小程序

          因為內存受限的控制,導致內容框架不同,在小程序上功能架構設計的比較簡單,符合輕量化、“用完即走”。

          功能比較受限,因為接口功能有限。


          現在小程序現有接口

          如上:豆瓣原生app包含了首頁-書影音-小組討論-市集-我的等多個內容板塊,但是小程序只保留了豆瓣最核心的部分-電影評分的欄目,將其商城和社區的模塊全部砍掉了,只是將小程序作為一個資訊型的瀏覽窗口。







          06.基礎框架

          其實移動端產品的設計規范和原則大致是相同的,但是因為受制于微信小程序的框架,小程序產品與App產品在部分版塊的表現形式上會存在一些差異:如頂部導航欄區域等。


          其實移動端產品的設計規范和原則大致是相同的,但是因為受制于微信小程序的框架,小程序產品與App產品在部分版塊的表現形式上會存在一些差異,主要體現在以下幾個方面


          頂部導航欄區域

          小程序的導航欄官方指定了兩種樣式,一深一淺,背景色可自定義,遵循“導航明確、來去自如”的原則。



          頂部導航欄區域  

          底部標簽欄是移動端產品的主要導航方式,主要表示用戶當前所在的位置,所以會有選中與未選中兩種切換方式

          App:可支持最少2個,最多5個的tab切換,圖標大小以及底部標簽欄高度可自定義。

          小程序:也可支持最少2個,最多5個的tab切換,使用原生控件時,要遵從 icon 尺寸81*81px。



          拖動排序

          App:流暢、體驗佳,例如發朋友圈時拖動照片排序。

          小程序:除非必要,否則不建議使用拖動排序。圖片和列表拖動在 Android機型上體驗不夠,會有卡頓的情況。



          消息推送

          APP:會隔三差五給用戶推送廣告,太多未讀提示會逼死強迫癥

          小程序:不允許主動給用戶發送廣告,僅能回復模版消息






          07.用戶體驗


          打開方式

          APP:直接打開

          小程序:從微信首頁,下拉,點擊打開。



          頁面流暢度

          APP:界面切換的流暢度以及加載數據的響應速度都會比小程序更好一些

          小程序:當在比較深的頁面上,或者不是原生的頁面加載時間會比較長,會卡頓。



          氛圍營造

          APP:動畫不受限,活動運營比較好營造氛圍感,帶給用戶非常友好的沉浸感和歸屬感。

          小程序:受內存的影響,而且小程序都是輕量化的功能,動畫的展示元素會非常的少,因而在界面會覺得很平淡,像是工具型產品。



          引流轉化

          APP:在原生APP里可以開發客服,或者直接轉化。APP到小程序里可以直接跳轉。

          小程序:小程序的虛擬支付會影響iOS用戶的轉化,并影響整個業務的轉化??头彩切枰P閉小程序單獨對話。與APP的響應需要一個繁瑣的步驟。






          08.運營推廣

          APP:推廣新用戶需要下載APP,需要占用手機內存,推廣率低。但是APP的開發自由度高,推廣方式不受限制,渠道多,轉化率高

          小程序:依靠微信平臺,可以通過掃描二維碼、搜索、發送好友和朋友圈,推廣率高。雖然推廣率高,但是因為官方的各種限制,增加營銷難度,轉化率低。





          微信小程序的官方設計規范,在微信的官方文檔里都有全面的講解微信小程序的設計指南,我就不多贅述了。按照官方的來對于設計一個基本的小程序是完全夠用的。


          1. 遵守微信小程序設計指南

          友好禮貌、清晰明確、便捷優雅、統一穩定

          大家可以自自行查閱微信官方平臺 :

          https://developers.weixin.qq.com/miniprogram/design/#%E5%8F%8B%E5%A5%BD%E7%A4%BC%E8%B2%8C

          我知道大家可能看官方指南覺得枯燥,特意找來一篇很不錯的小程序的文章,建議結合服用,效果更好。

          設計師必看的小程序設計指南:https://www.zcool.com.cn/article/ZMTA4NjYxMg==.html





          2.突破嘗試設計邊界


          在最基礎的設計,我想跟大家聊一下,在微信的設計規范內如何進行進階設計,這也是我實際工作中探索的結果,希望能給大家更多的啟發。


          01.Navigation Bar

          官方指南:開發者可根據自身功能設計需要在頁面內添加自有導航。并保持不同頁面間導航一致,指向清晰,有路可退。受限于手機屏幕尺寸的限制,小程序頁面的導航應盡量簡單。建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異,以便區分。


          在根據官方的指導下我們如何進行設計呢

          普通換色:



          導航欄設計邊緣探索:


          需要注意的是:自定義導航欄之后要加微信默認的下拉刷新會出現一個問題:下拉刷新組件會出現在導航欄上面!所以如果你需要做自定義導航欄,就需要自定義下拉刷新。下面提供luyimei微信小程序下拉刷新組件





          02. Tabbar

          官方指南:開發者可為小程序頁面添加標簽分頁(Tab)導航。標簽分頁欄可固定在頁面頂部或者底部,便于用戶在不同的分頁間做切換。標簽數量不得少于2個,最多不得超過5個,為確保點擊區域,建議標簽數量不超過4項。一個頁面也不應出現一組以上的標簽分頁欄。


          底部標簽欄

          按照產品需求也可以直接去掉底部導航欄。



          其他導航欄設計的例子





          部標簽欄

          頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中,務必注意保持分頁欄標簽的可用性、可視性和可操作性。




          03.加載動畫


          啟動頁加載樣式

          微信官方小程序里啟動頁加載樣式是由微信官方提供,只需要提供logo就可以。


          頁面下拉刷新加載

          頁面下拉刷新加載雖然微信官方文檔說,開發者無需自行開發,但是想要更改loading也是可以的。現在小程序開發的比較完善,盡量用小程序標準走,自定義開發有可能會破壞小程序的用戶體驗。

          頁面內加載反饋、模態加載和其余的加載樣式都可以根據需求設計,新手可以參考著官方指南來。


          加載反饋注意事項

          • 若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。

          • 載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。

          • 不要在同一個頁面同時使用超過1個加載動畫。






          04.減少輸入

          在頁面設計的時候盡量考慮到手機鍵盤輸入困難或者容易引起誤操作,小程序的設計可以利用一些接口來優化用戶體驗。


          模糊搜索

          遇到必須輸入的場景可以盡量讓用戶選擇。讓比如搜索時的歷史記錄和模糊搜索,而減少或避免不必要的鍵盤輸入,可以大大減少用戶的輸入成本。




          表單輸入

          復雜表單的輸入會給用戶帶來心理負擔,在遇到大量輸入的場景下,可以把輸入換成選擇,盡可能的減少操作,例如掃描銀行卡可以只需點擊按鈕,采用攝像頭識別接口來識別信息。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ,充分利用這些接口將大大提高用戶輸入的效率和準確性,進而優化體驗。







          3.多端適配


          關于小程序的適配設計師不用過多的關心,但是可以了解一下。小程序里的尺寸單位叫 rpx,可以根據屏幕寬度進行自適應。在750*1334的設計稿里,1px = 1rpx。在小程序里寬度都是750rpx,高度就通過那個寬高比獲得,只要涉及具體數值的高度的都通過這個比例計算就行。

          官方文檔:

          https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D






          4.數據反饋

          小程序的普通數據可以通過“小程序數據助手”查看,有特殊觀察的數據可以單獨埋點。當前功能模塊包括數據概況、訪問基礎分析(用戶趨勢、來源分析、留存分析、時長分析、頁面詳情)、實時統計和用戶畫像(年齡性別、省份城市、終端機型),數據與小程序后臺常規分析一致。







          5.推薦優質小程序


          01.【疫小搜】

          疫情期間產品設計師的價值,可以查看周邊疫情情況,和確診人員到自己的距離。



          02.【網易嚴選】

          網易嚴選的品牌理念是“好的生活,沒那么貴”。清晰的品牌設計,設計語言透著追求品質生活的態度。



          03.【多抓魚】

          多抓魚二手書是一款人性化的二手書交易市場小程序。



          04.【京東良研】

          京東良研小程序是專業調研及數據分析的率工具,整體的簡潔、輕量化的設計很符合調研場景的商務感。



          05.【豆瓣】

          豆瓣評分提供的電影介紹及評論。豆瓣是典型的有情懷,小而美的產品了。







          1.彈窗不能覆蓋導航欄

          因為在小程序里導航欄的層級是最高的,即使隱藏導航欄Title Bar也是依然存在的。


          半屏彈窗

          除了官方指南里的模態對話框,也可以嘗試半屏彈窗,一是承載更多信息,二是更好的繼續流程不被打斷。



          活動彈窗

          在運營活動中,活動彈窗起著活動引導,突出重點的作用。這類彈窗往往要設計的“熱鬧”一些,可以更好的引導用戶留存裂變。





          2.虛擬支付


          微信小程序官方曾發布過整改通知,小程序對于iOS系統上提供的虛擬物品不能展現不能出現支付、購買、獲取VIP、開通會員、價格、iOS限制、蘋果系統限制等購買相關字眼;也不能出現引導字眼,比如掃描二維碼獲取。即使實際上它們都不可使用;也不得引導至為外部網頁或App來實現支付功能。


          也就是說在蘋果設備(IOS)系統中,小程序中不能進行虛擬物品的支付,比如積分、購買課程、打賞等等,對于在線教育而言,由于課為售賣的主體,與課程售賣相關的購買、營銷推廣(秒殺、砍價等)等都產生了一系列因虛擬支付衍生的問題。


          目前沒有特別完美的解決方案,要不犧牲用戶體驗曲線救國,要不冒著小程序被封的風險頂風作案。



          01.按照規定

          直接關閉小程序iOS支付,這種是最合規但是也是最無奈的方式,“親寶故事”就是采用這種方式,用ios打開界面入口都跟安卓不一樣。然而實際上他只是把入口給隱藏了,通過安卓手機分享依然可以打開被隱藏的收費信息,當然這個方案對于沒有APP的產品損失還是很大的。






          02.曲線救國

          先買后看

          線上課程的話,可以讓用戶提前在公眾號或者社群里跟iOS用戶解釋為什么不能購課,或者是還有哪些途徑可以獲課。其他途徑提前支付,在后端生成驗證碼,直接輸入解鎖課程。



          虛擬物品轉成實物

          而在ios上,把原本虛擬物品轉化成實物品,比如賣光盤,而本質上的價值是音頻本身。如果按節賣可能實物成本及配送費過高,那么在ios上可以按系列專輯打包賣,使用ios設備的用戶只能賣專輯,買完后可以解鎖該專輯下的所有音頻。當然,這種方式不知道在運營商是否存在問題。



          引導其他方式支付

          從官方給出的規則細則解讀來看,這種引導也算是不合規的,將支付引導去公眾號、到APP上進行。聯系客服完成支付或購買流程。這個是非常不建議的,一旦被發現會有舉報被封的危險。




          2.頁面層級和邏輯跳轉

          小程序的頁面之前的邏輯跳轉,最多可以支持10個層級。在小程序的開發過程中會反復確認頁面之間的跳轉邏輯有有沒有遺漏,但是會忽略掉用戶循環操作,可能會造成打開頁面層級過多而導致無法繼續操作。


          即使用戶打開10個頁面以內5個以上頁面,也會需要連續按多次“返回”按鈕才可以退出小程序,導致用戶的體驗也相當地不好。


          除正常頁面跳轉的邏輯沒有問題之外,在小程序的交互中還需要考慮兩件事,一個是整個用戶點擊的最長路徑是不是過長,二是考慮頁面流失率的情況下,對路徑中終端的頁面導航欄設計到首頁的跳轉,即可解決這個問題。






          3.小程序的分享路徑


          小程序最大的優勢就是可以分享社交好友,比如看到產品拼單才可以購買的話,用戶會積極的邀請自己的好友一起購買,達到快速的裂變,給企業帶來巨大的流量。而且按照這個樣分享路徑推廣的成本是極低的。分享的方式可以是分享朋友圈、二維碼分享、微信分享好友。




          4.Webview


          什么是Webview

          它是用來顯示h5頁面的組件。只需傳一個h5頁面的地址,就可以顯示該頁面。

          小程序中可以使用 webview 組件,直接把 mobile web 套到小程序里,比如「多抓魚」就是以 webview 為主的。


          好處:

          節省工作量,已有的 mobile web 不用重復開發。

          不需要等審核,隨時部署更新。

          直接兼容一些小程序不支持的原生標簽,比如 <pre/>。


          壞處:

          一個頁面里只能有一個 <webview/> 組件,不能有其它。比如想用原生的 <button/> 來調起支付、分享,就不可以。

          只有綁定為業務域名的 url 才能跳轉,不可以隨便打開什么網頁,上限 20 個。







          5.一些必須用原生的頁面


          01.掃一掃

          目前掃一掃頁面時不支持二次設計的,必須調用微信小程序的官方接口。

          具體文檔可參考https://developers.weixin.qq.com/miniprogram/dev/framework/product/





          02.消息通知

          現在信息爆炸的時代,很多信息和彈窗會給用戶造成打擾,忽略了消息的本質是為了服務,因此微信對訂閱消息加了很多限制和優化。最主要的便是把選擇權留給用戶。


          在訂閱消息授權需要用戶主動點button 觸發,如果沒有勾選「總是保持以上選擇,不再詢問」,選擇允許,也只可以收到一條訂閱消息,則每次都會發起彈窗詢問;如果用戶勾選「總是保持以上選擇,不再詢問」,只是不喚起彈窗,但也不是可以無限次打擾用戶發送消息。


          長期訂閱消息目前只對特定行業開放,如政府民生、金融、醫療等,一般我們也接觸不到,所以不做贅述。





          03.登錄注冊流程

          在微信小程序里想獲取用戶的信息,不可以登錄小程序后自動彈出登錄彈窗。需要用戶主動觸發登錄按鈕進行登錄流程,并且必須為用戶提供「暫不登錄」的選項。

          具體文檔可參考:

          https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401?scene=0&clicktime=1563895955&from=groupmessage&isappinstalled=0






          從小程序鏈接了10多億用戶,在生活中不停的挖線下場景,解決工作、娛樂、購物多種生活需求。小程序已經融入了我們線下生活,隨著用戶習慣的養成,使用頻次和平均時長逐漸增加。小程序的快速獲客速度,和極低的開發成本,成為各個公司的新寵,希望開發新的小程序入口可以快速且單一的讓用戶有一個更純粹的產品功能體驗,同時也可以對現有的APP起到引流的目的。



          1.用戶的留存

          針對小程序的留存一直是開發者非常在乎的問題,因為不像APP開發者的話語權很大,因為小程序的平臺性質,對小程序開發進行了很多的限制,讓推廣和營銷還有轉化都增加的了難度。沒辦法讓一個產品孤注一擲的做小程序,目前只能是和APP搭配著來開發,作為一個產品功能單一路徑的功能產品。




          2.小程序的設計思維

          在設計小程序時不能依靠傳統APP的思維去設計,按照輕量、社交、價值、引流、用戶數據和打造小程序生態環境。

          在設計思路上把握設計輕量化和用完即走的原則。同時深挖小程序的用戶場景,梳理APP中的核心主流功能,弱化次要功能。依照原有APP去設計更符合小程序使用體驗。利用好微信的社交特點,融入微信生態為后期的服務升級、轉化或者對接其他矩陣小程序留好余地。



          3.市場背景的機會

          因為疫情爆發,生鮮電商在寒冬中迎來了機會,給大家養成了消費習慣。社區電商更是一個2-3億的一個巨大市場,本就是以用戶為中心,基于體驗和分享去中心化的體驗模式,在疫情的情況下培養用戶成本大幅度減少,借助小程序加快向下沉市場滲透的速度。





          現在資本也很看好小程序,以后的小程序還會發展的越來越快,設計師越早掌握小程序的設計語言方法越好。市面上關于小程序的文章不是很多,大家可以著重去這兩個網站了解相關問。

          微信開放社區https://developers.weixin.qq.com/community/develop/mixflow

          微信官方文檔:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/wechatpay.html

          把這半年來接觸到的問題跟大家在這里分享,還有很多角落問題還有待深入了解,隨著微信小程序官方文檔和通知的不斷更新,深入挖掘更深入的場景和進行更多全面的探索后,后期還會繼續會跟大家分享。



          文章來源:站酷   作者:郝小七

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          旅行APP UED視覺升級

          前端達人

          根據當前品牌升級的需要

          對產品APP的視覺做的一次重新設計

          轉自:站酷

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          喜馬拉雅 移動端APP redesign

          前端達人

          終于趕在2020年的尾巴發出來了。下半年開始摸索著學習UI設計和交互設計,用這個作品給這一階段畫上一個小逗號,新的一年好好學習,好好生活。

          第一次做redesign練習,知道自己做的有很多需要改進,有不成熟不合理的地方感謝大家幫我指出,一起交流。感謝@酸梅干超人老師,從作品中學到很多。




          轉自:站酷

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合