<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 首頁

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          天宇 設計資源

          大腦在處理和組織看到的信息時會使用一套快捷方法,了解這些方法是設計成功的關鍵要素。本文介紹了十一條有效的設計準則,用形象的圖解幫助讀者更好地理解設計準則在設計工作中的運用,幫助你利用這些方法更快捷地開展設計。適合關注產品設計的小伙伴閱讀。

          感知力是大腦將不同的信息連接和組織成一個連貫整體的機制。例如我們將相似的對象分組并連接起來,能夠輕松地區分出不屬于該組的對象。

          大腦在處理和組織看到的信息時會使用一套快捷方法,了解這些方法是設計成功的關鍵要素。

          在UI設計時,我們應該有意識地運用感知力,用足夠的事實來驗證設計,有依有據地解釋為什么這個圖形元素要這樣設計?背后的原因是什么?

          提升感知力有助于清晰地解釋設計方案,避免常見的設計錯誤,引導我們將設計做得更好、更容易理解!

          一、鄰近原則

          彼此靠近的元素會被自動理解為一組。把它們的位置放得更遠,會給人一種這些元素是完全獨立的個體的印象。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          在UI設計中,可以利用鄰近原則將相似的界面元素組合在一起,把控總體布局。

          鄰近規則適用于主導航、卡片、按鈕、內容和圖標等。我們還可以使用適當的留白將不同的元素進一步分開,創建一個層級更清晰的界面結構,以此來幫助用戶瀏覽和理解不同類型的信息。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          鄰近原則是直接影響界面可用性的基本規則之一。如果隨意控制元素的位置和間距,有可能會讓整個產品變得混亂和難以理解。

          二、相似原則

          視覺上相似的元素會被視為同一組,視覺上不同的元素,大腦會下意識將其視為單獨的元素。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          利用相似性可以來定義界面的特征,例如顏色、形狀、尺寸、紋理或空間位置等。最容易區分的是顏色相似,其次是尺寸和形狀相似。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          如果一個元素和界面中其他的元素都不同,無法融入到其他元素組中,那么這個元素就會變得非常顯眼。

          我們可以利用這種差異化的效果來突出一些具有引導性或者功能性的元素,例如登錄按鈕或者加入購物車按鈕等。

          三、閉合原則

          一組不相連的元素組合在一起,我們會下意識地自動補充這些元素之間的空白,得到一個完整的、可識別的形狀。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          閉合原則有多種不同的用法。例如一個虛線箭頭,我們會填補空白并把這些點連接在一起,得到一條完整的線段。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          閉合原則還有助于識別抽象的圖標形狀并賦予更多的含義。在圖標設計中,為了避免信息過載,大多數圖標的設計都很簡潔,更方便用戶理解。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          運用閉合原則的經典案例包括用不同虛線構成的IBM標志、利用正負形空間組合而成的WWF熊貓標志。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          四、對稱原則

          UI界面中的元素一旦有對稱性,就會產生秩序感,我們很快就能看到并理解這種形式。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          我們天生喜歡對稱的物體。對稱排列的元素在視覺上更令人舒服,也更美觀。

          可能有人覺得對稱設計過于呆板,這種想法在平面廣告或視覺設計中可能正確,但在UI設計中對稱布局是相當重要且實用的界面排版形式。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          對稱布局讓設計更容易理解,也更友好,缺乏對稱會導致界面混亂,不知道該關注哪個元素。當然,如果想讓某個模塊突出展示,也可以嘗試打破對稱性,這樣不對稱的元素就能在界面中脫穎而出。

          五、連續性原則

          界面中沿著同一條線對齊的元素會被認為屬于同一組。

          在瀏覽界面時,視線會第一時間尋找最順暢的視覺動線。這也解釋了為什么在使用連續性原則時,需要確保直線(或曲線)是均勻和可預測的。

          線條越均勻,生成的形狀越容易被用戶正確識別。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          連續性有助于界面保持上下垂直滾動時的節奏,相似的內容應始終保持對齊。如果某個元素打破了這種連續性,我們的瀏覽節奏會被打亂,瀏覽速度也會變慢。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          當下的UI設計中,流行帶有圓角的卡片和按鈕效果。其中的一個原因是我們對于直角的處理速度稍慢,視線需要停頓并旋轉90度,而更圓滑的導角效果能幫助我們的視線更快地轉換。

          六、共同命運原則

          按相同方向、以相同速度運動的元素被認為是一組。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          在設計輪播、下拉列表、過渡動畫等場景時,共同命運原則會很有幫助。例如我們的視線既跟隨輪播圖水平移動,還跟隨下拉列表向下展開。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          七、希克定律/米勒定律

          • 希克定律:可供選擇的選項越多越復雜,就越難做出選擇。
          • 米勒定律:我們的大腦在同一時間只能處理大約7±2個對象。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          根據希克定律,可供的選擇數量應該有限制。有太多東西可供選擇可能會導致用戶迷失方向,做出判斷的時間加長,甚至會感到壓力。

          米勒定律提到,大腦處理信息的能力與認知負荷有直接的關系。我們大腦一次能處理的信息量大約是7個對象。對象數量越多,處理它們所需的時間就越長。

          在設計時,盡量不要超過七個選項,為了獲得最好的體驗,應盡量將選項保持在4-5個。這意味著需要控制主導航數量、按鈕數量、下拉選項和輪播圖數量等。

          當需要用戶做選擇時,最好能突出顯示最受歡迎或最推薦的選項,幫助用戶更快做出決策。

          八、前景/背景

          我們能夠本能地區分界面中的圖形元素和背景。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          界面由不同類型和樣式的圖層組成,每個圖層都有不同的層次結構。

          為了避免層次結構混淆,我們需要清楚地定義界面的所有元素。背景不需要設計設計的太花哨,有可能會搶奪用戶對主要內容的注意力。

          輔助內容和功能不需要太明顯,并且需要與主要內容在設計上做出區分。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          可以使用對比關系、位置關系和陰影等方法幫助用戶區分內容和背景。

          九、審美可用性效應

          用戶通常認為具有視覺吸引力(美觀)的產品更實用。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          根據這個原則,流行、對稱、美觀的界面會對用戶產生更積極的影響。如果視覺效果給人足夠好的第一印象,用戶可能會忽略一些可用性問題。

          審美可用性的基礎在于具有一定的可用性,之后才會起作用。如果產品本身的功能就很糟糕,那么再美觀的界面也無濟于事。

          高質量、美觀的界面有助于建立用戶信任。相反一個看起來混亂的設計會讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題,但他們也會覺得這個產品有風險或者不正規。

          高質量的UI設計對于銀行類、金融類和醫療類產品來說尤為重要,尤其是在需要用戶提供個人信息或涉及交易的使用場景中。

          十、串行位置效應

          我們最容易記住一組當中的第一個和最后一個元素。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          將最重要的內容或元素放在每組的第一個或最后一個,吸引用戶注意力,方便高頻操作。而次要的內容操作頻率相對較低,則放到中間位置。

          例如在構建導航、下拉列表等場景中,將重要的操作放到首位。

          十一、隔離效應

          在一組看起來相似的元素中,我們總是會記住與其余元素不匹配的那個元素。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          在UI設計中,隔離效應意味著將界面中重要的內容或關鍵的操作在視覺上與眾不同。

          最典型案例是界面中的CTA(號召性用語)按鈕。通過改變CTA按鈕的顏色、尺寸等,與界面中的其他按鈕區分開來,第一時間引起用戶的注意。

          專欄作家

          作者:Clippp,每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

          本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

          題圖來自 Unsplash,基于CC0協議。

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

           

          蘭亭妙微(m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          產品經理必備!2025最受歡迎的10款原型交互設計軟件

          ui設計分享達人

          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          原型設計是每一個產品經理都需要具備的基礎能力,因此有一款稱手好用的原型設計軟件,更是產品人手中不可或缺的利器。相比其他設計軟件,原型設計軟件的重點之一是交互設計,它需要動態模擬用戶操作,精準呈現產品的交互流程,這樣才能感受真實的用戶體驗,幫助產品優化迭代。
          那么,有哪些優秀的原型交互設計軟件呢?本文盤點了10款備受產品經理喜愛的原型軟件,助你2025年設計更高效更簡單~
           
          1、
          摹客RP
          摹客RP是一款高效易用的原型交互設計軟件,界面直觀、交互全面,可在線協作使用,能幫助產品經理快速構建產品原型。它還擁有海量的模板組件,組件自帶交互,拖拽即用,用戶無需經驗也可創建復雜的交互效果。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)全面的交互類型:不僅包含頁面交互,還有畫板級、組件級、狀態級交互,交互效果細膩,產品原型更逼真。
          2)自制交互組件:可根據項目所需,自制復雜組件,自定義樣式以及交互細節,原型交互設計不受限。
          3)組件庫和模板:內置豐富的組件和設計模板,包括各種按鈕、輸入框等交互控件,用戶可快速調用。
          4)拖拽式編輯:只需鼠標拖拽,一步到位,即可快速添加交互效果。
          5)實時預覽編輯:支持實時預覽設計稿,多個成員可以在同一項目中編輯,大大提升了協作效率。
          價格:
          可免費使用
          學習難度:
          簡單,新用戶也能快速上手
          使用環境:
          支持Web、Windows、MacOS
          推薦理由:
          摹客RP大幅降低了原型交互設計的門檻,簡單易用、操作流暢,交互效果也很全面。而且,它的團隊協作功能突出,非常適合需要快速構建交互原型的產品團隊。
          推薦評級:
          ??????????
           
          2、
          Axure
          Axure是一款經典的原型交互設計軟件,交互功能強大靈活,在產品經理和UX設計師中享有盛譽,特別適合需要復雜交互和邏輯實現的中大型項目。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)高級交互設計:支持拖拽式創建動態面板、條件邏輯和變量操作,實現高復雜度的交互效果,精準模擬用戶體驗。
          2)組件豐富:內置按鈕、表單、圖表等多種控件,可通過配置實現多樣化的交互設計。
          3)交互邏輯編輯:支持條件分支、邏輯判斷和變量傳遞,滿足復雜業務流程的原型設計需求。
          4)文檔生成:支持自動生成詳細的原型文檔,便于交付和開發參考。
          價格:
          $29/月起
          學習難度:
          Axure操作復雜,對初學者來說難度較大。
          使用環境:
          客戶端使用,支持Windows、MacOS
          推薦理由:
          Axure適合對交互設計有較高要求的專業團隊,其強大的邏輯功能和動態效果讓用戶能夠細致地還原產品交互過程,是中大型項目不可或缺的利器。
          推薦評級:
          ??????????
           
          Justinmind是一款功能全面的原型交互設計軟件,專注于幫助用戶從低保真到高保真階段快速構建交互原型。它不僅支持豐富的交互動作,還內置大量預設模板和控件,是一款集原型設計、交互開發和團隊協作為一體的全能型工具。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)交互設計支持:通過可視化界面實現頁面跳轉、動態面板、懸停效果等交互行為,無需編程即可完成復雜交互設計。
          2)模板與組件庫:內置豐富的UI組件庫和交互模板,可快速拖放使用,提升設計效率。
          3)導出功能多樣:可以將原型轉換為功能齊全且可交互的 HTML,還可導出導出為 SVG 和 PNG。
          4)團隊協作:支持團隊成員在線評論和文檔共享,讓協作更加高效。
          價格:
          $19/人/月起
          學習難度:
          簡單
          使用環境:
          支持Web、Windows、MacOS
          推薦理由:
          無需輸入任何代碼,即可用Justinmind創建可交互的原型,還能用它繼做UI設計、VR和AP設計,功能全面,值得嘗試。
          推薦評級:
          ??????????
           
          4、
          ProtoPie
          ProtoPie是一款專業的高保真交互原型設計工具,專注于通過邏輯和交互動作的直觀設置,構建接近真實產品的交互體驗,特別適合需要創建復雜交互的產品經理和設計師。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)無代碼交互創建:通過觸發器、動作和對象的組合,無需編程即可輕松實現復雜的交互邏輯。
          2)跨設備交互模擬:支持多設備之間的交互,例如手機與平板、手機與電腦的聯動效果。
          3)傳感器支持:獨特支持設備傳感器(如陀螺儀、重力感應、語音輸入等),更真實地模擬用戶場景。
          4)高保真原型預覽:所見即所得的預覽功能,可快速驗證交互效果。
          5)插件和集成:與Figma、Sketch等工具無縫對接,快速導入設計資源。
          價格:
          $12/用人/月起
          學習難度:
          中等,新手需要一定時間學習
          使用環境:
          支持Windows、MacOS
          推薦理由:
          ProtoPie是專門構建高度復雜和真實交互的設計工具,適合對產品交互設計要求較高的團隊,其獨特的傳感器支持和多設備聯動功能,受到不少產品經理的喜愛。
          推薦評級:
          ????????
           
          5、
          Uizard
          Uizard是一款新興的AI驅動原型設計工具,它的獨特之處在于智能化和易用性,即使是沒有設計經驗的用戶,也可以通過簡單的操作快速構建具有交互功能的高質量原型。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)AI生成設計:支持將手繪草圖自動轉化為數字化原型,大幅提升設計效率。
          2)簡單交互設計:通過點擊即可實現頁面跳轉和基本動態交互,滿足初期驗證需求。
          3)模板庫:內置大量行業通用的UI模板和組件,用戶可以直接使用或調整,快速完成設計。。
          價格:
          $15/人/月起
          學習難度:
          簡單
          使用環境:
          基于wed端使用,適用于所有主流瀏覽器
          推薦理由:
          Uizard的特點是:快速、智能、簡潔,非常適合需要快速構思和驗證產品創意的團隊或個人。特別是對于時間有限的初創團隊來說,Uizard提供了從草圖到原型的一站式解決方案。雖然其交互功能較為基礎,但對于早期原型制作來說夠用了。
          推薦評級:
          ????????
           
          6、
          Marvel
          Marvel是一款全流程原型設計工具,專注于快速創建交互原型和用戶體驗測試,適合快速原型制作,但不適合高保真的復雜交互設計。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)快速交互設計:通過簡單的鏈接設置和拖放操作,即可創建頁面跳轉、動畫效果等交互行為。
          2)用戶測試工具:支持收集用戶反饋,通過點擊熱圖和可用性測試,優化設計流程。
          3)團隊協作與評論:團隊成員可在設計文件中直接評論和標注,溝通更高效。
          4)與第三方工具集成:與Sketch、Figma等設計工具無縫銜接,支持導入設計文件進行交互設置。
          價格:
          $12/人/月起
          學習難度:
          簡單
          使用環境:
          基于wed端使用,適用于所有主流瀏覽器
          推薦理由:
          Marvel操作直觀、團隊協作功能強大,它的用戶測試功能為產品優化提供了很多支持,對于小團隊和初創企業來說,它是一個性價比較高的選擇。
          推薦評級:
          ????????
           
          7、
          Proto.io
          Proto.io是一款強大的原型設計工具,提供了從設計、交互到用戶測試的一站式服務,它的的優勢在于高度靈活的交互設計功能和廣泛的設備適配能力,非常適合需要快速驗證復雜交互的團隊。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)高度靈活的交互設計:支持頁面跳轉、動態效果、動畫、條件邏輯等多種交互功能,無需編碼即可實現復雜設計。
          2)豐富的組件庫和模板:提供大量內置UI控件和行業模板,可直接拖拽使用并快速定制。
          3)動畫編輯器:支持創建時間軸動畫,輕松實現復雜的動態效果。
          4)用戶測試功能:支持與用戶共享原型鏈接或QR碼,收集反饋并優化設計。
          價格:
          $24/月起
          學習難度:
          中等,新手需要一定的時間學習
          使用環境:
          基于wed端使用,適用于所有主流瀏覽器
          推薦理由:
          Proto.io不僅交互設計功能強大,還支持動畫設計,提供從設計到測試的全面支持,非常適合需要復雜交互邏輯的項目。
          推薦評級:
          ??????????
           
          8、
          Balsamiq
          Balsamiq是一款專注于低保真原型設計的工具,其手繪風格的界面設計獨具特色,旨在快速構思和驗證產品想法,是產品經理和開發團隊早期規劃的絕佳工具。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)手繪風格低保真設計:通過手繪風格元素,幫助用戶快速創建清晰的線框圖,避免過多關注視覺細節。
          2)豐富的UI控件庫:內置大量UI組件,包括按鈕、表單、導航欄等,可快速拖拽到畫布中。
          3)簡單交互設計:支持基本頁面鏈接和跳轉功能,用于模擬導航流程。
          4)云端協作:支持多人協作編輯,方便團隊在早期階段快速迭代和驗證。
          價格:
          $9/人/月起
          學習難度:
          簡單,初學者也能快速上手
          使用環境:
          支持Web、Windows、MacOS
          推薦理由
          Balsamiq是低保真原型設計的標桿工具,其簡單、高效和專注的設計理念,特別適合項目早期的頭腦風暴和結構規劃。
          推薦評級:
          ????????
           
          9、
          Figma
          Figma是一款基于云端的協作式設計工具,在原型交互設計領域備受推崇。它以實時協作、高效的原型設計和無縫的團隊溝通功能為核心亮點,是產品經理和設計師的強大助手。Figma無需安裝,直接通過瀏覽器即可使用,突破了傳統設計工具的限制。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)實時協作:多成員可同時在線編輯同一文件,實時查看修改,顯著提高團隊效率。
          2)組件和設計系統:提供強大的組件管理功能,支持組件復用和全局更新,確保設計的一致性。
          3)簡單交互設計功能:支持創建動態交互和動畫,包括頁面跳轉、懸停效果和狀態切換等。
          價格:
          $12/人/月起
          學習難度:
          簡單,還有豐富的教程文檔
          使用環境:
          基于wed端使用,適用于所有主流瀏覽器
          推薦理由:
          Figma憑借實時協作能力和直觀的交互設計功能,成為團隊協作和快速設計的最佳選擇之一。特別是在遠程辦公和分布式團隊中,它的云端優勢更加突出。
          推薦評級:
          ????????
           
          10、
          Visily
          Visily 是一款智能化的原型設計工具,它通過AI功能和直觀的界面,幫助用戶快速創建交互原型,是初創團隊、產品經理和非設計背景團隊的理想選擇。
          產品經理必備!2025最受歡迎的10款原型交互設計軟件
           
           
          功能亮點:
          1)AI設計助手:利用AI技術,將手繪草圖或現有的設計圖轉化為數字化原型,大幅提升效率。
          2)簡單交互功能:支持頁面跳轉、鏈接和基本動態效果,便于快速模擬用戶流程。
          3)預設組件和模板:提供豐富的UI組件和行業模板,適用于多種設計場景。
          價格:
          $10/人/月
          學習難度:
          簡單
          使用環境:
          基于wed端使用,適用于所有主流瀏覽器
          推薦理由:
          Visily的AI設計功能是最大亮點,降低了原型設計門檻,對沒有設計背景的用戶來說很友好。此外,Visily組件豐富,適合快速制作低至中保真原型。
          推薦評級:
          ????????
           
          以上10款原型交互設計軟件各具特色,能夠滿足不同團隊和項目的需求。希望你能找到一款最適合自己的工具,用它打造出更出色的產品吧!

          作者:摹客設計云
          鏈接:https://www.zcool.com.cn/article/ZMTY1MDIwMA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          APP優秀產品設計亮點

          ui設計分享達人

          為什么我想不到這些設計亮點
           
           
           
           
          體驗目錄
           
          一、這個隱藏的手勢交互你忽略沒
          二、情感化的背景設計
          三、自適應的瓷片區布局
          四、考慮用戶習慣的導航設計
          五、應景的標簽設計
          六、情感化的心情記錄
          七、動態感的個人中心設計
          八、動態 Banner 更有吸引力
          九、有點意思的圖標設計
          十、營造冬季氛圍的背景設計
           
            
           
          一、這個隱藏的手勢交互你忽略沒
           
          隨著用戶體驗的不斷升級,手勢交互變得越發普及,使得產品操作體驗變得更有互動感和趣味性。通過手勢交互的輔助,讓產品設計更加簡化,更有利于用戶實現操作目標。
           
          我們經常用抖音刷短視頻,可以通過單擊底部標簽欄“首頁”進行刷新,長按則會彈出模式切換。通過手勢交互的輔助可以快速切換單列、雙列展示形式,以及刷新首頁和默認靜音設置,不知道這個操作你發現了嗎?
          為什么我想不到這些設計亮點
           
           
           
           
          二、情感化的背景設計
           
          情感化設計可以讓產品與用戶建立更強的共鳴感,讓用戶感受到產品的溫度,促進對其服務的認可度。
           
          在杭州生活的人會經常使用浙里辦,在一些節慶、節氣等時間段打開 App 時,頂部視覺區域背景會進行應景設計。通過情感化的表達方式營造氛圍感的同時,也讓用戶感受到產品的溫度,帶來更加溫馨的體驗感。
          為什么我想不到這些設計亮點
           
           
           
           
          三、自適應的瓷片區布局
           
          瓷片區的靈活性可以方便更多功能模塊的布局,也能自由更換和增刪處理,只要保障基礎框架結構的穩定即可。
           
          酷狗音樂未登錄時首頁推薦板塊的瓷片區設計,在滑動過程中會進行自適應布局,方便進行結構的填充和內容的補充。默認時隱藏部分內容可以提高當前位置的利用率,便于提高更多內容的曝光度,交互過程中的動效表達也非常的流暢自然。
          為什么我想不到這些設計亮點
           
           
           
           
          四、考慮用戶習慣的導航設計
           
          抽屜式導航是導航設計表達的形式之一,由于屬于隱藏式的設計,通常集合非操作頻繁的功能。
           
          酷狗音樂采用了底部標簽欄和抽屜式導航結合的形式,即滿足高頻功能的便利性,也能集合更多低頻功能。由于大屏手機的普及,用戶單手操作的習慣各有差異,考慮用戶左手或者右手都能輕松打開導航,酷狗音樂右上角的導航圖標可以從右側打開導航,左手貼邊向右滑可以從左側打開導航,滿足了不同操作習慣的用戶需求。
          為什么我想不到這些設計亮點
           
           
           
           
          五、應景的標簽設計
           
          標簽設計的表達形式非常多樣化,也被運用到眾多的場景中,輔助內容的傳播與理解等。
           
          天氣冷了,大家會在淘寶買一些秋冬服裝等商品,當搜索秋冬外套、保暖等關鍵詞時,會出現降溫坐標、輕暖等標簽設計。通過標簽突出了商品關鍵詞的特征,也讓用戶可以感受到季節的變化,促進商品被搜索的概率。
          為什么我想不到這些設計亮點
           
           
           
           
          六、情感化的心情記錄
           
          隨著生活壓力和職場壓力的不斷增加,為了緩解大家的焦慮情緒,衍生出很多日記類產品,幫助大家記錄心情和管理調節。
           
          最近在使用心島日記記錄心情時,記錄界面設計感覺很有意思。通過轉盤的交互形式選擇心情,也通過應景的動效表達輔助心情傳遞,整體設計情感化體驗度非常好。
          為什么我想不到這些設計亮點
           
           
           
           
          七、動態感的個人中心設計
           
          個人中心的設計在整個產品設計中都是非常重要的存在,也因此出現了眾多優秀的設計方案。
           
          心島日記的個人中心設計中,頂部區域背景以動態的形式表達,描繪出的場景讓人心情愉悅。相較于靜態畫面的表達,動感的設計更能打動用戶。
          為什么我想不到這些設計亮點
           
           
           
           
          八、動態 Banner 更有吸引力
           
          Banner 設計在產品中的表現形式也非常豐富,可以在視覺創意中發揮,也可以在造型結構中變化,還能動靜各異。
           
          最近在使用支付寶時,首頁為了突出發放消費券的活動,采用了動態 Banner 設計。突出的視覺和動感的效果,讓活動變得特別突出,增加板塊吸引力,提高用戶參與度。
          為什么我想不到這些設計亮點
           
           
           
           
          九、有點意思的圖標設計
           
          隨著圖標設計的風格越來越多,使得產品設計的感官體驗得到了提升,設計師也在不斷嘗試更多的創意表達。
           
          最近在飛豬旅行 App 中,發現其圖標設計有點意思。部分圖標采用書法里面的連筆形式,結合漸變色使得整體圖標風格年輕活潑,設計表達獨特而有新意。
          為什么我想不到這些設計亮點
           
           
           
           
          十、營造冬季氛圍的背景設計
           
          冬天雖然很冷,但是也有獨特的風景帶給大家,在寒冷中感受這個季節的獨特魅力。
           
          飛豬旅行 App 在首頁設計中,頂部背景區域結合冬季下雪與堆雪人等元素,以動態的形式營造了這個冬季獨有的氛圍感。不僅提升了產品的感官度,也讓用戶更有季節代入感。
          為什么我想不到這些設計亮點
           
           
          小結
           
          設計靈感來源于日積月累,希望我們的產品體驗日記欄目可以成為大家積累的來源。本文描述屬于個人觀點,不足之處大家留言補充。


          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTY0OTI0NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          節省成本、提升效率的UI組件庫

          資深UI設計者

          這次全面的改版,針對UI與UE不統一的問題,邁出了關鍵的一步——首次構建組件庫
          盡管在初期階段,面臨諸多挑戰和困難,但堅持不懈的努力使得組件庫逐漸成形。組件庫基本完善后,對工作效率的提升效果簡直令人興奮。組件的靈活變體和自動化的布局功能,不僅極大地提升了設計效率,也確保了界面的一致性和用戶體驗的連貫性。這一嘗試不僅解決了我們面臨的問題,更為未來的設計和開發工作奠定了堅實的基礎,期待未來更多的挑戰與進步。

          UI 設計公司的收費標準一般是怎樣的?判斷 UI 設計公司的收費是否合理

          藍藍設計的小編

          判斷 UI 設計公司的收費是否合理,可以從以下多個方面著手:
          考量設計公司的專業水平與資質

          團隊專業背景:查看設計團隊成員的學歷、畢業院校以及所學專業等情況,若團隊成員大多來自知名設計院校,具備扎實的專業基礎,例如有專業的視覺傳達、交互設計等相關專業背景,往往意味著能產出高質量的設計成果,相應收費可能會偏高,但也更具合理性。
          行業經驗:了解其在 UI 設計領域的從業年限以及過往參與過的項目類型和數量。有豐富行業經驗的公司,經歷過各種不同客戶需求和復雜項目的打磨,在處理問題、把握設計方向上更有優勢,對于復雜項目合理收取較高費用是正常的,比如長期服務大型企業、完成過多個行業標桿性 UI 設計項目的公司,其報價高些可能是基于深厚的實踐積累。
          所獲榮譽與資質認證:關注該公司是否獲得過一些權威的 UI 設計相關獎項,或者具備如紅點獎等。這些榮譽和認證是對其設計實力與服務質量的一種認可,收費相對高些如果匹配其專業形象,也是合理的體現。

          蘭亭妙微:專業 UI 設計的卓越之選

          藍藍設計的小編

          蘭亭妙微一直秉持著 “設計優秀,不斷超越” 的理念。誠信敬業、專業耐心是他們工作作風的真實寫照。在設計服務方面,他們不斷創新,與時俱進。公司深知,只有幫助企業提升軟件和互聯網產品的界面設計水平,進行開發升級,才能為企業帶來更多的價值。

          聊聊對設計和品牌的一些新看法

          藍藍小助手

          設計的審美大多數是依照市場的改變而變化的,市場選擇的東西要試著去相信,可以參考,不表示要一比一的模仿,加入自己的想法和理解,也許能有新的東西出來。接到委托之后先具體化的溝通,理解需求,復述你的理解,讓對方同屏,之后再進行更具體的論述,能減少之后的許多麻煩。

          【達達快送】騎士IP形象|達哥

          資深UI設計者

          本次分享的項目是達達快送品牌IP達哥,這個項目是由@寶箱 @Masaya @小劉三人合作完成。
          希望通過分享能打響達哥的知名度,并且通過沉淀的方法論能夠幫助大家應用于日常工作中。
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏
          【達達快送】騎士IP形象|達哥
          收藏

          作者:DXC設計體驗中心
          鏈接:https://www.zcool.com.cn/work/ZNjM1NTc5NjQ=.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          花百億買來的經驗:百度FEED營銷活動設計方法

          資深UI設計者

          前言


          15年開始,紅包大戰占據了春節營銷的重要位置,各家互聯網平臺紛紛“發錢”搶占用戶,紅包總額曾在2021年一度達到120億元的峰值。不過近兩年開始,過往簡單粗放的紅包大戰逐漸失去熱度。平臺不再追求短時間用戶增長,這次春節活動就是百度FEED年底以運營手段打造的內容營銷活動。設計團隊以“有福氣 趣新春”為主題提出了內容場景化的營銷策略,整體圍繞如何把“內容做的有趣”來分享設計思路。



          一、心智建立內容護城河


          1、心智占領:

          提到內容營銷,先不說老掉牙的腦白金、可口可樂。我們先說說產品和用戶的關系。我們通過各大平臺的定位,提供了信任背書,但產品只是流量的承載地,最終讓目標用戶到達目的地的還是我們的品牌、內容、形象。所以我們在做內容營銷活動的時候,究竟應該怎么做?


          2、你的產品容易記住么?

          海的味道你知道,是波力海苔。提到藍瓶的鈣,腦海會浮現產品的藍色包裝。說到這里,我們就明白了,內容營銷的核心是圖形和口號。營銷活動的核心是品牌符號和Slogan。

          品牌符號拆解

          以春節項目舉例,提取中國傳統團扇形,象征著大團圓。引申為家家戶戶的心愿,全家團圓、福氣滿滿。以FEED產品愿景「看更多有趣有用的內容」為使,結合「新年要有福氣」的新年祝福,推出品牌Slogan【有福氣·趣新春】的活動理念,開啟活動篇章。




          有了主要的符號傳達,其它輔助元素的提取從桂花造型和錢幣上做了簡化,寓意吉祥富貴財源滾滾,應用在頁面細節裝飾中。



          用顏色表達個性

          提起品牌符號,我們首先想到的可能是 Logo,但有些時候色彩卻是第一印象。春節是中國傳統文化的傳承。因此嘗試從中國傳統色彩體系中象征“福氣、福來、富貴”的海棠紅作為會場主顏色。



          為了更好的區分內容場景以及增加色彩豐富度,受到“一年四季輪回”的啟發,延伸品牌輔助色。一年的圓滿在于四季的圓滿,在色彩表現上,從春到人間萬物鮮到春雪滿空;對應綠、紅、黃、藍給人煥然新生的視覺感受。



          用字體豐富品牌基因

          字體,不僅可以指代文字內容含義和字形美學價值,還能透過字體設計的初衷洞察到品牌濃縮其中的理念和哲學。利用彎曲讓作品動感有張力。利用圓角處理增加趣味性,呼應“有趣”的品牌理念。用傾斜的樣式營造出視覺張力,形成視覺焦點。




          3、洞察產品的「生命力」

          定形象-品牌基因的獨特形象

          角色、品牌、用戶必須是一個標簽,清晰可見。以IP角色與用戶互動溝通,建立信任關系,擁有獨立人格和魅力。通過更具人格化的形象,使品牌變得更溫暖。本次活動的主IP,在設定上采用FEED字母演變不同性格IP角色,作為不同維度的形象代表,豐富B/C端的內容場景。



          情感鏈接-圍繞人設講故事

          如何通過「IP角色」讓用戶對產品產生情感呢?首先賦予他們性格,他們分別是福氣、財富、快樂和有趣的化身。為用戶帶來財、富、樂、趣是他們的責任。IP的人格化能很好的與用戶建立品牌好感度。同時「持續曝光+情感鏈接」的品牌策略,在活動中貫穿內容場景、物料推廣、分享轉發等,反復強調品牌。



          二、你的差異點是什么?


          1、化繁為簡,強化內容

          由于春節活動周期長、內容多的特點,使得頁面呈現龐大復雜,會造成用戶的理解成本影響留存,因此把內容有效呈現、提升屏效、優化體驗路徑是交互的重點。我們通過“框架分層”“減少活動步長”對所有活動進行了框架升級。提升活動易用性,讓用戶快速參與活動。在設計表達上簡化頭圖背景,讓用戶聚焦場景,引入內容。



          2、創意場景,引爆內容

          洞察設計策略

          百度FEED不同于其他矩陣,我們的產品內核是“內容”;作為春節活動,濃濃的“年味”是活動外核。如果只去介紹我們自己產品的功能、種種好處,這種干巴巴的內容無法在這個時代獲得關注和認同,因為無法與用戶建立切身聯系。所以在不同層次的內容上,我們可以通過故事化、場景化來把內容做的更有趣,最終實現業務互動轉化提升。



          年俗互動-故事型敘述 增強產品代入感

          抓住用戶情緒洞察,采用年俗的理念打造場景,營造用戶代入感。在視覺表現上,根據時間推移,場景也隨之變化;以回家團圓吃年夜飯、到走親訪友云拜年、看煙花賞燈會,實現了場景從年三十到十五的視覺呈現,釋放出情緒共感的疊加效應。引發用戶“過年”的心理共鳴。



          場景設定

          場景一:花樣團圓飯。圍繞“三十吃餃子”的年俗為主要點切入,通過具象的關鍵詞構思場景,結合品牌符號,融入中國風建筑表達“家”,并將餃子、房子、人的比例重構,增加畫面沖擊力,在配色上摒棄大面積的紅黃配色,加入蔻梢綠和淡曙紅作為輔色,為整體添加了一絲春天的氣息。



          場景二:神評云拜年,發評送好禮。圍繞“云拜年”的年俗為主要點切入,過年的時候拜年是人們辭舊迎新、互相表達祝愿的一種方式。創意表達上,除了沿襲以往“登門”的拜年方式外,在畫面表現上加入代表新興禮儀“云拜年”的概念,讓視覺吸引眼球,同時又很接地氣。



          場景三:猜燈謎送吉祥。以元宵賞燈會的年俗為切入點,夜色旖旎,花燈璀璨,在一片流光溢彩之下,鬧元宵、賞花燈、迎新春。"玉兔東升、鯤鵬萬里”,用最美好的祝福為用戶開啟新年新篇章。



          人文互動-內容聯想 強化產品特點

          我們為什么要把小組內容關聯到人文上?我們需要給產品定義一個標簽,讓內容進入一個優勢的心智賽道,用設計手段具像化演繹出來,讓目標用戶最快對號入座,提升產品的認知效率。而人文包羅萬象,與小組內容分類不謀而合。



          內容聯想

          在視覺表現上,圍繞“小組發布內容”的類比聯想,場景選取攝影、養花、命理、詩詞、鄉村等七大不同人文場景,著力刻畫“小組內容”強關聯的人文元素,以此映射產品的特點,激發用戶參與意愿。借助想象放大或夸張內容特征,更鮮明的強調內容本質。



          3、豐富體驗

          為了維護用戶粘性,讓用戶每天都來“玩”。加入2級活動,用“獎勵”“成就”“抽簽”形成驅動用戶雷達地圖,多維度持續牽引,增強互動體驗。


          如何讓用戶玩下去?

          【抽簽活動-新年福氣簽】
          活動玩法:用戶每天進入活動可抽福氣簽,隨機發放簽文以及紅包獎勵,中獎+祝福的滿足感驅動用戶回流。


          洞察&創意

          新的一年,人們對美好生活都有向往和期盼,“討彩頭”是每位用戶對生活的新追求。在活動的設計上要吉祥滿滿,自帶好彩頭。用福袋作為容器承載簽文,以抽幸運球、得獎勵贏福氣作為情感驅動,刺激用戶玩下去。



          在簽文設定上用團扇的品牌符號作為基礎形狀,加持“祥云”“吉祥話”讓活動不止驚喜,更是平臺對用戶的祝愿。



          如何讓用戶“回來”玩?

          【激勵玩法-我的成就】

          洞察&創意

          在成就玩法中,勛章作為精神激勵直接授予用戶,提升用戶在活動內的成就感和價值。另一方面,勛章也作為主活動物質激勵的間接載體,用戶通過解鎖勛章來獲得終極大獎。從設計角度,采用三維立體視覺風格,結合IP形象,使勛章更年輕有趣,讓用戶形成記憶點。強化視覺沖擊,滿足用戶的成就感和榮譽感,刺激用戶回流和分享。



          驚喜彩蛋,拉升互動體驗

          除了視效的打磨外,營造“驚喜感”是在體驗中非常重要的一環。無論是抽獎還是成就,除了在視覺上有抽獎的儀式感。在活動中增加互動彩蛋,用戶在投票以及點贊后會有對應的動效,讓整體體驗更加細膩。


          精彩視頻,點擊可看





          結語


          總結一下本篇文章關于內容場景化營銷的設計要點:

          心智占領:前置化思考品牌打法,從品牌符號、Slogan、色彩基因、字體設計到IP的設定,全鏈路反復強調品牌。

          設計創意:用故事性、場景化演繹設計創意,差異化視覺呈現。

          互動體驗:用“驚喜感”拉升互動體驗。


          希望以上的設計思考,可以給大家一些啟發。


          作者:百度MEUX
          鏈接:https://www.zcool.com.cn/article/ZMTUyMzYyMA==.html
          來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          。                           

          WWDC22|從獨立開發者中發掘小而美的設計奧秘

          資深UI設計者


          WWDC22 全球開發者大會結束,有太多小眾產品脫穎而出。無形中有一股巨大的力量,在慢慢崛起,那便是來自世界各地的小型開發團隊和獨立開發者。他們的產品小而美,小到僅靠一個功能撐起產品,美到完全忘記這是工具產品。那么具體都有哪些產品細節,不妨聽我細細道來~




          其中,我精挑細選出一個海外和三個國區優秀產品進行產品設計細節分析,一探小眾產品究竟好在哪里!

          (專注面條 - 輕松重獲專注力)2022年Apple設計大獎入圍名單之一
          (謎底時鐘 - 讓時間看得見)2022年Apple設計大獎入圍名單之一
          (Waterllama - 開啟喝水時間)2022年Apple設計大獎入圍名單之一
          (OffScreen - 自律番茄鐘,不做手機控)Apple Store精品推薦64次

          排名不分先后,從以上幾款產品logo中可以看出產品之間設計風格基本不一樣,不存在借鑒抄襲,各自都在細分領域深耕播種。

          也正是因為開發者的敬業、精益、專注、創新的“工匠精神”,才能讓產品突出重圍,優秀的呈現在用戶面前使用。


          一、專注面條


          Slogan:專注,可以做出一碗好面條。


          你以為這只是讓人做泡面的App!那就錯了。這是用“煮一碗好面條是需要時間的”為理念,讓用戶專注工作,類似番茄工作法。

          有趣的是,這款效率工具被插畫元素完美包裹起來,一點感受不到工具給人帶來的疏遠感。相反,極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。

          正因這上乘的設計質感,《專注面條》曾數次登上 App Store 推薦頁,至今收獲 7000+ 個評價、4.9 的評分。





          1.核心理念

          想象一下你正在烹飪一碗面條。


          在烹飪時間結束前.不要試圖拿起你的手機,這樣會讓水蒸汽流失,面條就不好吃了。日后,你可以使用專注面條完成你希望專注的任何事情。


          它把工作比喻成煮面,煮面要專心,把控火候,合適時間放入主料和調料;工作同樣要專心,遵循自己的方法論,把每個步驟和流程都執行到位。工作完成了,一碗面也就煮好了。


          專注力在哪里,效率就在哪里。

          「專注面條」希望輔助你以一種詼諧有趣的方式,重獲這個時代最稀缺的專注力。放下你的手機,煮一碗面,我們一起對抗手機成癮!


          時間一到,你的面條就做好了,你也完成了一次有意義的專注。




          2.品牌元素

          打破常規,不用系統默認蘋方字體,而是選擇手寫體風格的「素材集市康康體」字體(文末領取可商用字體包)作為通篇文字載體。

          這也是為統一界面風格做的一個優化嘗試。

          不得不說,這個選擇是非常適合的。(體量較小的產品可以適當選用設計字體,一旦產品功能做多做大還是乖乖用默認字體規范靠譜些)。


          打開App,你能明顯看到簡潔的手繪風格元素,使整個產品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發,畢竟小孩子總有天馬行空的想象,但大人們卻很難跳脫現實產生有趣想法。


          App界面極其簡潔,只有黑白灰三種顏色,搭配手繪風格的設計元素,使產品整體清新脫俗,與眾不同。

          圖標設計脫離設計規范,采用更加符合產品氣質的手繪風格,這樣使得界面統一性極高,氛圍感十足。

          這也間接告訴設計師們圖標設計上一定要跟著產品形態去做設計,而不要一味以第三方規范為唯一衡量標準來設計,結果就是同質化泛濫。




          3.專注時長-插圖設計

          計時是產品核心功能,點擊首頁左上角專注時長,會出現不同的煮面方案。

          可設置5分鐘-180分鐘之內任意時長的專注時間,同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘,這13個時間段繪制了專屬面條配方。你不用手機的時間越長,你煮的泡面配料就越豪華越高級。設計元素也越豐富。當你碰到手機,就會震動十閃光。

          面條設計方案與功能的完美呈現是產品最吸引人的地方。




          4.設計細節

          根據累積的專注時長還可以獲得相應的稱號,配合幸苦工作后汗水落下動畫,很是生動有趣。

          不僅如此,專注面條還特意為女性男性做了兩套插圖設計方案,充分考慮不同群體的使用體驗,僅僅是效率型產品就做到如此細節,不好才怪。

          這也是除了故事卡片第二種用總時長配圖來增加產品使用黏性產生記憶點的設計之處。




          5.商業模式-永久買斷與付費項目

          1.永久買斷制


          【專注面條】一次買斷制,面條價格¥18。購買后產品內的功能都可使用。但“故事卡片”需要鑰匙來解鎖,¥6.00=鑰匙*6,不想付費那就乖乖完成計時任務來隨機獲得故事卡片。


          作為一個功能單一的產品,賣點在哪里?核心競爭力在哪里?依碳水Sir來看付費用戶大多在為品牌理念買單。

          就是產品自身的品牌調性,區別于市面上任何一款產品,不隨波逐流,用全新的面條理念代替時間,并且有其鮮明的手繪風格和插圖元素,即使被抄襲也只能抄到“外殼”,內在的東西是偷不走的。


          2.購買鑰匙


          專注完成后,靠概率獲得鑰匙,用來解鎖故事卡片以及 “腦洞大開” 的結局作為獎勵。緩解你專注后的緊張感,增加趣味互動性,同時為下一次專注做好準備。

          故事中皮諾曹、烏鴉喝水、長發公主等雖然都是我們耳熟能詳的童話,但作者( Alex )給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里,解謎前三個猴子看到河流中有一個圓圈,當我們找到面條的位置時,會發現猴子們看到的不過是一個香菇都大為震驚,畫面里充滿奇妙的想象力。

          當用戶看到未解鎖的故事會出于好奇點進去,這時就需要鑰匙來解鎖,畢竟不是靠專注獲得的卡片就要用別的辦法(購買鑰匙)打開,這就是第二個商業轉化點。


          目前已有的27張故事卡片,每一個都與面條結合進行故事綁定,讓用戶在效率軟件中也能感受到游戲的樂趣,把故事卡片當成解鎖過關元素,引發用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進而提高使用黏性以及提升付費轉化的一種方式。




          一個動作,一堆腦洞,組成了一個能量滿滿的 app。

          6 月 1 日,蘋果發布了 2022 年度設計大獎入圍名單,在「創新思維」類別中出現了中國區《專注面條》的身影,雖然止步于決賽圈,但我覺得這并不是結束,而是全新的開始。


          優秀的產品總有其相似之處,也有其不同。要想做一款好的小眾產品,除了把產品本身所解決的用戶痛點做好做精外,植入產品理念,與用戶產品某種關聯。

          就如它把專注計時比作烹飪時間,當完成專注,你將獲得一碗香噴噴的泡面一樣,給用戶感受并不是冷冰冰的機器“叮”的告訴用戶專注結束,而是通過巧妙的設計與用戶之間產生真實聯系,這或許就是成功的秘密。

          借用「專注面條」Slogan說的:專注,可以做出一碗好面條。

          各位設計師們不妨學習一下背后的思考。


          二、謎底時鐘 - 讓時間看得見


          謎底時鐘是一款設計精美的時鐘應用。

          Slogan:陪伴你學習、工作與生活。

          你沒看錯!它僅有時間和計時功能。

          作為一款時鐘App,UI設計有什么不同,才被入選2022 蘋果設計大獎!成為中國開發者之光!我們一起來看看。




          1.首次引導

          第一次下載,就會啟動引導流程,切換頁面時配合錯幀動畫,使設計細節更加突出明顯,強化品牌調性。產品中的引導頁都可以嘗試這種表現形式。

          進入首頁,展示文字+動效的引導流程,統一的表現形式,讓使用者更容易理解。首頁交互引導,讓用戶對產品隱藏的交互功能得到二次記憶,具有增強產品記憶的作用。




          2.品牌元素

          2-1.設計元素


          品牌風格設計很前沿,采用2020年大火的新擬態設計風格,也能看出設計表現緊跟市場潮流走,是一款個性且年輕的App。

          整體使用下來,印象最深的就是模塊列表、圖標的微質感設計,以及彈窗布局的規范化設計,還有部分組件采用毛玻璃設計手法等。

          值得注意的是,產品對iOS原生組件進行大量重新設計,結合新擬態風格繪制了一套更符合產品調性的組件出來。讓人使用一次就記憶猶新。


          2-2.核心力-交互感知


          我分別羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、刪除交互、浮窗切換交互這六個來簡單談談看法。以下幾個動效交互基本涵蓋市面上的多半產品的基礎功能,之所以展示出來,是因為「謎底時鐘」在原有的基礎組件上大膽創新,摒棄原生組件。

          這樣做對于功能簡單的產品來說絕對是錦上添花有助于產品形成記憶點的設計細節。這也從側面反映出市面上的部分產品,只注重功能堆疊而完全忽視原生組件還可以二次設計的方向。


          什么是好的交互,操作時無感知是一種,操作時有記憶點也是一種。顯然「謎底時鐘」是后者。要知道優秀的交互自成一派,把單一的功能做到極致,你的產品就不會差到哪里。




          3.彩蛋-圖標變化與提醒

          時鐘就是要長時間靜默展示,除了極簡、擬物、科技、馬賽克、霓光、積木、微質感、電子屏、睡眠屏、卡通風、各類鐘表材質等等19種風格高顏值時鐘外,霓光時鐘具有不一樣的功能。

          當你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”,除了文案變化,圖標也跟隨名稱而變,又一個用美食來拉近與用戶距離的設計細節。


          不僅如此,在低電量情況下,霓光效果不顯示,底部會持續閃爍電量不足的指示燈,告訴用戶手機沒電信號,請及時充電。當用戶插上電源,霓光時鐘會重新啟動亮光模式,給予用戶通電感知。

          雖然很小的設計點,但誰又能想到時鐘與電量不足產生聯系。看來開發者對時鐘的創意聯想是豐富多彩的。




          4.彩蛋-積木時鐘墜落

          無意間觸碰手機時發現積木零星掉落下幾個,在好奇的驅使下又晃動了一下手機,所有積木都掉落下來了。

          具有數字屬性的積木依然不斷變換數字,并且配合手機陀螺儀可以模擬現實空間進行移動,交互玩法趣味十足,讓我忍不住多玩了幾次。

          這種用到iOS系統功能做的大膽嘗試,有時會給產品帶來意想不到的好處,各位總監們不妨試試。




          5.商業模式-細節之處

          采用終身會員與月會員模式,月會員很好理解,為了產品能持續做下去,而推出的付費模式,目的是能持續有營收。終身會員是一個很有意思的模式。

          據了解,產品前期功能相對單一時,推出的一種買斷制,但隨著新功能不斷增加,原有¥25定價相比較低,早期買斷的用戶獲利更大,為了商業與產品平衡,使其具備良性發展空間,于是又推出月會員模式。


          這也牽扯到另一點,凡是未上線新功能都可以輕松決定是否開發上線,一但功能上線,想要取消或抹掉功能,就沒那么輕松簡單了。這也是早期App都一次買斷,后期改為訂閱模式也必須有終身買斷的內購入口。




          如果我們是“匠人”就會把 App 當藝術品,雖然只有也僅有一種功能,但只要花費了大量的時間去想創意,去做到設計、交互的完美融合,甚至一遍一遍地優化各種細節部分,埋設彩蛋,最后的最后呈現出來讓自己滿意。那么它就很可能成為一款小而美的產品。


          三、Waterllama


          烏克蘭開發團隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能,卻用大量動物角色來獎勵喝水后的你,讓你欲罷不能。保持水分保持快樂!從截圖中不難看出,該App內置大量動物插圖,通過喝水來解鎖小動物,解鎖前僅展示動物輪廓,讓用戶產生好奇從而保持喝水好習慣,這個概念很好,產品很棒,那我們一起來看看吧。




          1.品牌元素

          產品中icon展示較少,更多是用小插畫來代替,頁面中大量的banner以及動物卡片,豐富產品的同時營造一種輕松的感覺。并沒有很多圖標干擾用戶操作。與水相關的插圖用動效來承載,讓簡單的元素變得趣味橫生,很是新穎。除了普通的水以為,Waterllama還為各種飲料酒水做了全套icon,共計48+之多,可見產品對于水的核心功能做足了努力,才有如此多的類型與選擇供用戶記錄。




          2.核心功能

          無論您是想休息一下咖啡因,還是想通過果汁和冰沙來增強免疫系統 - 選擇任何挑戰,盡情享受吧!
          遠離含糖飲料和酒精,或者在 10 天內只喝水補充水分。看看你的進展如何,別忘了與朋友分享你的結果。
          Waterllama 應用程序中已有超過 45 個可愛的動物角色,我把解鎖與隱藏的都羅列到上放品牌元素中,可以看下總有一款是你的菜。你也可以使用隨機模式,讓每一天都變得不同。當天喝水目標達成就會解鎖一個動物,精美的插圖讓人賞心悅目,期待第二天繼續喝水打卡挑戰。




          3.交互手法

          首頁下方的動物挑戰卡片,交互形式采用App Store卡片點擊交互,無論是轉場過度,還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細節,一邊了解喝水的各種好處,娛樂加學習兩不誤,很是輕松。




          4.商業模式-細節之處

          內購頁面采用icon輪播的動效展示,優點是在一小塊區域通過消失漸現可以展示所有內容,使內購頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環放大,引導用戶進行付費操作,雖然很刻意,但絲毫沒有感受到強制性選擇。
          當產品想要在內購頁強化品牌背書,給到用戶可靠穩定感,可以選出具有代表性的優質評價,展示在內購頁下方,通過左右切換查看更多評價。
          每年¥28,終身買斷制¥48.00。兩個價格是利用價格差來制造價格錨點,引導用戶購買終身會員,這對用戶來說最實惠劃算的方案,同時也是產品所希望的。大量的終身用戶長時間使用產品,成為核心用戶群體,助力產品越做越好。




          現在不難看出,優秀的產品往往更關注細節表現,用動態展示內容,讓玩法更具趣味性,頁面簡約而不簡單。并不是頁面元素越多越好,相反把簡單的功能做到極致就會帶來正向有價值的反饋。


          四、OffScreen - 自律番茄鐘,不做手機控


          這款產品雖然沒出現在WWDC22上,但與「謎底時鐘」是同一家公司。無論設計或功能使用都相媲美。
          手機已成為人人必備的物品,內置的各種App占有著人們的生活,手機依賴已成為這個時代普遍的一種現象。雖然人們都知道長時間看手機不好,下意識的克制看手機行為,以為這樣脫離手機依賴患者這個稱號。往往碎片化看手機,一天下來使用手機的時長不降反增。「OffScreen」通過細分時間屬性為用戶直觀呈現各種場景下使用手機的詳細數據,通過數據展示以及專注時間,防止用戶沉迷手機無法自拔。




          1.品牌元素

          「OffScreen」背景色使用極其大膽。

          淺色模式下采用暖橘色作為品牌主色調,暗色模式下采用海藍色作為主色調,相比Apple設計規范中的顏色,這種帶有傾向性的色彩更容易營造一種產品氛圍,強化產品感知度。

          圖標方面,具有操作屬性的圖標采用線性(相對好理解),具有展示屬性的圖標采用面性風格(設計表現更強且有文字描述相對好理解)。




          2.動效表達1

          引導流程專場用了大量位移、漸變效果,使原本單調的靜態頁賦予生動表現力。吸引用戶眼球,達到品牌傳播效果。




          3.動效表達2

          動效貼合操作效果,用戶還沒使用就能一眼明白產品如何使用,這就是引導動效的好處。

          當你專注番茄鐘時,只需在番茄上滑動標尺選擇準確時間,就能開始專注。

          當完成專注會提供統計數據,并且有彩帶飄落效果,營造打卡勝利的儀式感,強化產品感知,為用戶下一次專注做準備。




          4.商業模式-細節之處

          內購頁采用依次呈現的交互方式,頭圖是一個人在看手機,采用線性風格手法,這種形式區別于其他產品,會給人以眼前一亮的感覺,加深用戶對產品的記憶。

          付費按鈕吸附與頁面底部,根據菲茨定律,起始于目標位置越近,到達目位置的時間就會越短,從而用戶更容易點擊。


          一次買斷制,¥30.00解鎖終身會員。

          作為一款時間統計、番茄鐘、專注時間與一身的產品,對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現以及有趣的配圖描述,間接感受到Off Screen產品的細膩之處,用戶為此買單也不是說。




          OffScreen的成功在于能把單一的屏幕使用時間進行多維度分析呈現,就說“呆呆的看”與“邊走邊看”這兩項數據,就是調用系統運動數據來判斷使用屏幕的場景。

          況且每項數據都支持時間軸可視化圖表的方式呈現,細節之處方見專業,這也是好產品所要具有的垂直領域專業度。


          五、產品總結


          想要產品脫穎而出,一定要嘗試將軟件與硬件結合,可以是陀螺儀、眼動追蹤、閃光燈等等,總之系統推出新的功能,就盡量把它用到產品里去。

          不僅如此,看以上幾個產品,截圖模塊內容都頂滿了,說明App想要展示的細節還有很多,從側面也能看到開發者們不留一塊“空白”的用心。


          大廠產品固然很好,做法更符合大眾市場符合消費者需求,隨著不斷新增功能,產品變得越來越普適大眾,無產品獨特風格可言。因為背后有龐大的員工要養活。

          相反小團隊獨立開發者們沒有太多顧慮,一心想把一個點做好做緊致,哪怕只是計時,也要做的自己滿意為止,才會交卷,時代在變,匠人之心從未改變。值得致敬這些開發者們。




          跳脫大廠的產品,來看看獨立開發者和小型開發團隊,一人即團隊,遇到各類問題都要獨自進行解決,可想而知工作量會有多大。

          他們的產品或許沒有龐大的生態體系來滿足大眾用戶使用需求,但App Store十余年的發展,建立起細顆粒的開發環境,正是這種良性生態,讓那些有光的開發者,隨心所欲讓心中的想法變成現實,讓夜里的小路燈照亮了整片街道。


          就連開發者們都這么拼搏,作為設計師的我們哪還有抱怨之說,這么多好的產品擺在眼前,真是難得的學習機會,習他人之處,補自我之短。一起加油一起進步。


          六、結語


          設計師要有發現美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設計師所追求的。 認真記錄產品細節,了解背后的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。

          本期產品細節分析結束,點擊原文鏈接查看更多,我們下期再見!

          作者:碳水Sir;公眾號:草蓉三石

          本文由 @碳水Sir 原創發布。未經許可,禁止轉載。


          作者:碳水sir
          鏈接:https://www.zcool.com.cn/article/ZMTQwODQ3Mg==.html
          來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


                                 

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://m.sdgs6788.com

          存檔

          亚洲级αV无码毛片久久精品 | 久久精品人成免费| 久久棈精品久久久久久噜噜| 国产美女久久久| 久久久久久国产a免费观看不卡| 日日狠狠久久偷偷色综合96蜜桃| 久久精品国产2020| 国产综合精品久久亚洲| 久久久精品人妻一区二区三区蜜桃 | 欧美激情精品久久久久久久 | 国产成人精品综合久久久| 人人妻久久人人澡人人爽人人精品 | 国产AV影片久久久久久| 久久人人爽人人爽人人AV东京热 | 久久99精品国产| 久久久久se色偷偷亚洲精品av| 狠狠干狠狠久久| 偷偷做久久久久网站| 久久人人爽人人澡人人高潮AV | 亚洲va久久久噜噜噜久久天堂| 国产精品毛片久久久久久久 | 久久综合久久综合久久| 精产国品久久一二三产区区别 | 久久精品天天中文字幕人妻| 亚洲国产成人精品女人久久久| 国产精品美女久久久久| 日产精品99久久久久久| 一本久久综合亚洲鲁鲁五月天| 久久精品草草草| 久久免费的精品国产V∧| 精品综合久久久久久98| 欧美伊人久久大香线蕉综合 | 久久精品这里热有精品| 国产精品久久久久天天影视| 97久久香蕉国产线看观看| 日本久久久久亚洲中字幕| 亚洲国产精品无码久久一区二区| 亚洲精品无码专区久久久| 国产A级毛片久久久精品毛片| 久久久精品人妻一区二区三区蜜桃| 久久毛片一区二区|