10個音樂產品細節剖析，看看高手是如何做設計的?。黆I設計公司
當剖析音樂產品的細節時，以下是10個常見的音樂產品細節，它們展示了高手在設計中的巧妙之處：
大家好，藍藍設計今天和大家分享20款優秀的手機界面設計欣賞，共同學習成長！
我們有許多界面設計的案例，因為有保密協議不方便發出來。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
從產品經理處獲取項目原型圖，當獲取到原型圖后不要盲目的去進行設計，要先分析了解整個項目的功能、特性、用戶群體、項目的定位等等，特別是對功能的疑惑處一定要找產品經理溝通，只有做到對項目了熟于胸才能做出優秀的設計。
當我們對項目的功能、特性、用戶群體、項目的定位都有所了解后，還是不能馬上進入設計環節。我們需要先對市面上同類型的產品進行分析和對比，包括設計風格、配色、排版、功能樣式等等，了解其優劣勢，做到取長補短，思考如何讓我們的產品更加的完善，這時候我們的腦海里面基本上對自己要設計的東西已經有了一個大概的雛形。
這篇文章內所有的數值均以2倍圖為例，使用1倍圖的同學請自行除以2。
現在UI設計通常使用的是全面屏的設計規范，全面屏的設計稿更加美觀，且做作品集的時候搭配全面屏樣機視覺效果也更加突出。通常只設計一套蘋果全面屏的設計稿，不需要另外設計安卓端設計稿，安卓端由安卓工程師自行適配。
界面：750px1624px
狀態欄：750x88px
導航欄：750x88px
菜單欄：750x98px
指示器：750x68px
左右邊距：32px或24px
*其中狀態欄和指示器不需要進行額外的設計，是系統默認控件，除顏色外不可改變。
頂部功能：48x48px
底部菜單欄（有文字）：48x48px
底部菜單欄（無文字）：64x64px
尺寸：36px、32px、28px、24px
顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）
*利用文字尺寸對比和顏色對比可以得到不錯的效果。也可以給文字顏色添加少量的藍色，讓顏色不那么呆板。
組建控件系統可以讓我們的設計稿更加的規范，也便于修改，可以極大的提高我們的工作效率。
所有的圖標都需要做成控件，方便我們切圖。然后就是會重復使用的狀態欄、導航欄、菜單欄、指示器、列表、彈框、按鈕等控件。
除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項目的配色、特殊效果、文字尺寸都保存下來，不同的設計工具有不同的保存方式，大家可以根據自己使用的設計工具進行設置。
我們需要讓項目保持一個統一的設計風格，讓項目更加的整體、統一、協調。不同的風格有不同的優勢，選對與項目屬性相符的設計風格可以讓項目更加的出彩。
這種風格沒找到合適的名稱，我個人一般叫它傳統風格。這種設計風格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺沒有特別強烈的設計感，但簡單實用、樸實無華，層級劃分清晰明了。
卡片式風格是借用現實世界中卡片的特征和概念，將一個模塊或同類型元素放到一個卡片容器類，可以增加內容的獨立性，讓模塊劃分關系變得非常的清晰，是現在非常常用的一種設計方式。
常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個卡片。也不排除暗夜模式的卡片式設計，背景會更暗一些，卡片略亮。
在傳統UI風格的基礎上去除背景色塊和分割線，單以間距來區分模塊和元素，對親密性的應用有較高的要求。有時候單以間距來區分模塊和元素時，可能會導致模塊層級不分明，所以會使用將標題加大的形式，讓模塊與模塊之間的區分更加明顯。因為去除了分割線，留白就更多，會顯得界面更加的干凈、清爽。
新擬態是19年底在追波開始出現的一種設計風格，特點是使用統一的光源做出立體的浮雕效果，元素有厚度但沒有紋理和材質的輕擬物風。
常規做法是假設一個統一的左上方光源，給元素分別添加一個左上角和右下角的投影，左上角（被光源照射的一側）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來。而在按下或選中狀態時則使用兩個內陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個顏色，所以顏色不能使用純白或純黑，否則有一側的投影就會看不見，通常是使用藍灰色或深灰色背景。
新擬態風格視覺效果新穎、柔和，對比度低，看得久了會產生一定的視覺疲勞，研發成本也較高，所以現在更多的還是處于概念稿，實際項目中應用較少?？梢宰鳛橐环N練習或部分功能的使用。
設計稿完成之后我們需要將圖標等元素切圖導出交付給開發，IOS和安卓需要根據要求導出不同倍數的png格式切圖文件。
IOS：現在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；
Android：現在通常是輸出3套，xhdpi（超清，對應IOS的2倍圖）、xxhdpi（超超清，對應IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數加到切圖命名內，而是每種尺寸單獨建立一個文件夾。
png：最常用的切圖文件格式，背景無底透明，所以在導出切圖文件時需要先去掉背景色（figma將畫板填充色隱藏，sketch畫板不要勾選“包含于導出項”）；
svg：矢量切圖，需要背景無底透明，部分網頁端項目可能需要svg格式的切圖文件；
bmp：部分硬件機器的項目需要使用的圖片格式，需要注意的是bmp無法實現背景透明，如果背景是透明的會自動帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設計軟件無法直接導出bmp格式，需要先導出為png或jpg格式，再使用ps或其他工具轉換一次。
只能使用英文、下滑線、數字進行命名，不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態（有些切圖沒有多種狀態則不需要添加狀態命名）。
以蘋果端舉例：如底部菜單欄的首頁圖標命名則是ico_bottom_home_nor@2x（圖標_底部_首頁_未選中狀態）和ico_bottom_home_sel@2x（圖標_底部_首頁_選中狀態）。
頂部的搜索圖標沒有多個狀態，命名是ico_nav_search@2x（圖標_頂部_搜索）。
類別一般只有3種：圖標（icon）、圖片（image）、按鈕（button），我們通常會簡寫為ico、img、btn。
狀態一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會簡寫為nor、pre、sel、dis。pc端會多一種狀態：懸停（hover）。
sketch和figma等UI設計軟件可以同時導出多個尺寸的切圖文件和前綴/后綴，所以我們只需要設置圖標本身的命名如ico_bottom_home_sel，而不需要每個切圖都去手動的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導出設置中設置好每個尺寸的文件夾名稱和后綴，再統一導出即可。
軟件內部導出：現在的UI設計軟件Sketch、Figma、Mstergo等都可以直接導出切圖文件，只需要設置好相應的倍數和前綴、后綴，就可以快速的導出切圖文件；
上傳第三方：最常用的就是將設計文件上傳至藍湖，研發人員可以在藍湖上下載自己需要的切圖文件，但在上傳藍湖之前需要把設計稿中需要切圖的元素設置為切片。
和切圖文件一起交付給開發的還有設計稿的標注文件，讓研發人員可以清楚地知道界面內元素的顏色、尺寸、對齊方式、距離、透明度，文字的字體、字號、行高等。
很多設計文件都可以安裝藍湖插件，再通過插件將設計稿導出到藍湖，研發人員就可以便捷的查看界面的標注。
Figma、Mastergo等在線設計軟件都可以切換為開發者模式，只需要將研發人員邀請到自己的設計文件所在團隊內，研發人就可以查看到界面的標注；
有部分公司有一定的保密措施，會禁止設計師使用第三方平臺或是聯網操作，這種情況設計也無法使用Figma、Mastergo等在線設計軟件，只能使用Sketch等客戶端，輸出標注就需要使用相應的插件，Sketch可以使用Sketch Measure導出HTML格式的標注文件。
在項目上線的階段UI設計需要輔助研發提供上線應用商店需要的項目預覽圖、啟動LOGO，也需要設計補充出APP的啟動頁、閃屏頁等。
上線應用商店需要的預覽圖，通常是使用項目中比較有特色的幾個UI界面加以設計。
上線應用商店必須提供的LOGO，手機中啟動APP的入口，但不同的應用商店有不同的尺寸，華為、蘋果、小米、三星、應用寶等所需要的啟動LOGO都有所不同，所以輸出多個尺寸。以蘋果App Store為例，需要以下尺寸：
啟動頁和引導頁一般是和UI界面一起設計，不過需要項目上線后才會有其價值，所以可以先設計完項目的界面，在研發開發的過程中再去設計啟動頁和引導頁，只要在項目上線前提供給研發就可以。
當一個項目上線后，只能代表我們的現階段的工作已經全部完成。每個項目上線后都會收集用戶反饋，根據用戶反饋的信息優化功能和界面設計，通過持續不斷的優化、迭代讓我們的產品越來越好，這個過程中也需要我們UI設計不斷的去進行調整和優化。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
度咔是百度短視頻生態首款面向泛知識創作者的視頻剪輯工具，致力于降低泛知識類作者的創作門檻，助力生產優質的作品。
隨著產品的功能迭代，體驗的逐步更新，產品依勢也需要打造更好的運營氛圍和品牌印象來建立用戶口碑、提升轉化。對此，設計側針對度咔產品進行了全面的思考和分析，通過重新定義度咔運營視覺語言，明確產品調性，幫助用戶更新品牌認知。
一、品牌框架搭建
產品的運營視覺不只是單純的畫面展示，其背后都有更加明確的設計理念和手段，但運營視覺語言并不是千篇一律的，首先需要明確自身定位，突出產品獨特性。
設計初期，我們針對同類型產品與用戶類型進行了大量分析，在用戶人群劃分上度咔更具有針對性，目標用戶是口播自媒體、知識類創作者。但不像專業剪輯軟件門檻那么高，度咔更多的是通過特色產品功能幫助作者去降低剪輯門檻，業務主要通過征稿和教程的運營活動來提升用戶認知，帶動日活。
由此，我們梳理出度咔的品牌框架圖。以度咔「專為口播自媒體打造的剪輯工具」產品定位作為切入點，依據其自身定位和度咔區別于同類產品的特色功能，我們提煉出“便捷”、“智能”、“專業”產品核心關鍵詞。
二、定義度咔運營視覺語言
在前期創意階段，我們通過大量的競品調研、創意發散、概念嫁接等創意手段，找到時下大字為主導的版式創意。簡潔明確的版式結構，適當的畫面留白，使各元素在版面中形成具有條理清晰、富有節奏的視覺關系。這種邏輯方式，為運營視覺的高效、科學、嚴謹性提供了極大的便捷，同時也對應了度咔便捷、智能、專業的品牌感知。
對品牌定位、業務訴求、產品功能進行整合后，我們搭建以構成、配色、元素為主的視覺語言框架。
與時下大字為主導的版式創意相結合，建立以大字排版，強構成感為主的視覺語言基調。通過大量的風格測試不斷完善視覺基調并投入到項目中，同時規范運營功能排版，搭建元素庫，通過設計手法，達到專業與簡潔的平衡，統一的視覺基調和品牌色強化用戶對品牌認知。
1、重塑視覺基調：
1）統一風格
度咔以往的運營視覺趨于參差，導致整體視覺有較為強烈的割裂感，煥新后的視覺變得更加直率簡約，以簡潔的視覺風格保證內容傳遞的高效性。拋棄了諸多裝飾元素，取而代之的是硬網格，保持視覺整體和諧統一感，同時也傳遞出度咔便捷、智能、專業的產品調性。
我們對運營頁面進行了布局重構，采用白色底的背景突出文字信息，使得內容信息傳達更加明確，突出核心內容。在各類場景中，我們通過品牌色彩、圖形、符號的滲透，強化度咔品牌印記。
2）主題延展
根據業務訴求，保持主題性征稿活動的特色——在強化功能點的運營活動中采用3D元素和彌散漸變背景，如夏日主題將度咔符號與泳圈做3D創意結合，增添活動氛圍感。
2、品牌色煥新：
1）建立度咔品牌色應用規范。增強品牌識別性和記憶點。
首先搜集符合產品調性的顏色情緒版，選取整體偏明亮，識別度高的新品牌藍色。對比原來偏紫的品牌藍，現在升級后的藍色更顯專業智能，且更具有電子意味。
在一個科學有效的色彩系統里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產品體系的整體色彩感受，減少用戶在產品體驗中對反復出現的主色的視覺疲勞。
我們將藍色賦予了統一的品牌認知感受，并且將藍色加入到橙色里，生成了度咔特有的藍橙色系。橙色在度咔的色彩系統中起著至關重要的作用，為產品帶來積極，活力的感受，同時深黑和灰色創造結構、表達邊界、建立信息層次。
以基礎征稿活動為主的頁面使用度咔標準藍；在需要強主題和活動氛圍的頁面加入輕量的彌散漸變色彩。
3、提升效率：
1）元素庫搭建
建立度咔元素庫，規范化運營活動主視覺圖形原創性和創意性，沉淀設計資產。
由于后期運營活動多處用到3D元素，對3D的質感進行了規范統一。輕量化的3D風格更加注重極簡主義理性美學。
考慮到運營頁面的通用性，避免3D材質的喧賓奪主，材質風格以簡單通用為主，顏色以品牌色為基礎，采用光感通透的玻璃材質，加入環境光感。明朗，透傳度咔的品牌氣質。
四、總結
本次通過度咔運營視覺語言的搭建，無論從產品本身還是設計側，在數據和效率上都有明顯的提升。而設計作為和用戶最近的一方，在平衡各方訴求后呈現給用戶一個全新專業感十足的產品，進一步向用戶傳達品牌感知，助力創作者發現更多美好。
感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。也歡迎加入MEUX,視覺/交互/運營設計師，可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如：站酷）
關于我們：
MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
借此機會和大家交流一下項目背后的思考，共同進步！
我將從以下幾個方面進行講解：
01 對于理念的思考
02 關于風格的思考
03 關于背景的思考
04 關于材質的思考
對于本次設計，需求方是沒有給主題限制的，那作為設計師的我就從自身現階段的生活去發現主題、尋找靈感。 從深圳到成都創業，將近一年的時間，我發現成都的天氣總是陰沉沉的：
充足的陽光變得非常稀缺，對于成都人來說，如果有陽光的時候，都會去外面坐坐，曬曬太陽！ 這一年，“光”對我說是一種期盼的事物：
基于這個生活細節，我就把主題定成了“追光空間”而我對于“追光空間”的理解就是：光感、純凈、靈動
后面的執行也是基于這個理念進行思考創新的！
有了主題，就可以基于主題去思考設計風格了。
其實主題圖標的設計其實已經有很多年頭了，尤其是“app”這個概念流行開始，各大安卓手機品牌就有了自己的主題商店，用戶可以根據喜好下載自己喜歡的主題圖標。 我們在網上搜索主題圖標，可以看到很多作品，其中不乏有非常優秀的主題作品，但是當觀察的量到達一定程度后，會發現市面上的主題圖標風格還是比較相似，大部分還都是屬于二維圖標（下圖源自網絡）：
即使是一些質感很強的圖標，很多也是鼠繪出來的，也不算是3D風格（下圖源自7years）：
包括我們去年給小米做的幾套主題，也都是偏2維風格的
基于這樣的現象，我們是否可以嘗試將3d風格與主題圖標進行融合呢？雖然不能說是第一個這么做的，但至少在市面上出現的這種結合還是相對較少，所以也可以算是一種小的創新。
在構想風格的時候，我的底層邏輯就是找到未被發現的切入點，如何理解呢？
如果是3d風格與電商活動結合，已經相對常見了（下圖源自網絡）：
如果是3d風格與游戲視覺結合，也經常會看到（下圖源自網絡）：
但是如果是3d風格與主題圖標結合并且落地使用，那還是相對比較少的，這就是我在思考風格時候的一點心得：
希望可以給同行們一點啟發，拋磚引玉，希望市面上可以看到更多的3d風格的主題圖標！
這次的主題和以往不一樣，我們每做一個圖標需要延展4個尺寸：
有一些寬的、有一些高的，如果我們只放一個圖標，那么會比較空曠，不夠飽滿，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿精致。
背景紋理怎么做呢？我們希望它有細節但又不能過于搶眼，于是把目光鎖定在了基礎形狀上面，比如方形、圓形、三角形等等：
鎖定基礎形之后，就需要在基礎形之上融入更多的設計思考，比如風格的結合，因為整體是3d風格，所以背景也可以是3d化的基礎形白膜：
除此之外，我們需要將圖形進行構成設計，以不同的節奏和位置使其產生不同的美感，把基礎美多維度的釋放出來，比如矩形的基礎元素進行構成設計：
這樣，就可以做出不同的背景圖案，以此來解決需求目標。
設計師一定不要輕視基礎，不管是技法層面還是審美層面，往往優秀的設計都是無數個“基礎”堆出來的，先掌握基礎，才能用“基礎”釋放更大的能量！
其實本次的材質，也不算難，沒有用到特殊材質，主要有兩個關鍵點可以分享交流！
關于燈光
燈光我們使用的是日光燈，從軟件操作層面沒有任何技術含量，但是對于基礎審美會有一定的門檻，尤其是對于明暗交界線、光影對比的理解！
燈光的不同位置和大小會導致光影質感的不同：
燈光曝光：
質感太平:
物體與背景區分度不夠:
同樣的物體，不同的燈光角度和大小就會有不同的質量等級：
只有這種基礎審美達標后，我們才能繼續往后延伸。
關于材質
對于材質，最初我們嘗試用最簡單的漫射材質，但是發現缺少光澤度和細節，于是又嘗試在外部加一層玻璃材質，形成一圈透明質感和細節：
后面大部分的圖標都采用這種形式進行延展！
以上就是這次項目背后的一些思考
共勉！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
三星上一版本界面標題選用細體字，頭部區域留白，卡片功能區域小，背景選用寫實簡約照片，體現文藝感。
圓形的場景卡片與矩形的設備卡片形成對比，場景卡片與文字上下排列，更加凸顯場景圖片，但文字存在多行、單行顯示，這種表現方式會顯得凌亂。
設備卡片從上到下依次為圖標、設備名、狀態。
新版本標題選用粗體字，標題區域更加緊湊，功能區域展示空間變大，背景使用抽線雙色漸變，更現代時尚。
功能卡片為統一圓角矩形，場景卡片圖文左右排布，底部白色卡片區域可以很好兼容多行、單行文字的情況。
設備卡片從上到下依次為圖標、房間名、設備名、狀態。
底部新增Tab區域，細分為收藏、設備、生活、自動化、菜單5個模塊。
風格布局總結：新版本屏幕利用率更高，粗體字和抽象背景使得內容更凸顯，底部的Tab提供了更多模塊入口，功能分類更合理。
舊版本只有一個首頁，功能都在此被分發，并且功能較為單一。
新版本增加收藏、設備、生活、自動、更多模塊，對用戶使用場景做了細分。
界面頂部的房屋設置、添加、編輯為全局設計，不過在每個模塊中添加的內容不同。
收藏作為用戶每次進入App的第一屏，說明是用戶常用的重要功能，在收藏模塊中，可以添加的內容最多，用戶在此頁面可以完成大多數常用操作。
設備模塊是全屋設備的合集，自動模塊是場景、自動化的合集。
生活模塊主要提供家庭安全監控信息，還可接入其他服務，例如：智能家電監控、智能烹飪服務。
新版本設備卡片主要由設備圖標、房間名、設備名、狀態、控制區構成；房間名域為預留區，保證在不同頁面下的統一性。
設備在離線狀態下，右上角會顯示離線圖標，代替控制按鈕。
只有我們提前羅列出更多的頁面顯示情況，整合并預留可變區域，才能使頁面更統一。
收藏模塊分為3大區域，區域1為狀態通知區；區域2為收藏的場景區；區域3為收藏的服務或設備。這3個區域展示順序是固定的，可以選擇是否展示，無法改變展示順序。
因為每個區域的卡片尺寸是不一樣的，區域固定的好處是，可以保證顯示的統一性。否則大小卡片穿插顯示，還可能會空缺幾個，很影響美觀。并且操控邏輯也是固定的，用戶更容易理解。
點擊收藏模塊右上角添加，可批量選擇內容快速添加收藏。
在非收藏頁，長按卡片，可單獨添加收藏內容。
在設備、場景等新建或編輯界面，可以選擇添加至收藏的選項。省去了后續的單獨添加動作。
在收藏頁，長按卡片，可以進行單獨移除操作。
在收藏編輯頁面，可以批量快速移除移除。滿足了不同的用戶需求。
首次進入，展示的是某個房間內的設備，通過左右滑動進行切換房間，三星可能想為用戶提供模糊操作來提升效率，在房間少的情況下，這種方式比較好。當房間多了，用戶會滑動多次才能到目標房間；當然三星給出了針對精確選擇的方式，點擊左上角的房間入口，可以選擇、編輯房間。
房間多的情況下這2種方式都不是很好的解決方案。
這里要注意的是，三星把“沒有房間”也放進房間列表，供用戶選擇。現實中，有好多設備是不屬于任何房間或者用戶暫時不想放到某個房間，增加無房間選擇可以更靈活的滿足實際使用場景。
在房屋編輯頁面，可以添加房間，在這里三星已經為用戶預設了很多房間類型選項，用戶只需要做選擇，很方便，即使沒有要的，還可以在列表底部選擇自定義。
在設備頁面，只能添加設備、燈光組、監控組。
用戶可以通過關鍵詞搜索、掃碼、設備類型篩選、品牌篩選進行設備添加。
很全，幾乎涵蓋了所有的添加方式。
在添加頁面，第一步要先填寫組的名稱、選擇所在房間，第二步選擇要合并的燈，添加完成跳轉至設備組詳情，方便立即調控。
設備控制頁面采用了模塊化的設計方式，控制區域均為列表形式，不同的設備只需要替換圖標和文字及對應的操控列表，降低新設備重新創作新界面的設計成本。
長按設備卡片，選擇目標房間，可完成單個設備轉移。
選擇設備頁面右上角的移動方式，可以批量進行設備的轉移。
自動模塊包含場景、自動化、第三方設備，它們不具備房間屬性；
點擊右上角的箭頭可以展開或收起對應列表，方便查找內容。
第一步，先填寫場景名稱、選擇圖標、是否要添加到收藏；
第二步，選擇執行的設備，可以根據設備名稱、房間名稱進行快速定位，并且可以批量選擇設備；
第三步，設備添加成功后，根據需要，單獨對設備執行狀態設置。
新建場景的邏輯是：先批量選擇要執行的設備，再單獨設置執行內容。
這種方式的好處是，不易打斷用戶的設置思路，還可以減少操作步長。
新建自動化界面分為觸發條件、執行內容兩大塊；
初始狀態會為用戶提供使用描述，便于用戶操作。
可以通過時間的變化、設備狀態變化、位置變化、天氣變化、安防變化來觸發執行命令。
將設備狀態變化作為觸發條件時，設置邏輯是，完成一個設備的設置才能設置下一個，不能批量選擇。為什么和新建場景的流程不一樣？可能是因為在設置執行條件時，用戶心智里認為設備和狀態聯系更緊一些，并且條件種類不會太多。
當添加了一個以上的設備作為觸發條件時，界面會顯示“同時滿足或滿足任何一個”的選項。
執行內容可以是控制設備、通知給用戶、運行場景、改變安防模式。
可以批量選擇設備，并且可以設置執行延遲時間、自動復位，滿足用戶不同需求。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：土木君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
近日，憑借卓越產品設計能力和社會影響力，百度大字版從數以萬計的參賽作品中脫穎而出，接連斬獲德國IF、紅點、美國Muse Creative Awards 金獎、意大利A’Design 銅獎、中國智造DIA佳作獎以及C-IDEA最佳設計獎共計六項國際設計大獎，設計價值備受權威機構、媒體的肯定。
與此同時，百度大字版的設計、用研、產品相關負責人也收到《設計》的專訪邀請，就“用設計彌合數據鴻溝”專題分享了百度APP大字版的適老化設計。
《設計》雜志由中國科學技術協會主管，是中國唯一一本由中國工業設計協會主辦的全國性期刊，一直站在國家轉變發展方式的政策高度，溝通設計界和產業界的迫切需求，展示全球設計精英和設計教育界的新思維和新作品，促進社會公眾設計意識的提升，推廣中國設計之國際影響。
當前，我國正面臨老齡化問題的嚴峻挑戰。統計表明，中國的老齡化人口已達到2.64億，且這一數據仍在持續增長，而老年人在生活、情感上都面臨諸多問題。
首先，老年人在視覺、聽覺、肢體、認知方面都出現了不同程度的退化，無法平等地獲取信息和服務。其次，年輕人涌向大城市尋找機會，老年人被迫成為空巢者，疫情的發生更使親人長期兩地分離，老人情感孤獨缺少陪伴。此外，疫情的爆發也促使線下服務轉為線上化，老年人不能很好適應這一轉變，遇到很多困難。
百度大字版是一款運用AI技術專為老年人打造的綜合型內容與服務App，幫助老年人更平等便捷地獲取信息與服務，輕松樂享數字新生活。作為用戶體驗設計師，更深層地了解用戶，并提供滿足目標人群的體驗是設計師的使命，未來還將繼續深耕于適老化設計和差異化創新，不斷改善產品體驗，提供更滿足老年人訴求的產品，使老年人更平等便捷地獲取信息與服務。
目前行業內缺失成體系的老年人研究報告，針對老年人的研究資料分散在建筑/平面/醫療/家居等各個行業，同時業內也缺少針對老年人系統的設計標準或設計指南，現有無障礙設計標準針對殘障人士，且部分標準只適用于PC端，不適用于老年人和移動產品。
因此在進行百度App大字版的適老化設計時，設計研發團隊系統的研究了老年人面臨的問題、PC端無障礙設計標準及其他相關資料，產出了系統的移動端適老化設計標準體系，同時結合百度App大字版實際場景產出了解決方案。適老化設計包含：易閱讀、易收聽、易操作、易理解四個方面。
易閱讀的手段包括增大字號、使用符合老年人生理、心理特征的顏色、提供有效的反饋提示等；易收聽的舉措包括：增大音量、降低語速等；易操作的改良包括：增大觸控區、降低手指運動距離和操作精準度要求、提供明確的操作反饋、隱性操作顯性化及輔助用戶輸入等；易理解的改善包括：采用通俗易懂的文案、提供清晰明確的圖標設計、提升信任感、提供即時的幫助等。
由于很多年輕人去大城市尋找機會，導致產生很多空巢老人，他們情感孤獨，缺少陪伴。疫情的爆發，更使老年人在節假日也難以與家人團聚。因此百度App大字版通過語音合成等AI能力，還原兒孫親友的真實聲音，用于全局內容播報朗讀，使老年人感受到至親至愛仿佛陪伴在他們身邊，緩解老年人的孤單和思念之情。全局語音朗讀也能解決老年人的閱讀障礙和長時間閱讀導致的視覺疲勞問題，同時可以解放雙手，使老年人隨時隨地聽朗讀。
百度App大字版圍繞老年人的實際生活需求，依托百度的內容生態和個性化推薦技術，提供了符合老年人興趣的圖文和音視頻內容，一站式滿足了老年人的內容消費需求。在設計上，通過AI技術，對視頻增加智能字幕，方便老年人獲取視頻信息；在內容流的操作上，通過統一的容器和流式交互，為老年人提供便捷的操作體驗，使他們更方便、平等的獲取信息和內容。
百度App大字版還提供了多種實用工具，滿足老年人疫情時代和日常的生活訴求。疫情導致線下服務線上化，為了幫助老年人適應這一生活方式的轉變，百度App大字版提供了在線政務工具；很多老年人承擔了教育孫輩的責任，因此，大字版提供了一些輔助教學工具，幫助他們帶孩子。更有疫情地圖、垃圾分類等貼合日常生活場景的工具，使智能技術更貼近、融入老年人的生活。
《設計》：在設計前期的調研階段，發現了哪些用戶需求和體驗的痛點？數字時代，老年人群有哪些被忽略了的需求？
LU：我們的調研發現，中老年用戶朋友在使用移動互聯網產品時，最主要的體驗痛點是由于生理老化帶來的。隨著年齡增大，他們在判斷力、操控力、表達力、感官力的老化不可避免，這些老化也直接影響他們對智能手機的使用。
首先，隨著年齡的增長，中老年朋友的信息篩選和判斷力在逐步變弱。相比年輕人，中老年人更容易上當受騙。他們常見的受騙類型包括免費領紅包、贈送手機流量、優惠打折團購商品等。因為成長環境的影響，中老年人是更信賴權威的，而老化帶來判斷力的下降，讓他們對權威信息源的依賴度更高。在調研中他們提到，像“官方發布”（比如CCTV、地方電視臺發布的官方新聞、人民日報的新聞），以及“疫情辟謠”（比如百度App在2019年疫情爆發初期推出的新冠肺炎辟謠欄目），他們覺得很好、很信賴，能幫助他們判斷真偽，甚至會在家族群里向其他人推薦。由此可見，信息流產品應該為中老年人提供更多權威來源、真實可信的信息。
其次，中老年人的操控力在下降。這導致他們接觸信息的自主性變弱。在選擇手機App上，他們更依賴于通過別人推薦，或者看到別人在社交平臺的分享后下載，或者是選擇手機自帶的App。相比年輕人，他們很少自己主動去應用商店發現一些新的App。
再次，中老年人的語言組織和表達能力下降。在組織的中老年用戶座談會中，設計團隊深刻感受到他們的表述能力明顯不如年輕用戶。這表現在老年人的表達有很多重復的地方，中間也會夾雜大量“嗯”“就是”“呢”“吧”等語氣詞。他們在使用語音交互類產品時表達力差，加上有些用戶還有方言，這些都對語音交互、語音識別產品的準確性帶來了更具挑戰性的要求。
最后，隨著身體機能的老化，中老年人的感官能力也會下降。對手機使用影響最明顯的是視力衰老，會導致中老年人看不清小字，對色彩分辨力減弱，出現老花眼等問題，也容易眼疲勞。因此，手機App的文字排版、界面顏色、音視頻功能的適老化就顯得尤為重要。
《設計》：要做出理想的適老化設計需要綜合運用哪些學科的知識？
小軍：移動互聯網產品適老化設計研究涉及面非常廣，要求學科背景包括設計學、工效學、心理學、應用數學、社會學等學科和專業。 百度App大字版工作中研究了大量的跨學科文獻和研究成果，有效指導產品具體設計工作包括：設計學：對WCAG國際設計標準研究；標識系統無障礙設計研究；移動端中文閱讀舒適性研究；工效學：人體手指移動設備屏幕觸控區研究；老年用戶連續性操作行為研究；心理學：老年人心理特征中關于顏色研究；移動端產品中反饋設計的情感化研究；認知心理學下的移動端產品研究報告；社會學：老年人言語交際障礙實證研究；老年人聽覺審美偏好研究；老年人言語交際障礙實證研究；應用數學：用戶研究團隊開展基于用戶數據分析和基于目標用戶已有數據用戶特性研究。
雷哥：除了設計專業知識，團隊在適老化設計過程中運用了大量用戶研究領域的知識，洞察中老年用戶的生理老化特點和心理需求，幫助設計師們制定出適合中老年用戶需求的適老化設計標準。
在研究中，一方面運用了社會學、心理學領域常用的用戶訪談、問卷調查、座談會等方法，另一方面還引入了人類工效學領域的眼動實驗法。通過科學、嚴謹的實驗，評估不同設計方案在不同使用場景對用戶主觀體驗評價指標和客觀眼動指標的影響，最終形成了一套完備、成體系的適老化設計規范，可用于指引資訊類/閱讀類App的適老化設計改造。規范明確了搜索、瀏覽、長文閱讀、輔助信息（如功能按鈕、設計頁面）不同手機閱讀場景，標題、摘要、正文等不同信息層級下，理想字號、行距和粗細組合，并給出了不同灰度顏色的全局最小可辨識字號。
相關研究成果也已撰寫成2篇論文，其中《Improving Smartphone Reading Experience for Middle Aged and Elderly Users : The Effect of Font Size, Line Spacing and Stroke Weight》在第24屆國際人機交互大會（HCII2022）發表；《中老年移動端數字閱讀最小可辯識字號研究》被中文核心期刊《包裝工程》錄用，即將發表。另外，團隊也與中國老齡產業協會合作，發布了《移動互聯網應用程序適老化體驗規范》團體標準，共享我們的經驗，希望帶動移動互聯網行業關注中老年用戶的需求，幫助其他產品提升中老年用戶的閱讀體驗。
做出理想的適老化設計需要對老年人群體有深入的了解，需要搭建系統的適老化設計理論體系，在前期用戶研究階段需要綜合運用生理學、心理學、行為學和社會學等相關的知識，對老年人日常生活和使用移動App所面臨的問題有深入系統的分析。在提出解決方案的階段需要專業的交互設計知識，對人工智能技術有一定的研究，以及對現有業務自身擁有的資源有深入的了解，這樣才能提出系統且深入的適老化解決方案，而不只是停留在放大字號和功能精簡層面。
《設計》：針對老年人對有尊嚴的生活的渴望，除了通過無障礙設計適應老年人群體在生理和心理上的變化之外，百度的適老化設計是否有考慮在實踐中幫助老年人群體實現在數字時代中“進化”，來一場跨越數字鴻溝的雙向奔赴？
小軍：百度App大字版體驗設計目標解決老年人不能用、不敢用、不會用的問題，百度App大字版完成適老化無障礙設計覆蓋，解決了產品不能用的問題。
百度App大字版通過降低操作成本和幫助老年人學習成長，解決不敢用和不會用問題，實現在數字時代中的“進化”，具體措施包括：大字版依托百度領先AI技術，在產品實踐中應用語音搜索、圖像識別降低輸入成本，實現全場景內容朗讀降低信息獲取成本，通過AI技術應用降低使用成本，解決不敢用的問題。同時計劃在產品中增加針對適老功能的分步，直觀的教育視頻，解決不會用的問題。
《設計》：大數據時代如何實現“繭房”優化？
火韋：這個是很專業的問題，深入到了老年人內容消費的核心體驗。我嘗試片面地回答。
一般來說，“繭房問題”是指“接收”，就是個性化推薦系統會讓人們困在原有的興趣點上，從而接收不到不同的信息。百度推薦系統一直在解決“繭房問題”。這里重點說百度大字版對中老年用戶需求的特別處理，增加用戶接收內容的多樣化。
一是，鼓勵用戶主動興趣表達，通過合理的引導，讓老年人主動表達自己的興趣點、關注點；同時關注用戶對推薦偏好的意見反饋，靈活調整內容推薦；二是，搜索和內容推薦的結合，參考用戶的搜索意圖，補充實時興趣點到內容推薦策略中，通過搜索拓展用戶對搜索相關領域和興趣的認知邊界；三是，通用資訊和興趣的滿足，在個性化的基礎上，會增加平臺老年人通用的重大新聞事件和垂直領域熱門內容的適度推薦；四是，專項策略和體驗評估，包括打散同類的、連出的或霸屏的內容，增加多樣性，強化興趣探索，一年多以來，持續進行實驗優化，降低繭房用戶占比，通過用戶調研階段性收集用戶對多樣性的體驗反饋。
繭房問題還有一層含義是“接受”，就是人們會抗拒接受新信息、甚至是新事實。特別是老年人有一些固有的觀念和習慣，很難改變。一是，進行科學辟謠，破除錯誤的意識，倡導健康的生活方式；
二是，鼓勵老年人多使用搜索，主動拓展認知邊界；三是，在用戶消費圖文和視頻時，系統會出相關詞，用戶一鍵搜索得到新知識。此外，今年還推出了“交朋友”模塊，通過互動課堂和社區討論，讓老年朋友更好地接受新信息。
《設計》：老年人使用智能設備進行網絡交易時的信息安全和交易安全如何保障？
火韋：老年人在使用智能設備，已經從簡單的瀏覽信息、開始更多地進行電子購物，涉及到相對復雜的網絡交易過程。
百度App大字版在早期版本就關注到了這個問題，從以下方面持續優化。
一是，我們會主動打壓低俗、低質的內容和商品，并給優質和權威的第三方打上官方標，引導老年人識別來源；
二是，我們也加入了百度保障，并且專門推出了老年人保障官網和專屬處理流程，對平臺發生的網絡交易進行提前保障；
三是，推出“暖陽熱線”400專線電話，隨時與老年用戶進行溝通。
《設計》：在適老設計中，AI技術有哪些獨特的功用？
雷哥：在適老化設計中應用AI技術，可以更好地解決老年人在生理和心理上面臨的現實問題，滿足老年人的信息獲取和情感陪伴訴求。例如，在信息獲取層面，通過語音識別和圖像識別技術，可以改變傳統的輸入文本的搜索方式，大幅降低老年人的搜索成本，使老年人僅通過說話或拍照的輸入方式即可更方便地答疑解惑，獲取新知。AI技術在視頻場景也可以發揮作用，通過智能放大字幕和智能添加字幕，可以幫助老年人更好地獲取視頻信息。通過聲紋識別和聲音合成技術，我們也可以幫助老年人錄制合成親友聲音，用于全局內容朗讀，讓與親友分隔兩地的空巢老人體驗如同親友在耳畔般的朗讀，獲取跨越時空的情感陪伴；同時，語音朗讀能夠解決長時間閱讀帶來的視覺疲勞問題。這些都得益于百度在人工智能領域的技術積累，所以，AI技術不僅可以在無人駕駛等前沿領域發揮作用，也可以通過產品化解決老年人面臨的實際問題。
《設計》：適老化設計的研究和開發在MEUX部門處于什么位置？
雷哥：MEUX團隊一直很重視適老化設計的研究，很早就啟動了相關的專項課題并持續投入。在工信部下發互聯網應用適老化及無障礙改造專項相關指示文件之前，我們就已經在進行適老化設計的相關研究和探索，并且研發了公司內的首個適老化產品——百度App大字版，因此我們對國家互聯網應用適老化改造的響應是非常積極和及時的。我們的適老化設計研究及產品研發的成功經驗，也推廣到了公司內部各個產品團隊，為公司內移動應用的適老化設計提供了參照標準。在公司外部，我們也與老齡委合作制定了國內首個移動互聯網應用適老化設計要求的團體標準，將我們的經驗推廣到整個行業，形成更加廣泛的影響。
小軍：百度MEUX部門配備用戶研究、視覺、交互、運營完備的各職能深度參與并持續研究適老化設計，支撐產品建設和持續升級，同時，在學術論文發表、行業團體標準建立、國際獎項申請上均有顯著的成果產出。
《設計》：融入老年人服務生態，百度與哪些行業展開了怎樣的合作形式？
火韋：百度App大字版的目標是：成為中老年生活的必備App，服務于生活的方方面面。為了實現這個目標，與公司內部相關部門、政府部門、行業伙伴進行了廣泛合作。
一是，到今天，百度App大字版已經是擁有搜索、AI能力、圖文、視頻、直播、電臺、小說閱讀的綜合內容消費平臺。在公司內部，多達10多個部門的200多位同事參與了百度App大字版的開發和運營，其中包括搜索、語音搜索和語音智能處理、百家號內容平臺、信息流策略、小程序和小說等兄弟業務。
二是，我們積極響應政府相關部門的倡議，全面進行適老化改造，并與百度關懷版一起申請并通過了《移動互聯網應用適老化設計要求》團隊標準。同時與中國老齡協會一起推出了《老年智能科技大賽》。
三是，在服務生態上，與養老行業機構和企業進行深入合作，包括與紅松學堂、人人講合作推出“交朋友”社區，引入百度健康、薄荷營養提供健康功能，引入喜馬拉雅和懶人暢聽的小說、相聲、評書等娛樂內容。
同時，我們也與這些伙伴一起培育養老市場，讓更多的人關心老年群體在智能時代的難處。比如我們在父親節那天全網推出“你先忙，爸沒啥事”活動，用八張大圖，說出了父親和孩子打電話時想說但沒有說的話。
《設計》：針對老齡化群體，百度在軟硬件開發方面還有哪些具體的長短期規劃？
火韋：從2021年1月推出以來，百度App大字版一直專注于為老年手機用戶提供友好的內容和服務。這是一個復雜的持久過程，還在苦練內功，與用戶溝通、了解他們的需求、喜好和習慣，不斷推出新的App功能（電臺、視頻內容、搜索、AI能力、課程等）。這些業務都有向智能硬件、線下業務延伸的可能性。
《設計》：在做適老化設計的過程中，作為設計師、工程師，你們收獲了怎樣的體驗？
LU：懷著同理心和使命感來設計產品。中老年人是我們的長輩，他們年輕時為社會、為國家貢獻了很多。當他們年邁，因為身體老化在融入信息社會面臨困難時，我們有責任、有義務去幫助他們，讓他們能夠輕松、愉快、便利地享受信息生活。在此，我們也呼吁更多的移動互聯網App、設計師和產品經理參與進來，推進移動互聯網產品的適老化升級，幫助中老年人享受信息社會，為中國的信息無障礙建設貢獻自己的一份力量。
小軍：作為設計師，參與多輪的用戶訪談，掃公園接觸真實用戶收集使用反饋意見。收集政府、競對、研究機構的情況。這讓我們對老年用戶有了更深入的認知。產品設計中相比功能上的優化，情感上的關懷也是內在需求。我們的著眼點從無障礙設計，深入到情感化設計中。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
沉浸式體驗是讓人專注在當前的目標，全身心投入并感到愉悅和滿足，從而忽略時間的流逝。應用到界面上則是更強調聚焦內容，減少不必要的打擾。本次研究與實踐針對視頻場景中視頻所呈現的畫面，通過精細化的設計，在多樣化的手機屏幕中呈現時，能夠帶給用戶更為沉浸的視頻觀看體驗。
視頻播放器中視頻畫面當然是最主要的內容，以此作為突破點進行思考：
· 最大化畫面視野：通過改變視頻畫面本身的大小，減少頁面“留白”，讓用戶更聚焦視頻畫面，觀看視頻時更專注。
· 最佳視線觀看位置：將不同高度的視頻按照頁面結構去布局視頻畫面，通過畫面避讓狀態欄、頂底bar結構的方式，使畫面更加整潔，減少
元素混亂帶來的干擾，同時整體位置偏上展示，視線落點更加舒適。
· 觀看體驗連續性：視頻瀏覽過程中，非必要不打斷視頻瀏覽，在進行如查看評論、臨時退出播放器等行為時，保證視頻播放的連貫性，方
便用戶多操作。
01.視頻畫面裁剪
隨著時代的發展，為提升消費者對手機的操作體驗，智能手機逐漸多元化，手機屏幕尺寸迭代更快、更加豐富多樣。手機作為視頻很重要的生產端，手機屏幕尺寸的多樣化影響到產出視頻尺寸的多樣化，同時用戶可通過視頻編輯工具任意編輯視頻尺寸，最終生產的視頻尺寸比例自由度非常高。據不完全統計視頻平臺中視頻尺寸達22萬多種，用戶使用機型近300種，在視頻尺寸多樣性及視頻展現媒介多樣性的現狀下需要兼容性更強的裁剪及展現規則才能帶給用戶更好的觀看體驗。
我們要做的就是將不可控的視頻資源和不可控的瀏覽視頻設備設計為可控的視覺展示效果，并最大化視頻畫面。減少環境干擾，給用戶帶來沉浸式感官體驗。
視頻寬撐滿手機屏寬后，將視頻尺寸分為四類：
1) 視頻高度>手機屏高
視頻畫面寬度撐滿屏幕后，視頻整體居中于屏幕，居中裁剪視頻多余畫面。
注：不允許畫面高度撐滿屏幕，寬度自適應導致畫面左右留黑效果。
2) 視頻高度=手機屏高
視頻居中于屏幕，剛好填滿屏幕，不需要裁剪處理。
3) 1:1<視頻高度<手機屏高
此類尺寸較復雜、難處理，于是將限制裁剪面積和展示位置相結合，保證裁剪面積和位置可控。結合視頻平臺資源尺寸和業務目標來確認理想展示效果，反推定義最大裁剪面積，根據顯示位置多次判斷視頻放大后是否符合既定裁剪面積，最終確定當前視頻的顯示方式。同時支持根據不同視頻業務進行個性化定制，并且將裁剪面積云控處理，根據業務內不同時期的訴求限制比例來靈活調整展示效果，雙端也可分端定義數值；橫向協同及迭代成本極低，便于快速上線驗證效果。
4) 橫版視頻（高寬比≤1:1）
橫版視頻在手機屏幕中面積占比較小，畫面可識別度和飽滿度稍有欠缺，輕微擴大畫面視野，畫面瀏覽更加清晰有沖擊力。以不影響內容理解為前提，根據自身平臺視頻尺寸占比及視頻內容特點規定固定比例或比例范圍適度放大。
錦上添花，引入文字內容識別
為避免因裁剪規則而裁剪到視頻關鍵文字對視頻內容獲取有障礙的問題，發揮百度強大的AI技術優勢，引入文字識別技術及視覺展現規則，進一步提升視頻展現樣式的可控性，同時能夠通過盡量少損失畫面達到畫面放大的效果，平衡畫面沉浸感和完整性的關系。
左右文字被裁剪情況：文字左右設置安全距離，保證安全距離在屏幕內。如果安全區超出屏幕，則按照上方描述的裁剪規則進行退檔顯示（滿屏至不裁剪之間的檔位），直至文字不被裁剪。極端情況退檔至最后一檔，視頻畫面不裁剪。
橫版資源文字左右被裁剪情況：按照固定尺寸退檔
上下文字被裁剪情況：文字上下設置安全距離，保證安全距離在屏幕內。如果安全區超出屏幕，則按照上方裁剪規則進行滿屏至不裁剪之間的檔位進行退檔顯示，此情況只會從全屏一檔顯示退至二檔顯示。
裁剪面積、展示比例、文字安全距離等數據都通過云控的方式下發，靈活配置到不同業務中，保證裁剪規則一致的同時又能針對不同業務進行定制展現，也可快速調整并支持上線實驗，來驗證適合自己產品的展示效果。
02.智能滿屏
通過裁剪方式放大畫面視野之外，還通過讓用戶自主交互操作再次放大畫面視野，調整到自己喜歡的觀看視頻的方式。相較于上方默認裁剪放大，滿屏方式更加激進極致，畫面放大更多。開啟方式通過面板功能按鈕開啟智能滿屏外，增加便捷交互開啟手勢，用戶可雙指放大快速開啟。
由于滿屏是用戶主動操作放大行為，可以接受文字內容被裁剪，但也需要有節制的放大，避免帶來畫面裁剪過多視覺體驗不佳的問題。為了保證95%以上資源撐滿全屏，達到放大畫面視野極致體驗。同時最大畫面裁剪面積不超過一定比例（根據自身業務視頻資源判斷），將視頻資源細分為3類進行不同效果處理：
1.可繼續放大至滿屏的視頻，則進行滿屏展現。
2.不可繼續放大的視頻，如果繼續放大會導致裁剪畫面過多影響觀看完整度與觀看體驗，則保持上方提到的裁剪規則，不做另外處理。
3.橫版視頻統一放大至固定尺寸，可根據自身業務資源進行放大尺寸的定義。
通過布局合理、舒適的畫面位置，也能提升瀏覽過程中用戶體驗的沉浸感。人的視覺中心一般會在物理中心的偏上方，于是在設計中我們將視頻畫面放在屏幕偏上的位置，用戶視線落點更加舒適，一般是用戶在瀏覽頁面時最先注意到的地方。同時視頻在頁面偏上的位置，能減少下方標題等信息過多對視頻畫面的遮擋。
為了精細化處理不同比例的視頻資源，豎版視頻和橫版視頻根據頁面效果分別定義了最佳觀看展示位置。
豎版視頻：高于1:1的視頻，按照頁面結構布局視頻畫面，避讓狀態欄、頂底bar操作，避免與頁面結構沖突帶來畫面凌亂不美觀的問題，同時能減少畫面參差帶來的干擾，增加沉浸瀏覽感受。
橫版視頻：等于矮于1:1的視頻，畫面按照屏幕高度比例展示在偏上的區域，高度比例可云控便于靈活調整。
01.視窗擠壓
為了滿足用戶在視頻場景多角度信息獲取，在不打斷用戶視頻瀏覽的基礎上建設視窗擠壓交互體驗，提升觀看視頻的相對沉浸感。在視頻場景觀看評論時會彈起半屏面板，遮擋住視頻內容，導致用戶無法在瀏覽評論的同時觀看視頻內容。對短視頻重度用戶來說，對同時看評論和看視頻習慣的用戶有挑戰。通過視窗上移動擠壓功能，在瀏覽面板內容時不對視頻內容打斷，弱化面板內容給用戶帶來的影響。
視窗高度固定，畫面寬高比越小畫面內容越小，觀看體驗不友好，所以豎版視頻對壓縮后的顯示尺寸進行干預，定義最小視頻畫面展示比例，盡量擴大畫面視野，保證觀看視頻的舒適度。
02.懸浮小窗
在不打斷用戶視頻瀏覽的基礎上還建設了懸浮小窗交互體驗，旨在為用戶提供完善優質的視頻消費體驗。用戶進行其它操作時仍保留視頻后臺播放，同時也能在屏幕角落觀看到縮略圖大小的視頻播放窗口，可以從任何頁面中觀看視頻，我們同時也保留了部分視頻基礎操作。觀看體驗連續性讓用戶對視頻有絕對的主控感，提升用戶使用體驗的滿意度。
沉浸式體驗設計是幫助用戶減少畫面干擾，讓用戶專注于當前的視頻瀏覽，忽略時間的流逝進入心流狀態。我們通過放大畫面視野，增強畫面沖擊力的方式減少干擾，并解決在視頻畫面尺寸、手機屏幕分辨率極多的復雜情況下，保證畫面效果的穩定和可控，并且不會受阻于未來手機機型的擴充發展，普適性極強。同時通過視窗擠壓、懸浮小窗的交互體驗專注于當前的視頻瀏覽不被打斷，進一步提升視頻看播沉浸式體驗。后續我們將不斷探索視頻場景沉浸度提升方式，為用戶帶來更加舒適的觀看使用體驗。
作者：百度MEUX
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
● 京東金融 App 首頁三大改版
3.x 版本到馬上上線的 4.x 版本，公司的戰略方向以及產品運營方向都在不斷的變化（有接觸過京東金融 App 的人都知道視覺變化很大）。作為公司的移動端產品，既要滿足用戶體驗和需求，又要滿足內部業務的擴展。所以我們要不斷優化各種布局和細節，把用戶體驗和內部需求做到最好。
3.X 版本是我接首頁優化的第一個版本。改版期間我們經歷了很多，除了本身業務以外，更重要的是我們發現之前首頁有很多問題。其實優化產品最基本的方法就是發現了一些問題，然后去解決這些問題。問題可能是產品問題、業務需求擴展、運營需求滿足，最后才是體驗和視覺。這些問題能得到解決產品就能得到優化。
以賬戶為中心是當時產品的主要方向，整體都在強調財富管理。所以之前的界面在賬戶為主和業務擴展上都存在很大問題，一是業務拓展存在局限性，二是賬戶感不強。
經過一大堆方案和設計圖的轟炸，最終確定了大的方向，突出理財金額和業務和信貸業務。把一些數字突出放大，讓用戶打開產品既能看到自己想看到的東西。賬戶感的體現我們把數字和一些文字說明當成首屏最主要的東西，少一些運營，少一些 banner 。就像是在銀行打出的紙質賬戶信息，上面很少會出現廣告。
▲ 還是之前的方法，經過上線一段的時間去發現問題。隨著業務和功能的增多，原來的布局已支撐不了公司方向的支持這是之一。之前的視覺也有一些缺陷，進入 App 整體看上去沒有重點的，純白色很干凈但是也沒有能跳出來吸引眼球的東西，也不能把重要業務區別與其他業務。
這次增加了一些產品本身頻次的功能，如掃一掃、簽到、每天領券等。還有怎么樣能突出重點業務的展示，讓用戶在視覺局部上有所重點。業務的擴展性通過左右橫滑來實現。
▲ 怎么樣能把多量的業務，重新布局到有限的界面里，而且不能降低用戶的使用體驗，是我們這一版要解決的問題。就是化繁為簡。
這次我們把業務場景劃分成「賺錢」「花錢」「借錢」，相對應是「理財」「白條購物」「現金借貸」。使用三個Tab 簽和最簡單的布局方式來排版。用戶理解相對也會變的容易，界面整體看起來也簡單明了。
首頁的改版看似簡單，其實背后有很多的付出。不斷的優化討論、不斷的視覺方案，我們不斷在尋找新的突破，希望能讓各個方面都達到最大效能。
● 理財日歷
「理財日歷」是整合用戶關于所有金融業務的，按照時間線索智能提醒和自動完成的一款產品。
· 產品目標：幫助用戶記錄金融事件和跟錢相關的事件，例如理財到期、白條還款事件、生活繳費事件等等。一條 時間線可以把用戶所有的事件聯系起來的。讓用戶把時間用在更重要的事情上。
· 產品關鍵性詞語：時間、自動記錄、提醒、設置自動完成
當我們進入 App 時，需要進行很多不同的操作，進入到不同的業務線頁面才能完成我想要做的事情。這時整合業務聚合內容就變的很重要。需要有一個平臺把跟用戶強相關的金融事項和其他事項整合，這樣就不用花費很多時間來處理各種事件。
日歷是一個強時間線的用戶固有思想形態，我們需要把除了基礎的時間、記錄事件和日常提醒功能做好外，還要讓用戶習慣這里面有跟我理財相關的事項。針對使用產品用戶的特征，在視覺布局上不能難以接受，日歷主要的時間、每天事項、后續事項查詢和增加事項都要合理排布。
為了增加日歷的整體氛圍，除了時間的排布，我們為每一個月和每一個節氣增加了插畫。每一條信息的分類都用 icon 表示，突出強弱，增加氛圍。
日歷添加事項和設置頁面，以進度的感覺讓用戶去更好的完成事項的設置。推薦事項也是用戶最常用的、最容易跟時間所對應的事項。
日歷的分享模塊是很重要的一個細節，我們希望它能更好的去傳達這是一款有溫度的產品。它也是對外發聲的一個利器。
怎么樣才能激發用戶分享的欲望呢，用戶打開界面的分享動機是什么？我們知道用戶分享有幾點：有用的、有趣的、相互比較、用戶認同等等。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：程大專 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn