<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>

          首頁

          Cs界面設計之二:如何區別B端與C端的產品設計差異?我總結了26條對比!

          博博

          隨著企業數字化轉型,B 端產品越來越受到人們的重視,B 端產品也越來越豐富,越來越多的 C 端設計師轉行到 B 端產品的設計上來。

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          但是,如何區別 C 端產品與 B 端產品,如何將 C 端產品的設計經驗應用到 B 端產品上?這是一個需要思考與研究的問題。

          從各個緯度來講,C 端產品與 B 端產品具有一些明顯的差別。接下來,我們就從區別 B 端與 C 端產品的 26 條上,來對比一下二者的差異。

          Let’s gooooooo……

          如何區別B端與C端的產品設計差異?我總結了26條對比!


          基礎


          1. 定義

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:為企業客戶提供商業價值的產品及服務。

          C 端產品:滿足個體用戶需求的產品與服務。

          2. 獲取途徑

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:公司領導層決策,普通員工使用,需要銷售推廣,通常將線下“大型會議、峰會、行業展會”作為主要場地,讓客戶近距離了解產品,樹立專業的行業形象與行業口碑,進而吸引企業客戶的興趣(如作者之前所在的安防企業,就會頻繁的參加展會,展示自己的專業能力)。

          C 端產品:個人主觀意愿下載使用,需要利用拉新、促活等營銷方式,實現不斷的新增、日活來加持自身體量。

          3. 產品形態

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:SaaS 平臺、客戶端,多為 PC 端產品。

          C 端產品:APP、小程序多為 Mobile 端產品。

          3. 功能聚焦

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:具有多功能模塊及多角色之間的協作。

          C 端產品:以核心功能點為主,以及圍繞核心功能點,完善用戶體驗及增值服務。

          4. 所屬類型

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:產業互聯網。

          產業互聯網是基于互聯網技術和生態,對各個垂直產業的產業鏈和內部的價值鏈進行重塑和改造,從而形成的互聯網生態和形態。(百度百科)

          C 端產品:消費互聯網。

          消費互聯網是以個人為用戶,以日常生活為應用場景的應用形式,滿足消費者在互聯網中的消費需求而生的互聯網類型。(百度百科)

          5. 生態屬性

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:相伴共生,產業互聯網每一個行業的結構、模式各不相同,必須通過整個產業鏈上的企業產生降本效應、提高效率,形成資源優化配置,產生 1+1>2 的效益。

          C 端產品:贏家通吃,比如通過燒錢取得規模優勢、利用人性的心理弱點去進行各種產品、用戶數據的采集,沒有底線、互聯網殺熟等行為。


          產品維度


          1. 產品本質

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:本質是“進”,是幫用戶(客戶),節約時間,降低成本,增加收益。

          C 端產品:本質是“出”,需要用戶消費時間與金錢,滿足個人的情感和生理需求。

          2. 商業模式

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:企業按需定制付費較多、個人付費較少。

          C 端產品:用戶流量和資源的變現實現營收,例如:廣告、導流、增值服務。

          3. 開發周期

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由于產品更新迭代有較大的成本,因此,開發周期相對長,按月或年,大版本迭代。

          C 端產品:周期相對短,按周或月,小版本快速迭代。

          4. 生命周期

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由產業鏈以及商業模式決定,生命周期往往較長。

          C 端產品:一般產品的保鮮期比較短,生命周期較短。

          5. 產品關注點

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:專注業務及行業化的解決方案。

          C 端產品:專注對人性的滿足。

          6. 產品需求來源

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:來源公司戰略或業務線調整,甚至客戶預期。

          C 端產品:產品經理的市場洞察力和敏銳度,主動發現。

          7. 產品思維

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:往往以工具化思維服務行業客戶,更理性。

          C 端產品:往往以游戲化思維增強用戶的體驗,滿足用戶,更感性。

          8. 行業壁壘

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由于業務、場景屬性,容易建立行業壁壘,客戶的切換成本比較大。

          C 端產品:行業壁壘比較難以建立,往往以體量優勢及價格優勢擠壓對手,同時,同時用戶的切換成本較低。


          用戶維度


          1. 用戶類型

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:用戶通常是一個團體或組織,用戶的社會屬性比較明顯。

          C 端產品:目標用戶通常是具有某些特質的人群,具有明顯的自然屬性,且沒有組織架構。

          2. 用戶體量

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:作為工具屬性的產品,用戶體量比較小,甚至有些定制化產品的用戶只有幾人。

          C 端產品:相對而言,用戶體量較大或非常大,才可以形成規模效應,進行流量變現。

          3. 使用時機

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:往往僅工作日工作時間使用,用戶在節假日,非必要不使用。

          C 端產品:用戶會在任意時間。

          4. 使用時長

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:相對固定,且希望越短越好。

          C 端產品:彈性較大,且希望越長越好。

          5. 使用意愿

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:根據公司決策進行采購,用戶被動使用,且沒有太大的決定權。

          C 端產品:根據自己的需求主動選擇使用。

          6. 使用場景

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:場景固定,多為辦公室。

          C 端產品:場景不定,用戶可以在辦公室、臥室、廁所、地鐵上等多種場所使用,姿勢可能是坐著、躺著、蹲著、斜靠著等等。

          7. 用戶粘性圖片

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由于用戶的被動使用限制,用戶對產品的可選性不高。因此,為了工作需要,用戶粘性相對高。

          C 端產品:用戶可以根據自己的喜好,隨時隨地改變自己的選擇,用戶粘性相對低。

          8. 用戶容忍度

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:用戶容忍度大,不好用也要用。

          C 端產品:用戶容忍度小,不爽就換。


          設計維度


          1. 設計側重

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:關注業務功能和使用場景。

          C 端產品:關注用戶體驗及感受。

          2. 視覺風格

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:界面簡潔、布局清晰,追求信息的有效表達和操作的便捷性。

          C 端產品:風格多變,強調產品的視覺沖擊力。

          3. 情感體驗

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:強調免打擾、高效,多關注業務解決方案本身的順暢。

          C 端產品:強調產品的趣味性,處處考慮用戶的情感體驗。


          總結


          明確 B 端產品與 C 端產品的區別,有利于設計師在設計過程中的設計經驗轉換。在設計過程中,做到有的放矢,而不是一味的生搬硬套,用解決 C 端產品的方法與思路,去解決 B 端產品的問題,從而讓 B 端產品的解決方案更加貼近業務與場景。

          作者:弘毅

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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














          Cs界面設計之三:從3個方面,詳細分析B端和C端的差異化

          博博

          眾所周知,無論是在用戶群體、產品定位,還是使用場景等方面,B 端產品與 C 端產品都有比較明顯的差異。但是兩者的基本設計理念是趨同的,例如提高效率、降低學習成本等等。

          不過 C 端產品更加注重運營,所以設計師不單單要考慮設計側的用戶體驗,還要顧及商業目標的達成。B 端產品重點在于提升用戶效率,這本身就是體驗目標之一,因此 B 端產品的設計策略更加純粹。

          兩者在具體的設計表現上還是存在一定的差異性。今天我們就來總結一下,主要包括 3 個方面:

          1. 內容的差異化
          2. 交互形式的差異化
          3. 展現形式的差異化


          內容的差異化


          1. 圖文結合 VS 數據表格

          C 端產品重運營,通過流量的轉化獲得收益。B 端產品重功能,通過功能定制向客戶收費。

          C 端產品想要達到商業目標,獲得充足的流量,必然要內容化。內容想要吸引用戶就必須要足夠豐富,所以 C 端產品基本是用圖說話,而短視頻和直播的興起,進一步增強了對用戶不同層次的感官刺激。總之 C 端產品需要讓用戶看得爽、玩得爽、逛得爽,不知不覺的沉浸在其中,并逐漸產生依賴感。

          從3個方面,詳細分析B端和C端的差異化

          B 端產品聚焦功能,更強調幫助用戶解決問題,特別是中后臺的管理系統,主要是幫助用戶完成數據監控、統計和查詢。因此頁面中充斥著大量的圖表、表格和數據信息。

          從3個方面,詳細分析B端和C端的差異化

          內容的差異也帶來了體驗方面的差異。圖片相對數據或者文字更加直觀感性、富有親和力,更容易引發用戶的閱讀興趣,精美的圖片更容易引導用戶建立對內容的好感。

          而 B 端產品則是客觀反映數據信息內容,相對更加理性,不會帶有太多的情感體驗。

          2. 個性化與標準化

          C 端產品服務于個人,更加注重用戶的個性化體驗,例如千人千面推薦機制,定制化的興趣范圍設定等等,希望能夠通過精準的內容推薦,獲得用戶、留住用戶。

          C 端產品功能服務于整體的商業目標,今天主推 A 功能用來拉新,明天可能就強調 B 功能的運營活動。另外版本迭代也比較快,功能玩法變化較為頻繁,內容也會做出相應的變化。例如天貓最近首頁也在不斷變化。

          從3個方面,詳細分析B端和C端的差異化

          B 端產品服務于組織,每個用戶不再是單獨的個體,而是組織中的角色,更強調業務流程和組織協同,因此需要建立標準化的流程,或者相對有限的個性化。另外復雜和高門檻的業務內容,更加強調設計的一致性,從而減少用戶的學習成本。

          同時 B 端產品的信息架構、業務流程一旦確定了,不會輕易改變。避免打破用戶已經形成的認知和行為習慣,對用戶的使用造成不便。


          交互形式差異化


          C 端更強調便捷性,希望可以隨時隨地觸達用戶,更多的是移動端產品。B 端產品以工作辦公為主,更多的應用在 PC 領域。因此兩者在交互形式上有很大的區別。

          1. C 端:全面體驗、兼顧商業

          C 端產品在保證用戶體驗的同時,更講求商業價值。交互體驗上我個人覺得主要講求少操作、短路徑、沉浸式。

          特別是電商平臺,例如淘寶,雖然首頁中增加了各種頻道入口和商品分類,但是并不希望用戶按部就班,逐級操作。因為用戶行為路徑越長,造成的用戶流失也就越大。搜索功能被放置在頁面頭部位置,頁面滾動時也常駐在頂部,方便用戶快速查找產品。

          同時運營活動會通過彈窗、浮窗、懸浮按鈕,前置廣告資源位等形式增加曝光,縮短用戶的操作路徑,實現內容的快速直達。而為了增加內容對用戶的吸引力,讓用戶沉浸其中,淘寶、拼多多等都專門打造了專屬頻道,主打短視頻和圖文。

          2. B 端:業務為主,效率至上

          B 端產品最主要的價值在于優化業務流程,提升用戶操作效率。

          除了常見的基礎交互形式,在細節設計上也越來越 C 端化了。通過監測用戶行為,或者信息內容實現智能提醒。例如飛書文檔在用戶首次使用場景下刪除內容時,會主動提示快捷鍵功能,幫助用戶了解學習相關功能。

          從3個方面,詳細分析B端和C端的差異化

          而公眾號壹伴插件會檢測文章中的關鍵字,文章中出現“原文鏈接”時,而用戶未進行選項設置時,會主動提示相關信息,避免用戶遺忘。

          從3個方面,詳細分析B端和C端的差異化

          另外在 B 端產品中信息架構非常重要,用戶主要是依據導航菜單按圖索驥,首先定位到功能頁面,再次查找相應表格,最終定位自己所需的內容。所以信息層級的優化,可以較好的減少用戶的操作成本和記憶成本。


          視覺表現的差異化


          視覺設計層面,C 端產品的要求遠高于 B 端產品。

          1. C 端:場景化、豐富性

          C 端視覺設計師要求越來越高,基礎的設計技能不用說了,動效、C4D 建模都逐漸成為了設計師的必備技能。界面風格也是多種多樣,酸性風格、賽博朋克等等,希望能夠通過提高界面設計的豐富性,增強頁面氛圍,保證對用戶足夠的吸引力,例如大促會場頁面的頭圖設計。

          從3個方面,詳細分析B端和C端的差異化

          2. B 端:簡潔化、統一性

          作為工具型產品,幫助用戶提高工作效率是 B 端產品設計的核心價值。因此 B 端產品中視覺元素強調簡潔高效,除了色彩相對豐富的圖表外,主體風格基本是灰白色調,再加點主題色點綴基本就可以了,過多的顏色和背景信息反而會影響核心內容的瀏覽。

          從3個方面,詳細分析B端和C端的差異化


          寫在最后


          雖然在設計理念上,C 端和 B 端產品具有一定的相似性。但是受到各種因素的影響,有時候 B 端的產品經理對用戶體驗重視不足,更多強調產品功能的強大,考慮如何實現產品功能,很少考慮用戶是否真正的需要此功能,以及在使用過程中的操作體驗。

          所以 B 端交互設計師需要在業務分析基礎上,積極尋找產品設計中的體驗突破口,不斷提升產品的用戶體驗。

          作者:子牧先生

          轉載請注明:優設網

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

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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
















          UI設計、交互設計、UI交互設計的聯系和區別是什么?

          seo達人


          三者關系圖:

          Image title

          從上圖來看,似乎UI交互設計還真是UI設計和交互設計的結合。不過具體區別如何,還是讓我們來看看三者的對比吧!

           

          1. UI交互設計vs UI設計vs交互設計對比之概念

          Image title

           

          UI設計

          UI設計或稱界面設計(英文UserInterface Design, 縮寫為UID),它是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計主要分為實體UI和虛擬UI兩種,互聯網行業常見的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

           

          交互設計

          交互設計(英文Interaction Design, 縮寫IXD),它主要指的是兩個或多個個體之間交流和互動方式的設計,以達成某種設計產品的目的。交互設計的目標一般從“可用性”和”用戶體驗“兩個層面出發,以幫助解決用戶需求。

           

          UI交互設計

          其實小編從多方查找資料發現,UI交互設計這個術語是非常模糊的。在小編不斷對比整理下,終于得出了它的基本概念。從廣義上來說,UI設計是可以包含交互設計的,在這樣的情況下。簡單來說,把交互設計的理念體現在UI界面上,就是UI交互設計。

          從設計重心方面來看,UI設計的重心是色彩和視覺,以界面美觀設計為主,主要考慮產品看起來怎么樣。而交互設計則是以用戶為中心進行人機互動部分的設計,主要考慮產品用起來怎么樣。而UI交互設計則需要兼顧UI與交互兩個方面進行設計,將交互的理念體現在UI界面上。

           

          2. UI交互設計vs UI設計vs交互設計對比之工作人群

          Image title

          UI設計相關人群:

          UI設計師,界面設計師,網頁設計師。

           

          交互設計相關人群:

          UX設計師,交互設計師,UE設計師,產品經理,網頁設計師,產品經理。

           

          UI交互設計相關人群:

          UI設計師,界面設計師,交互設計師,網頁設計師,UX設計師,產品經理。

          從相關的工作人群來看,不同的設計工作類型,涉及的人群也盡不相同。UI設計的相關人群主要是工作中包涵該部分的人,除了專業的UI設計師,界面設計師,網頁設計師等也是它的工作人群。而交互設計涉及的人群更廣,交互設計師、UX設計師自然不在話下。另外,需要表達設計想法的產品經理運營人員也是其中一員。最后,UI交互設計所涉及的范圍比兩者稍廣,包含了UI設計人群和大部分交互設計人群。

           

          3. UI交互設計vs UI設計vs交互設計對比之例子

          UI設計案例:

          Image title

          如上圖所示,UI設計主要在于通過對用戶界面的色彩,布局,文字排版等方面進行設計,以保證整體界面的美觀。

           

          UI交互設計案例:

          Image title

          小編這邊選取了一個簡單的UI交互作為案例,這個交互的效果是通過點擊UI界面中按鈕出現不同的圖片。這種將交互體現在UI界面上的設計,就是UI交互設計。UI交互設計包含了各式各樣的交互效果,如下列刷新、進度條、圖片輪播等,小編就不再一一例舉了。

           

          交互設計案例:

          Image title

          而這種以人機互動為目的,注重用戶體驗的設計則稱為交互設計。

          從以上的案例不難看出,UI設計主要以界面美觀為主,以靜態的方式呈現居多(也有以動圖動畫形進行呈現)。交互方式是靜態的。UI交互設計是在UI的基礎上進行交互設計,以偏動態的形式存在。交互設計則以用戶體驗為主,以動態的形式存在。

           

          4. UI交互設計vs UI設計vs交互設計對比之工具

          UI設計工具:

          PS(Photoshop):適用于界面設計,圖標設計,手繪等。

          AI (Illustration):適合創建徽標、圖標、草圖、排版和其他矢量圖。

          Sketch:適合圖標、界面設計,支持多文件分層,切片等插件。

          Image title

          交互設計工具

          Axure:老牌原型設計工具,適用于制作中高保真交互原型。

          Mockplus:適合創建快速交互原型,簡單高效,同時支持團隊協作。

          摹客:適合一鍵切圖,生成智能標注,生成圖層代碼,交互演示,設計協作。

          Image title

           

          UI交互設計工具:

          PS,AI,Sketch,Mockplus、摹客原型設計工具。

          Image title

          從使用的工具來看,UI設計主要以圖形、圖標、界面設計工具為主;交互設計主要以原型設計,交互設計工具為主;而UI交互設計則囊括了前兩者使用的所有工具。

          看完本文后,小編相信大家對UI交互設計,UI設計,交互設計三者的關系已經有所了解了。簡單來說:UI是為了好看,交互設計是為了好用,UI交互設計就是好看又好用。如果想從事UI交互設計相關的工作,小編建議不妨在了解它們的基本定義后,開始學習一些技能知識,著手開始練習設計。這樣可以幫助大家在UI交互設計的路上快速成長!

           

          原文地址:慕客

          作者:慕客產品協作設計

           轉載請注明:學UI網》UI設計、交互設計、UI交互設計的聯系和區別是什么?

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          用信息架構,來落地產品架構

          純純

          讓信息架構,和產品架構,產生“化學反應”

          這個信息架構的角度,具體而言,就是只包含一級頻道的交互設計。


          核心功能、輔助功能、重大功能,作為產品的三大類功能,更多是從發展的角度來劃分。


          除此之外,大部分 App 都還有一些非?;A的功能,比如“個人資料”、“我的收藏”、“設置”、“搜索”等,此類功能,我們稱其為通用功能。


          核心功能、輔助功能、重大功能和通用功能,是產品的四大類功能。


          總的來說,本文主要以底部 tab 導航的 App 為例,探討一下,如何在一級頻道來落地產品的四大類功能。



          01 宏觀上講,怎樣更好的擺放四大類功能?


          網易云音樂是我個人很喜歡的一款產品,日常用的也比較多。不過,它的新版(6.0 系列)給我的直觀感受是,有點復雜了,我甚至在很長時間里找不到“私人 FM”這個以前常用的功能。


          給我類似感受的產品,還有 Keep 和知乎。


          究竟是什么,讓我覺得,這些產品變得有點復雜了?


          個人簡單總結了一下,最直接的一個原因,是這些 App 都新增了重大功能,并給這個重大功能單獨加了一個一級頻道。


          比如 Keep 的“計劃”頻道、知乎的“會員”頻道、網易云音樂的“視頻”和“云村”頻道,都分別占用一個一級頻道。



          企業為什么這么設計?個人的猜測,這些重大功能于企業而言,很重要,要么肩負商業化使命,要么被寄予厚望,所以企業就單獨給了一個一級頻道。


          這是一個相對簡單的邏輯。但如果想要更好的去平衡用戶體驗和商業化之間的關系,那我們就需要考慮更多的因素。


          之前在信息架構那篇文章里,個人的建議是,如果想讓 App 始終保持簡單,那就只保留 4 個 tab,也即只有 4 個一級頻道。


          如何將產品的四大類功能、以及未來很大概率會不斷出現的重大功能,以接近最優的方式,安置在寸土寸金的 4 個一級頻道上?


          我想,這中間一定有一些原則,值得我們探討和參考。


          1 和重要程度保持一致


          通常而言,重要程度越高,分配到的空間就越多。這是一個比較普世的道理。


          也就是說,這條原則,主要會影響到,四大類功能,各自占用多少空間比較合適。


          我們有 4 個一級頻道,每個一級頻道代表了 25% 的空間。


          再來看四大類功能,按其大概的重要程度,簡單的分析一下。


          先說核心功能,這個最重要。


          核心功能是立足之本和護城河。先換個角度看這個問題,假設有三種可能,即核心功能可以占用一個、兩個或三個一級頻道。


          先用下排除法。三個一級頻道難免顯得過多,剩余的三種功能擠在一個一級頻道里也會顯得過分擁擠;一個一級頻道的話,倒也可以,但是平分四分之一的空間很難體現出核心功能的重要性。


          相比之下,兩個一級頻道就顯得較為合適。


          綜合考慮到有四大類功能,通常兩個一級頻道也不會完全給核心功能所用。


          所以,核心功能,大概占用一個半一級頻道,也即 40% 左右的空間即可。


          再說通用功能,這個比較容易。


          此類功能通常比較多,重要程度可能不及重大功能,但是又不能沒有,所以通常我們也會單獨給一個一級頻道,就是“我”或者“設置”之類的一級頻道,大概占用 25% 的空間即可。


          第三,說下重大功能,這個比較重要。


          通常而言,重大功能的重要性僅次于核心功能,而且重大功能可以有多個,再考慮到通用功能一般單獨占用一個一級頻道。


          那么,相對而言,重大功能,完全可以單獨占用一個一級頻道,甚至更多,大概占用 30% 左右的空間即可。


          最后,說下輔助功能,這個比較特殊。


          首先,很多產品是沒有輔助功能的;其次,輔助功能是個小功能;最后,輔助功能的數量一般也不多。


          總的來說,輔助功能是沒有必要單獨給一個一級頻道的。再考慮到 4 個一級頻道所剩空間已經不多,所以,輔助功能一般和重大功能共用一個一級頻道即可,大概占用 5% 左右的空間。



          2 和使用頻率保持一致


          通常而言,用戶用的越多的功能,就排的越靠前。


          也就是說,這條原則主要決定四大類功能的排序問題。


          具體而言,用戶用的最多的是核心功能,所以核心功能最靠前。


          重大功能和通用功能,有時候很難說哪個使用頻率更高,比如微信里的“搜一搜”和“收藏”。但是比較明確的是,很多 App 在誕生之初,并沒有重大功能,只有核心功能和通用功能。


          所以自然而然,通用功能排在了核心功能后面。


          個人有個猜測,一方面,有時候很難說清重大功能和通用功能,哪個使用頻率更高;另一方面,通用功能起初是排在最后的。


          所以,當重大功能出現時,就延續了舊傳統:通用功能依然排在最后。最終結果就是,重大功能和輔助功能排在中間。


          值得一提的是,現在市面上開始出現兩類現象。


          其一是,有一些擁有 5 個一級頻道的 App,開始把核心功能放到中間那個頻道,比如 Keep 的“運動”頻道。


          其二是,企業開始人為的控制打開 App 時默認展示哪一個頻道,而且默認顯示哪一個頻道,存在多種情況,例子依然包括 Keep:以前默認顯示中間的“運動”頻道,現在默認顯示“計劃”頻道。


          個人覺得,對企業而言,這兩類做法,都是得不償失的。


          因為這樣做,會讓 “從左起,1、2、3、4”這個排序失去價值。沒有這個前提,也就談不上“和用戶的使用頻率保持一致。


          而且,這種默認不顯示左邊第一個頻道的做法,有時候會讓用戶產生一種被綁架的感覺(默認顯示收費頻道),有時會讓用戶感覺企業在自作聰明(默認沒顯示收費頻道,但也沒顯示核心頻道)。



          3 符合用戶預期


          主要有兩個預期,邏輯預期和習慣預期。


          3.1 邏輯預期


          用戶確實很懶,但不代表用戶不會思考。


          比如前文提到的,網易云音樂的“私人 FM“功能,在我的認知里面,”私人 FM“和”每日推薦“一樣,都是個性化推薦,性質極其相似,應該放在一起。


          所以,當我在新版里的“每日推薦”旁邊找不到“私人 FM”時,心里就覺得很奇怪很不解,心想這么好的功能不會是給刪了吧。


          后來某一天,當我在第三個一級頻道“我的”里面發現“私人 FM“的時候,我又覺很別扭,不好用。


          另外一個例子,Keep 的動作訓練。 


          在新版里面,一開始我是去“發現”頻道的“動作庫”找的,怎么找都找不到,跟找不到網易云音樂的“私人 FM“是一樣的心情。


          因為我覺得,“動作訓練”和“動作庫”,是很接近的一對事物,從邏輯上來講,用戶會覺得這倆事物挨在一起,或者會猜他們是不是挨在一起。


          3.2 習慣預期


          這里的用戶習慣,主要有兩類。一類是自家產品培養出來的,一類是市面上的產品培養出來的。


          通常情況,一級頻道的設計,是要符合用戶習慣的。


          最忌諱的情況是,自己一手培養的用戶習慣,到最后自己再一手去打破,這樣很容易引起用戶的煩躁、不滿和失望等負面情緒。


          比如 3.1 段的兩個例子,同樣也沒有符合用戶的習慣預期。因為在最開始,網易云音樂的“每日推薦”和“私人 FM“是挨在一切的,Keep 的“動作訓練”和“動作庫”也是融合在一起的。


          4 良好的擴展性


          就一級頻道而言,重大功能和通用功能是最有可能擴展出更多子功能的。所以,就擴展性而言,需要重點照顧到這兩類功能。


          通用功能大部分都收納在“我”這個一級頻道,通常也是一個列表的樣式,天然自帶良好的擴展性。所以,擴展性的難點和重點,最后是落在了重大功能這里。


          在一級頻道,重大功能的展現形式,通常有兩種。


          一種是像核心功能一樣,直接把重大功能的內容鋪陳出來,典型代表是網易云音樂的“云村”。另外一種是把各個重大功能都收納起來,只展示一個入口,典型代表是微信的“發現”頻道。


          對企業而言,現實問題是,當重大功能的數量上升到兩個、三個甚至更多時,如何展示他們?


          市面上的常規做法,也是兩種。


          一種是像網易云音樂和 Keep 這樣的,直接開辟一個新的一級頻道,供重大功能使用。還有一種是微信這種,把所有重大功能都收納起來,有新的重大功能出現時,新增一行列表即可。



          個人推薦微信這種做法,因為這種做法的擴展性最好,可以應對無窮盡的重大功能。


          至此,我們簡單總結一下。個人看法,四大類功能,具體咋擺放,并沒有標準答案,但是可以參考以上 4 個原則。




          02 微觀上講,有沒有補充和例外?


          有。借這個話題,聊兩個比較特殊的問題。


          1 頂部標題欄的兩側,適合放什么功能?


          先來分析一下這個位置,頂部標題欄的兩側,位于屏幕的左上角或右上角,是個很顯眼的位置。


          個人認為,有三類功能比較適合這個位置。


          第一類,是和當前頁面內容有密切關系的功能。比如“編輯”型功能,可參考微信讀書“書架”頻道的“編輯”。再比如“新增”型功能,可參考 Twitter 首頁信息流的發推圖標。此類功能,最適合這個位置,而且一般也沒有更合適的位置來擺放他們。


          第二類,是比較高頻的通用功能或重大功能,比如搜索、消息、設置等。


          第三類,是某些高頻功能的快捷入口,比如微信的掃一掃和收付款。



          除此之外,如果是一個比較低頻的功能,不管是通用功能、重大功能還是輔助功能,放在這里,都不合適,因為會對用戶形成打擾。


          2 一個功能,最多可以出現幾次?


          大部分功能,在 App 里只會出現一次。但在日常使用各種 App 的時候,我們也會多次看到同一個功能,在不同的地方。


          有時候,能看到三次,比如搜索,在微信、知乎和網易云音樂都出現了三次,我們也不會覺得哪里不對勁兒。實際上,搜索雖然出現了三次,但也沒有引起我們的特別注意。


          還有一些功能,是出現了兩次。我們在第二次看到的時候,會有點煩躁,心想怎么又來了;有時候會有點困惑,心想下次我該用哪一個,哪一個最快捷。


          這中間有什么原則可以參考嗎?


          先來看下搜索,在微信、知乎和網易云音樂,都是比較高頻的功能。換句話說,用戶在不同的一級頻道,都有可能需要搜索一下,所以搜索出現三次,在不同的一級頻道,是有這個需求存在的。


          搜索以外的功能,個人認為,只有一類適合出現多次,通常兩次足矣。


          那就是,此類功能確實比較高頻,同時路徑又比較長,使用起來不夠方便。這時候,就適合給此類功能一個快捷入口。這個快捷入口,一般是出現在標題欄。



          一個功能,如果只是單純的重復出現兩次,兩次都沒出現在標題欄。那給用戶的感覺,就是,App 并不是在給我提供快捷入口,而可能只是通過重復的方式來強推這個功能,就容易產生煩躁和困惑的負面情緒。



          文章來源:站酷    作者:SnowDesign
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          交互體驗思考|產品體驗

          周周


          本文大綱

          一、好的收藏體驗這么做

          二、互動信息隱私的保護

          三、確定按鈕放左邊or右邊?

          四、手機實體鍵分布的合理性

          五、靜音鍵存在的必要性

          六、經典的旋鈕式交互



          iOS界面設計:12個優秀案例激發你的靈感

          seo達人


          那么,如何設計出一款界面精美的移動端App呢?

          如果你是為iOS設計應用程序,那么此文你可以好好看一看。我們都知道用戶界面會直接影響到用戶體驗。所以本文中,我首先精心挑選了12款最佳iOS移動應用程序模板和案例,它們都有著優秀的iOS用戶界面設計(iOS設計模式)和良好的用戶體驗,涵蓋生活類,雜志類,體育類,天氣類,網上購物類等等。此外,本文還提供了一些iOS人機界面設計指南。希望能對您有所幫助。

          1. City App

          類別:導航

          系統要求:支持iOS 9.0以上

          City App是一個iOS應用程序模板,也是一款以用戶為中心的信息類集合軟件。City App用于提供城市指南解決方案,并可以顯示你所在城市的有趣地點,并加以描述性介紹。

          用戶還可以直接通過相機照片搜索圖片所在定位,一張圖片就是一個數據的集合。Admin后臺可集中管理地點數據,但您可以對其編輯,更新或刪除。來自世界各地的風景優美的圖片是界面色彩的主要構成,非常美觀。

           

          2. Triibe

          類別:生活方式

          系統要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

          Triibe是一個引領全新的社區類iOS應用程序,它是專門為制作達人設計的一款產品。它提供一種最簡潔、直觀的方式展示你的手工創作和學習創意。任何題材設計,包括工藝,烹飪,家居,時尚等等,都可以得到展示。該App的一大特色使其精美的界面,用戶在這里上傳和展示其手工作品,搭配純凈的淺色背景,幾乎和任何的設計作品都能呼應。

           

          3. Design Events near you

          類別:活動

          系統要求:沒有限制

          Design Events,顧名思義,就給人一種充滿設計感的印象。它是由來自印度的一位才華橫溢的設計師Johny vino設計的。它一款典型的iOS應用程序,主要用于發現你身邊的各種設計活動以及您所在城市和附近地區的各種戶外活動。它可以智能的進行有趣的活動推薦。該App的動畫交互和過渡都非常簡潔流暢,搭配明快的配色,讓人覺得眼前一亮。

           

          4. Trove

          類別:播客和時尚

          系統要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

          這是一個非??犰艜r尚的iOS應用程序。借助Trove,您可以隨時隨地找到自己喜歡的風格,獲取來自世界頂級風格影響者的無盡靈感和建議,追隨頂級時尚博主。瀏覽“精選”服裝,可以發現并關注與您風格一致的博客。此外,“My feed”選項卡,可以讓您隨時查看收藏夾,并將物品添加到您的收藏夾中,以便稍后再購買或可以選擇立即購買,你的所有選擇都是自由的。

           

          5. Nowait Guest

          類別:食品和飲料

          系統要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

          Nowait Guest是一個簡化生活的iOS App。使用該應用程序,可以為您節約大量的訂餐等待時間,很餐廳都已經開始投入使用該App,以方便其顧客可以提早了解其訂餐情況,包括Chili’s,Buffalo Wild Wings,First Watch等。用戶在家時,就可以隨時查看附件餐廳的當前等待時間,然后做出決定是否前往。餐廳的圖片使用非常吸睛,整個界面看起來讓人覺得“垂涎三尺”。

           

          6. The New York Times

          類別:雜志和報紙

          系統要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

          這是一款家喻戶曉的應用程序,幫助您隨時隨地掌握最新信息,對于新聞愛好者和喜歡閱讀的用戶而言,這是一款比書美觀,但和書一樣能用文字傳達信息的程序。該程序與iPhone,iPad和Apple Watch的NYT應用程序一起獲得過聞類應用程序獎項。它具有新聞快訊,多任務處理,晨報和晚報,播客,保存文章以供日后在任何設備上閱讀等功能。

           

          7. iPhone X – Todo Concept

          類別:雜志和報紙

          系統要求:iOS 9.0或更高版本。與iPhone,iPad和iPod touch兼容

          iPhone X – Todo Concept是由Jee-Jeong為Norde設計。它是基于iPhone X概念而制作的一個新原型。該原型的草圖和psd模型都可以免費下載。它是設計師特別為iPhone X的發布而設計的。它的動畫過度和轉換都非常流利,其色彩選擇鮮明大膽,極富感染力。留白的界面設計模式,和各種純色背景都能形成鮮明對比,突出了重要信息,又美化了界面。

           

          8. Cloud Music Offline MP3 Music

          類別:音樂

          系統要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

          對于喜歡聽音樂的人來說,這是一款不容錯過的音樂應用程序。您可以輕松地將音樂從云端下載到您的設備并脫機播放。您的設備上就是一個無限量的音樂庫。其音樂播放列表非常有趣,設置了動畫多樣的操作按鈕。整個界面白色純背景,干凈而簡潔,用戶的注意力會停留在其喜歡的音樂上,不會分散。該程序支持所有最流行的音樂文件格式:.flac .mp3,.aiff,.m4a,.wav 等等。

           

          9. KicksOnFire: Buy Sneakers

          類別:運動

          系統要求:iOS 8.0或更高版本,與iPhone,iPad和iPod touch兼容

          這個應用程序是是專為運動鞋發燒友設計的,主要是推送新款運動鞋的特別發布日期及其相關新聞。該程序是App Store下載量最大的運動鞋發布日歷類應用程序,不僅是獲得第一手運動鞋咨詢,您還可以在這里購買您最喜愛的運動鞋。其推送會基于您的個人資料智能進行個性化的發布和價格估算。

           

          10. Airbnb

          類別:旅行

          系統要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

          家喻戶曉的一款App,風靡全球。當您準備旅行,從Airbnb開始享受難忘的旅行體驗吧。這里,所有關于旅行的事情都變得更加美好,比如尋找旅行冒險,遠游或找到一個全新的地方。游客可以獲得度假屋租賃,體驗一種新體驗,并在世界各地參觀的地方。如果您有房屋待租,Airbnb也是一個最佳平臺,在這里,你絕對會當一個優秀的“房東”。

           

          11. Local Weather Radar & Forecast

          類別:天氣

          系統要求:iOS 9.0或更高版本,與iPhone,iPad和iPod touch兼容

          該程序是一個當地突破性的天氣新聞播報App,也是一個美國本地,乃至世界各地的交通應用程序。只需一個點擊,就可以來回切換地位,以便隨時查看您的朋友和家人所在地的天氣情況。該程序還可以以小時來記錄您所在地區的氣溫變化情況,形成以個獨特的“氣溫變化”列表。

           

          12. Sofa

          類別:電影,電視和書籍

          系統要求:iOS 9.3或更高版本,與iPhone,iPad和iPod touch兼容

          這是一款iPhone應用程序,是可以讓您沉浸在書籍,電影或電視節目中度過美好時光的一款App。您可以自定義創建電影,電視節目,書籍等列表,也可以將電影,電視節目和書籍添加到任何列表中。當您需要搜索某一條目時,可以通過向下滑動操作來直接解鎖。

          以上是2018年12個非常棒的iOS移動應用程序,它們中的大部分都位于App Store排行榜的首位,下載次數和使用人數都幾位可觀??戳诉@么多成功的iOS應用程序,作為設計師,你有沒有思考過,這些App成功的秘訣的是什么?

          不難發現,出色的用戶界面和用戶體驗至關重要。iOS設計主題將就明晰、尊重和深度,這意味著,在整個iOS系統中,文字在任何尺寸的設備上都是清晰易讀的,圖標是精確而清晰的,并且需要流暢的動畫和交互,有序的視覺層次等等??傊?,您設計出來的App需要滿足用戶對質量和功能的高期望值,才有可能成功。

           

          那么,設計一個美觀精細的iOS移動界面都有哪些必須注意的點呢?

          1. 排版

          1)字體

          字體選擇不宜多,多則雜亂。只需使用單個字體并使用幾種字體變體即可。蘋果公司使用San Francisco,并根據產品功能選擇字體。例如,在iOS 7中使用Myriad(Pro)Light,在iOS 9中使用SF-UI。在iOS 10中,舊金山變體是SF UI Text和SF UI Display。你只需按照規則即可。但為了達到文字的易讀性和可讀性俱佳,關于字體選擇和字體布局,你還是要根據具體情況仔細斟酌。

           

          2)字體大小

          iOS的字體大小有其比較明確的規范,具體查看下表:

           

          2. UI設計中的顏色

          色彩的魔力不言而喻,人都是視覺性的動物。顏色可以傳達活力和信息,提供視覺連續性,響應用戶行為提供反饋、幫助人們可視化數據。自iOS 7以來,Apple一直在為其操作系統界面和預設應用程序設置色彩明朗鮮艷的調色板。關于顏色的選擇比較自由,你可以使用下面列出的默認iOS調色板,也可以自己定制,以便在同類App中可以脫穎而出。

          了解更多:如何在UI設計中明智地使用顏色來創建完美的UI界面?

           

          3. 圖標

          iOS的圖標風格是簡單易懂,并且專注于某個功能點或者信息點。通常情況下,iOS應用程序需要使用到不同尺寸的圖標。比如,用戶在安裝某一App后,在主屏幕可能需要使用較小的圖標,但該程序在App Store里又需要更大的圖標。關于iOS圖標大小,也有比較明確的規范:

           

          4. iOS 11中的更新

          1)加粗的導航設置

          這幾乎是iOS 11中最令人印象深刻的變化。使用粗體標題可以讓用戶快速了解其當前位置,并進行快速標簽切換。

           

          2)界面布局中的空白區域

          iOS 11的標題文本包含一組元素,其中包含圖片和描述,這些元素可以保持組元素之間的較大間距。在這種情況下,設計元素保持足夠的間距并且可以用于區分不必要的裝飾元素之間的層次關系。

           

          地址:Mockplus

          作者:jongde

           轉載請注明:學UI網》iOS界面設計:12個優秀案例激發你的靈感

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          如何在界面設計中使用留白

          seo達人


            01 .認識留白 

          在介紹如何使用留白提升用戶體驗之前,我們需要先明確留白的意義。

          留白是頁面元素與元素之間,以及元素周圍的空間。當設計師談論留白時,實際上說的是負空間,術語“負空間”起源于傳統藝術形式,它讓我們更準確地捕獲物體的形狀。

          “Suprematism: Self Portrait in two dimensions”

          負空間就是元素之間的部分  by Kasimir Malevich

           

          雖然我們稱之為留白,但并不意味著就是白色的。只要該空間沒有任何的文字和圖像,即使被填充了任何顏色,這也算是一個留白。所以留白與實際的白色并沒有關聯,“留白”就是“負空間”。

           

           02 . 為什么留白很重要 

          留白是一個好設計的基本要素,與傳統藝術一樣,物體在GUI里也需要負空間,文字,Button,Logo,和其他元素需要空間去呼吸,所有優秀的用戶界面里,從頂部到底部,頁面中所有的元素都有適當的留白。

          空白可分為兩種類型:大留白和小留白。

          大留白

           

          小留白

           

          Note
          小留白:文本和網格之間的空白,它有助于內容的可讀性。
          大留白:頁面上主要元素之間的空白,與小留白不同,大留白是整體設計的容器。

           

           03.七種影響用戶體驗的留白 

          留白是平衡設計元素的好工具,幫助我們更好得組織內容,提升視覺信息傳達的體驗。

          — 1 強調特定元素 —

          強調某種元素,是設計師最常見的任務之一,雖然設計師可以用許多視覺方法讓用戶聚焦在某些特定元素上,在焦點的周圍運用留白往往都能獲得比較好的效果。

          距離和注意力之間有特定的聯系,較大的距離能吸引人的注意,周圍的缺失使現有的元素更佳突出。設計師會運用合適的留白去強調重要的元素,例如一段內容,較大的Padding值會加強這個區域的吸引力,因為屏幕上沒有其它元素可關注。

          物體周圍的留白越多,就越容易吸引眼球。

          在下面的例子里,Google在設計中大力倡導留白,留白很好地傳達了設計的意圖,我們的注意力在頁面的主要目標上,不會分散給其他區域。

          MailChimp的主頁運用了相同的方法,來突出操作按鈕(call to action),你會注意到“Sign Up Free”這個按鈕立刻吸引了人的注意。

           

          — 2 鏈接相關元素 —

          當我們在檢查元素布局時,通常把它看做是一些對象的組合,這是因為我們的大腦會根據物體之間的相對位置,來創造一個關系模型。格式塔的法則解釋了,臨近的物體會被看做是一個整體。留白也提供了一種視覺線索,看一下這張圖:

          很可能你看到的是兩組點陣,而不是12個原點,這是12個相同的點,唯一不同的是他們的間距不同。

          這個法則也可以用于交互設計,我們來看下面的Web表單。

          • 相關元素成組:我們知道,一組元素靠在一起時,看上去是有關系的,所以相關的標簽要靠得近。左圖較難傳達出標簽與輸入框的關系,而通過調整間距,如右圖,表單的可瀏覽性提高了。

          • 相關信息成組:眾所周知,長的表單讓人感到壓迫。用戶在填這些表格的時候會變得猶豫。把相關的字段組合在一起,能幫助用戶了解他們必須填寫的信息。以下的形式中,兩種表格都有相同數量的字段。不同的是右邊劃分了三個組,內容的數量是相同的,但是給用戶的印象大不相同。

           

          — 3 防止視覺雜亂 —

          許多的App和網站承載著太多的信息和元素,沒有足夠的呼吸空間。這通常由于產品創造者希望傳遞太多的信息,不幸的是,用戶的關注度有限,越多的元素爭搶著注意力,用戶能夠關注到的就越少。

          可以看下面的例子,這是一個元素太多引起的極端案例。

          當每個看上去都一樣的時候,用戶選不出重要的那一個

           

          許多網站有著相同的問題,缺乏留白會給用戶的眼睛和耐心帶來壓力,充斥著文字和圖片的網站使用戶產生挫敗感,使他們逃離。

          雜亂的頁面沒有吸引力,并且不會讓用戶想要閱讀內容,尤其是當沒有視覺層次時。

          過多的信息負載讓界面變得混亂,那么減少混亂就能提高界面的可理解性:通過消除干擾,你可以強制用戶只關注即時可見的內容,你可以用留白來減少壓迫性,留白可以減少噪音,讓用戶更能聚焦。當布局達到了留白平衡,各個元素更容易被解讀時,就會帶來更好的用戶體驗。

          Tip
          請嘗試“5秒測試”,觀察一個頁面5秒鐘,然后回憶你記得的內容,是否是你想要強調的元素,這將幫你了解頁面中是否有合適的留白。

           

          — 4 通過互動內容引導用戶 —

          如果你希望用戶的視線從一個點流向另一個點,你需要給他一個這么做的線索,這個線索就是留白,留白運用的得當時,能為頁面創造自然的視線流動。

          特定的留白可以實現有效引導、保持讀者的興趣,如下圖所見,Dropbox通過鋸齒模型引導用戶瀏覽一系列產品的關鍵特征。

          空白可以幫助設計師講故事

           

          不對稱是另一種留白技巧,可以用來引導用戶對某一部分的注意,當一個元素運用了不對稱留白,它會立馬就會從周圍的元素中跳脫出來,看起來更有活力。如果你要在頁面中設計一個鏈接或者按鈕,這種方法可以有效引起別人的注意。

          非對稱留白非常適合聚焦頁面上的特殊區域

           

          — 5 提高可讀性 —

          內容為王,內容是大多數應用程序和網站的價值,這就是為什么良好的可用性的一個關鍵方面是內容的可讀性,很多因素可以提高可讀性,比如字體的大小和顏色,或使用標題,留白是其中一個重要因素,因為它對內容的可讀性有直接的影響:

          行間距可以大大提高一段文本的可讀性,一般來說,行間距越大,用戶閱讀時候的體驗就越好,但是太大會破壞統一性,使得設計中斷。

          段落和文字塊之間的留白有助于幫助人們更好地理解閱讀的內容,根據2004年的研究,這種空白增加了近20%的可理解性

           

          — 6 運用視覺分隔線 —

          設計師經常使用橫向或縱向的線去創造分隔線,雖然這樣的分隔線在大多數情況下是可以的,有一個主要的缺點,大量分隔線的使用會導致視覺的噪音,造成密集擁擠的頁面。

          隨著用戶的偏好向更簡潔的界面轉移,對UI中的基本元素進行解構是成功的關鍵。可以用負空間來布局,而不是線,更少的分隔線能營造清爽、現代和更實用的感受,大方地使用留白可使一些復雜的界面看起來更簡潔友好。這一變化背后的真正意義在于,在關注內容和功能同時消除冗余的元素。

           

          — 7 創造成熟優雅的感受 —

          雖然留白經常被看作是改善用戶體驗的技巧,但它也可以被用于純粹的審美目的,大量留白的網站能反映出極簡和奢華感。

          留白有助于提高整體設計的基調——通過把更多的焦點放在產品本身,使產品看上去更奢華。

           

          04. 關于利益相關者的幾句話 

          現在你可能知道了留白的重要性,而另一方面,留白可能引起設計師和利益相關者的矛盾?!傲舭滋嗔耍覀兛梢杂脕碜鍪裁??”是我們經常從利益相關者(客戶或經理)那里聽到的。

          把這種要求作為一個機會去教育利益相關者,作為設計師,我們的工作就是幫助他人理解為什么留白是用戶體驗重要的組成部分,宣揚并解釋你的思考過程,如果這不起作用,你可以采用A/B測試,測試一個設計的兩個版本,一個由設計師提出,一個由客戶提出,用戶可能會喜歡那個不那么混亂的版本。

           

          05.結論 

          留白不是一個空白的畫布,而是一個強大的設計工具,但是這個工具很難掌握:現實應用中的留白既是藝術也是科學,掌握如何使用留白來創建良好的布局需要實踐。你實踐的越多,學到的也就越多。

           

          原文地址:medium

          譯文地址:51UXC(公眾號)

          譯者:51UXC 翻譯社

           轉載請注明:學UI網》如何在界面設計中使用留白

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          費茨定律如何指導界面設計

          seo達人

          什么是費茨定律

          費茨定律是人類運動的預測模型,主要用于人機交互和人體工程學。該法則預測光標/手指從一個起始位置移動到一個最終目標所需的時間(T)由到目標的距離(D)和目標的大小(W)所決定,用數學公式表達為時間 T =a + b log2 ( D /W + 1 )。其中a、b是經驗常數,a代表手指開始到停止的時間,b代表手指的移動速度。

          舉個生活中一個開燈的例子:

          早期的開關只有一個手指大,每次開燈的時候都需要將手移動到開關上方,然后伸出手指調整到適合位置然后在按下。由于按鈕小,在沒開燈的時候你根本不知道它在哪里,需要不停的摸,所需時間就比較長。后期大家意識到了這個問題,將開關按鈕設計變大,人們操作時只需要將手移動到按鈕上方,由于面積大不需要調整直接按下即可,所需時間就比較短。

           

          如何指導界面設計

          費茨定律應用比較廣泛,其在移動界面設計中也有很好的啟發意義,結合費茨定律公式可以得出指導我們設計的三個要點:

          1. 按鈕越大,所需時間越短

          根據公式,當到目標的距離(D)一定時,目標大小(W)越大,所需時間越短,反之越長。下面以支付寶的登錄流程為例,如下圖所示:

          左圖是支付寶初始頁,該頁面主要讓用戶選擇合適自己的操作方式。因此在設計上采用登錄和注冊按鈕并排的方式,目標區域較小,給用戶充分選擇的時間。

          中圖和右圖,界面中僅僅只有一個按鈕,其他注冊、遇到問題都可弱化用文字高亮的樣式展示,用戶在操作時基本不用想就知道點擊下一步按鈕。大大的減少了操作時間,讓用戶可以專注于登錄上。

           

          2. 距離越遠,所需時間越長

          當按鈕大小一定時,手到目標的距離越遠,所需時間就越長,反之越短。但是這里就發現一個問題,移動端如何判斷手到目標的距離呢?這里我們可以借用拇指熱區來進行判斷。隨著手機越來越大,不同機型的拇指熱區會有所差異,以iPhone6右手操作為例,它的拇指熱區。如下圖所示:

          根據圖例可知綠色區域是我們手指最容易輕松達到的,橙色是伸長手指才能觸達,操作相對較難,紅色區域為難以觸及的區域。我們可以判斷手指到綠色區域的時間最短,到紅色區域的時間最長。因此在設計時我們需要將重要層級高的按鈕放到拇指熱區的綠色部分中,讓目標離手指越近,從而提高操作速度。如下圖所示:

          以上兩個案例均是Feed流界面,在卡片中露出功能有點贊、評論、分享這三個按鈕,其中大眾點評這三個中點贊的重要性層級最高,因此將其放在綠色最易觸達區域,單手操作離手指距離最近,而分享和評論次之,因此將其放在了紅色和橙色區域,單手操作離手指更遠。

          其中微信讀書這三個中分享的重要層級最高,因此將其放在最易觸達的綠色區域,單手操作更近。

           

          3. 手移動越快,越易錯誤操作

          其實不管你手的速度有多快,當距離較遠、按鈕較小時,當手移動到按鈕上方就會停下來進行定位然后才能準確得進行操作,如果只要求速度,手移動過來直接點擊有可能就點中不了按鈕,容易進行錯誤操作。

          因此在UI設計中,如果我們想要用戶能夠快速操作,可以為用戶打破距離和大小帶來的限制,結合手勢操作來進行設計。如下圖所示:

          以微信為例,在微信列表中為了讓用戶能夠快速操作列表,引入了手勢操作(安卓長按、iOS側滑),當長按或側滑列表時,就會在當前位置出現操作內容,提高操作效率。

           

          在移動端界面中的應用

          在實際交互設計中,合理使用費茨定律,可以讓我們的界面使用更流暢,錯誤率更低。下面我們一起來看看費茨定律的四大應用場景。

          1. 來電顯示場景——不同狀態,不同設計方式

          iOS的來電提示在鎖屏和蘇醒狀態分別采用滑動接聽和點擊接聽,可以很好的用費茨定律來解釋。如下圖所示:

          鎖屏時:用戶手機場景不確定,很容易意外點擊。在設計時就需要增加操作距離、延長操作時間,防止誤操作的情況,采用滑動解鎖就可以增加操作的距離,放在該場景中使用較為合適。

          蘇醒時:用戶正在使用手機,這時候采用滑動操作距離太長了,因此設計為按鈕的樣式,用戶可快速點擊接聽或拒絕,進而提高用戶操作效率。

           

          2. 將返回浮于底部操作欄中——縮短操作距離和時間

          隨著屏幕越來越大,拇指熱區也發生了變化,你會發現左上角的返回按鈕單手操作越來越不可能,尤其是Plus、iPhoneX的出現返回按鈕顯得有點雞肋。不過在體驗資訊類的產品時發現,部分界面他們將返回按鈕放到類界面底部左下角的位置,下面將這兩種進行對比下。如下圖所示:

          以今日頭條的詳情為例,返回按鈕在常規的左上角。結合拇指熱區你會發現左上角的區域單手是很難到達的。對于資訊類APP需要不斷切換看的文章,返回鍵在左上角無疑加重了操作難度。

          以虎嗅為例,他們將返回按鈕移動到了底部左下角,結合拇指熱區你會發現左下角的區域單手是可以輕松到達的,將返回按鈕放在底部,大大的節約了用戶操作時間。

          需要注意的是,盡管通過分析,返回按鈕在左下角單手更好操作,但是有時候習慣真的是一件可怕的事情,比如我在華西醫院的微信小程序時,很少能夠記住點擊底部的前進和后退鍵,每次想返回上一級,就習慣性的點左上角,結果就直接退出小程序。如下圖所示:

          面對頂部返回鍵單手不方便點擊、底部返回鍵又老是記不住點,同時在當前規范下又不適合大面積的使用,怎么樣才能幫助用戶操作呢?其實iOS按住左側屏幕邊緣向右滑既可以返回上一步,安卓自帶虛擬返回鍵都是較為快捷的操作方式。

           

          3. 合理利用手勢操作——提高用戶操作速度

          安卓的長按和iOS的側滑編輯大家都比較熟悉,他們多用在列表頁的編輯狀態,用戶長按或側滑列表,操作按鈕就顯示在當前位置,操作效率比較高,如下圖所示:

          以天貓購物車為例,大家知道長按是安卓端常用的功能,側滑是iOS端的功能,然后天貓購物車這兩種功能都支持。其主要原因考慮到安卓用戶在使用蘋果手機時,可能不知道側滑的功能,因此在購物車的編輯中還加入了長按功能,讓用戶能夠更快捷的操作。

           

          4. 將操作按鈕進行收納——阻礙用戶操作

          在設計時如果控制不經常使用,或者想阻礙用戶操作時,就可以把操作按鈕放遠一點,同時在設計上可以將其收納,加大用戶到操作難度。如下圖所示:

          以大眾點評詳情為例,在右上角并沒有直接放舉報到按鈕,而是放到更多到按鈕,一個原因是為了方便后期的拓展,另外很重要到一個原因是不想讓用戶舉報加深用戶的操作難度。

           

          總結

          本文主要分享了費茨定律在UI界面中的應用,結合今天的分析,總結起來主要有四個要點:

          • 1、我們想要更容易點擊到目標,就需要將一個頁面的主操作按鈕放大。
          • 2、我們想要讓用戶快速點擊目標,操作更方便,可以將目標放于拇指熱區輕松觸達區域。
          • 3、我們想要讓用戶快速移動時,就可以利用手勢操作,它打破距離和大小的限制,從而讓用戶可以快速操作。
          • 4、我們不想要用戶操作或不常用的控件時,就可以將按鈕進行收納,加大用戶操作距離,從而增長用戶的操作時間。

           

          參考文獻:

          Technical Artist的不歸路 —— 費茨定律(Fitts’s Law)在UI設計中的使用  

          設計法則: Fitts’ Law / 費茨定律(費茨法則)

          《通用設計法則》立德威爾著   朱占星 薛江譯 中央編譯出版社 2013年9月北京第1版

           

          原文地址:海鹽社(公眾號)

          作者:風箏KK

          轉載請注明:學UI網》費茨定律如何指導界面設計

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          界面設計中的三維設計法

          seo達人


          隨著當今越來越多的信息需要被展示、曝光,而移動設備的屏幕空間又有限,為了減少用戶在使用應用時的跳轉,減少用戶的路徑,設計師們開辟了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達,從二維到三維,這樣更能有效利用手機屏幕上的有限空間,這也是以后界面設計的大趨勢。

          這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現出來的。(以下簡稱MD)

           

          Depth(深度):

          Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.

          在MD的設計規范中,用Depth來說明界面設計中的深度,既而在界面設計中引入了Z軸的設計思維,將界面設計由二維設計引進了三維設計思維的地帶。MD通過抽象化紙片在物理世界中的形態,定義除了各種信息層級以及常用狀態的表達方式。

          再來看看,如今iOS的最新版本iOS 12,也已經開始向這一方向進行發展。最典型的要屬以下的iOS的內置應用:股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。

          三維設計法,在界面設計當中,主要分為兩個方向來運用,視覺設計和交互設計。

          人們通過雙眼能夠分辨出物體遠近大小的形態,因此如果利用這樣的視覺規律,便可以在畫面中呈現出真實的效果,突出視覺的立體化。

          因為使畫面產生三維的模擬真實的效果,可以畫面更具有吸引力,我們之所以能夠看清楚物體,是因為有光的存在,現實生活的影子是因光而產生的,才是一個真實立體形。如果能恰當運用光影的效果,那將會讓圖形在進行三維空間轉換時變得更加凸顯。

          當今,在界面的視覺設計方面,通過層疊、卡片化和投影的設計手法來對界面的內容進行處理,可以增加界面的層次感。在如今同質化嚴重的扁平化設計下,能給人煥然一新的感覺,同時也給人一種內容呼之欲出的感覺,加強了點擊的欲望。這樣的設計手法讓界面的Z軸空間得以加強,必將是下一個新的趨勢。

          例如:KEEP、潮汐、蝦米音樂

           

          例如:Dribbble 和 Behance

          圖片來源于網絡

           

          而在交互設計方面,想同時展示多種內容時,假設對一個需求有著很強的曝光要求,或者是想讓用戶知道有這項內容的存在,但又不想讓頁面內容過長,導致被忽略或難以找到時,可以采用頁面Z軸層級覆蓋的表現形式。

          采用了Z軸層級覆蓋的架構形式,用戶主要的交互操作變為上拉、下拉來閱讀信息,減少了點擊跳轉這一類的操作,減少了用戶的操作成本。且滑動手勢,是以后人機交互發展中的一個必然趨勢。

          在一些APP中有所表現的有:豆瓣FM、豆瓣詳情頁等。(大家可以從這些APP上獲取設計靈感)

          豆瓣FM

           

          豆瓣(電影詳情頁)

           

          例如:

          上圖是京東(APP)的商品詳情頁,這時候我們接到的需求是將上圖的文案放進這個界面中。

          要知道在寸土寸金的APP界面中,每一個位置都是十分的寶貴,一但放置不佳,就會給用戶的視覺流造成一定的影響,使得用戶體驗下降。況且,還是京東這樣流量巨大的電商APP,位置便顯得更加寶貴,而上圖中的紅色標記范圍就是我們的限制區域,下面我們先來看一個不合理的做法。

          上圖我們是直接加了一個界面,將這個模塊設定為可以進行跳轉,從而達到顯示完整(文案)的需求。

          這樣做,不僅增加了用戶的路徑,而且還會給來回切換的用戶造成一定的困擾,消耗了手機的資源的同時,下面的留白也顯得很浪費、空曠,視覺上就很不美觀。

          那么,京東是怎么做的呢?

          京東采用了一個浮層設計(Z軸),將全跳轉改為半跳轉,這便是在界面設計中的Z軸運用,這樣既可以達到文案所要求的曝光,也能最大利用讓界面的空間,實現與原場景的完美銜接。

          通過在 Z 軸上進行分層設計,模擬物理世界中人與物的真實的交互模式,幫助用戶理解產品設計,將信息更好的淺層化,這樣可以給設計師們帶來更多發揮的空間。

          在使用這個思維來做設計時,可以事先考慮以下幾點:

          • 根據用戶使用體驗,來判斷是否需要使用Z軸分層交互。
          • 這樣做是否能幫助用戶更好的理解你所做的設計?
          • 空間感設計主要意義是能正確的引導用戶,并建立起對產品的使用邏輯。
          • 每一個界面層級只需要表現一件事。
          • 當你想要在界面中加入一個菜單欄但發現沒有空間?這時候可以考慮使用Z軸的設計。
          • 謹慎使用Z軸層級交互,因為它會增加空間關系的復雜度。
          • 多參考現實世界中的真實交互,它給你的預期和感受,在互聯網設計中的很多靈感都來自于對真實世界的理解。

           

          總結:

          我們在做設計時,可以把當前的界面可以想象成一個的三維世界——分作X軸,Y軸,與Z軸,在這三個坐標軸上,可以進行思維上拓展。

          在交互設計當中,減少跳轉便是減少用戶路徑,就是使用各種方法在三維空間中,用x軸、y軸、z軸做出最合適、合理的用戶體驗設計。

           

          原文地址:站酷

          作者:ChrisIce

           轉載請注明:學UI網》界面設計中的三維設計法

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

          截屏2021-05-13 上午11.41.03.png

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          合理預設:如何為用戶提前設置好默認值

          鶴鶴

          What 是什么

          「合理預設」是指系統提供默認選項,這些默認選項不需要用戶做任何操作,可以節省用戶完成表單的時間和精力。

          這些默認選項來的數據源包括: 先前輸入的會話數據、來自用戶帳戶的信息、當前位置、當前數據和時間等等。


          案例 釘釘的“代辦事項”設置功能,可以自動抓取到語句中的時間信息,自動幫助用戶默認填寫時間,減少用戶的操作時長:

          相關模式 :語句填空


          Why 為什么

          系統通過提供合理的默認信息和答案,分擔了用戶思考和輸入信息的工作,減少時間,提高效率。

          而就算預設信息不是用戶想要的,也為用戶提供了一個示例來說明答案應該是什么樣子的。這一點也可以節約用戶幾秒的思考時間,或者避免輸入錯誤的信息。


          另外,合理的默認值還可以幫助用戶應對一些“難題”。如果用戶跳過了一塊字段,那么可能是這個問題沒有引起他的注意。用戶可能是不理解這個問題、或是默認值的含義。輸入答案,選擇值,或單擊按鈕的動作會迫使用戶有意識地面對這個問題。


          比如疫情期間,大部分公司都需要做健康打卡,下圖中有一些選項是直接填了默認值,但是有些就沒有填。比如下圖的左圖中,有關于“請假未到崗”這些問題,因為沒有填默認值,用戶就會對這個問題有印象。然后比如“今日是否有發熱癥狀”,“是否有咳嗽”這些,因為被系統默認填了,用戶很容易就忽略過去了。

          所以一些刻意希望被關注的問題,其實最好不要提供預設值,這樣可以讓用戶感知到這個重要信息的存在,進而加深對內容的認知。



          When 什么時候使用

          當產品要求用戶提供類似表單的信息輸入(例如文本框或單選按鈕),并希望減少用戶填寫時長時,可以使用提供默認設置。


          但是當問題的答案會很敏感或是與政治相關時,最好不要提供默認值,例如密碼、性別或公民身份等。最好也不要為用戶擅自訂閱非必要的內容信息,如“請給我發送廣告郵件”等。


          使用條件

          · 用戶需要做類似表單的信息輸入操作;

          · 系統希望減少用戶需要做的工作;

          · 系統希望確保用戶填寫的準確性和一致性;

          · 可能用戶并不知道或者不關心答案,不需要引起用戶的重視;

          · 問題的答案不屬于敏感信息或是與政治無關。


          How 如何使用

          設定「合理預設」有兩種普遍的用法:

          1、使用一個通用的、常識性的、滿足大部分用戶需求的默認值,預先填寫輸入框;

          2、可以調用用戶早些時候提供給系統的信息來動態地設置默認值。例如,某個用戶提供了一個中國的郵政編碼,系統可以從這個編碼推導出用戶所在的省,甚至市和區的名稱。


          除此之外要注意幾點應用原則:

          · 使用預設的默認值不僅僅是為了防止用戶留下空白的輸入區域;

          · 要充分的了解你的用戶,默認值的設定要有絕對合理的理由 —— 否則,系統會給所有人帶來額外的工作量。


          Example 案例

          案例一:唯品會小程序在購買服飾類選擇 SKU

          用戶需求:購買服裝時需要選擇尺碼


          唯品會小程序在購買服飾類選擇 SKU 時,每個尺碼點擊后會顯示對應的衣服參數,用戶不再需要去商品描述中的尺碼表格中再找,也可以是設置好自己的身材數據,平臺會默認選中適合你的尺碼。

          案例二:螞蟻鏈實人認證表單

          用戶需求:需要根據表單內容填寫和上傳文件

          螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區,幫助用戶默認選擇概率最大的選項,不需要用戶自己操作。

          案例三:Photoshop 創建新文件

          用戶需求:創建新文件,調整畫布大小

          在 Photoshop CC 中創建新的圖像文件時,默認情況下會從操作系統剪切板開始。這里的假設是用戶剛剛創建了一個屏幕截圖,并且正在編輯該圖像。因此,Photoshop 在剪貼板中獲取圖像的寬度和高度,并使用它們來預先填充創建新文件的尺寸,這是一種節省時間的聰明方法。不用擔心圖像和畫布會有尺寸不匹配的情況。


          當用戶想要調整畫布大小時,原先畫布的長寬尺寸會預設出現在新的畫布大小里面,方便用戶進一步進行尺寸調整。


          文章來源:站酷  作者:Ant_Design
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

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

          存檔

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