移動應(yīng)用中圖文列表隨處可見,看似平淡無奇,背后也有許多可挖掘的細節(jié)和原理。這篇文章希望能幫助大家在工作中運用合適的方式呈現(xiàn)列表內(nèi)容。
藍藍設(shè)計(www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。
關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司
銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
關(guān)于對話框(Dialog)的定義、觸發(fā)場景、注意事項和案例示意。如果大家喜歡想看其他組件用法,甚至是整個系列的設(shè)計規(guī)范,可以在評論區(qū)留言。
我們都知道做網(wǎng)頁相關(guān)的項目,不管是 C 端的還是 B 端的,往往都會應(yīng)用響應(yīng)式布局,用了響應(yīng)式布局,就肯定要做柵格系統(tǒng),才能確保響應(yīng)式的正常執(zhí)行。但是,移動端要不要用柵格,怎么用,就成為很多人困擾的問題,我們就用今天這篇分享來解釋。
David是一個來自美國的華僑,哥大畢業(yè)后就來到了亞洲,現(xiàn)在定居北京!David是一個爸爸,也是一個創(chuàng)業(yè)者,在過去7年里都在科技教育領(lǐng)域創(chuàng)業(yè)。David相信,英語啟蒙能在家就能做好,于是推出線上英語啟蒙的小程序。
10個音樂產(chǎn)品細節(jié)剖析,看看高手是如何做設(shè)計的?。黆I設(shè)計公司
當(dāng)剖析音樂產(chǎn)品的細節(jié)時,以下是10個常見的音樂產(chǎn)品細節(jié),它們展示了高手在設(shè)計中的巧妙之處:
大家好,藍藍設(shè)計今天和大家分享20款優(yōu)秀的手機界面設(shè)計欣賞,共同學(xué)習(xí)成長!
我們有許多界面設(shè)計的案例,因為有保密協(xié)議不方便發(fā)出來。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
從產(chǎn)品經(jīng)理處獲取項目原型圖,當(dāng)獲取到原型圖后不要盲目的去進行設(shè)計,要先分析了解整個項目的功能、特性、用戶群體、項目的定位等等,特別是對功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通,只有做到對項目了熟于胸才能做出優(yōu)秀的設(shè)計。
當(dāng)我們對項目的功能、特性、用戶群體、項目的定位都有所了解后,還是不能馬上進入設(shè)計環(huán)節(jié)。我們需要先對市面上同類型的產(chǎn)品進行分析和對比,包括設(shè)計風(fēng)格、配色、排版、功能樣式等等,了解其優(yōu)劣勢,做到取長補短,思考如何讓我們的產(chǎn)品更加的完善,這時候我們的腦海里面基本上對自己要設(shè)計的東西已經(jīng)有了一個大概的雛形。
這篇文章內(nèi)所有的數(shù)值均以2倍圖為例,使用1倍圖的同學(xué)請自行除以2。
現(xiàn)在UI設(shè)計通常使用的是全面屏的設(shè)計規(guī)范,全面屏的設(shè)計稿更加美觀,且做作品集的時候搭配全面屏樣機視覺效果也更加突出。通常只設(shè)計一套蘋果全面屏的設(shè)計稿,不需要另外設(shè)計安卓端設(shè)計稿,安卓端由安卓工程師自行適配。
界面:750px1624px
狀態(tài)欄:750x88px
導(dǎo)航欄:750x88px
菜單欄:750x98px
指示器:750x68px
左右邊距:32px或24px
*其中狀態(tài)欄和指示器不需要進行額外的設(shè)計,是系統(tǒng)默認控件,除顏色外不可改變。
頂部功能:48x48px
底部菜單欄(有文字):48x48px
底部菜單欄(無文字):64x64px
尺寸:36px、32px、28px、24px
顏色:正常(#333333)、輔助(#999999)、未輸入提示(#CCCCCC)
*利用文字尺寸對比和顏色對比可以得到不錯的效果。也可以給文字顏色添加少量的藍色,讓顏色不那么呆板。
組建控件系統(tǒng)可以讓我們的設(shè)計稿更加的規(guī)范,也便于修改,可以極大的提高我們的工作效率。
所有的圖標都需要做成控件,方便我們切圖。然后就是會重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。
除了我們常用的控件以外,顏色、投影等特殊效果、文字大小都可以保存樣式,把項目的配色、特殊效果、文字尺寸都保存下來,不同的設(shè)計工具有不同的保存方式,大家可以根據(jù)自己使用的設(shè)計工具進行設(shè)置。
我們需要讓項目保持一個統(tǒng)一的設(shè)計風(fēng)格,讓項目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢,選對與項目屬性相符的設(shè)計風(fēng)格可以讓項目更加的出彩。
這種風(fēng)格沒找到合適的名稱,我個人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計風(fēng)格使用分割線分割小的模塊,用背景色塊分割大的模塊,特別適合列表信息。雖然給人感覺沒有特別強烈的設(shè)計感,但簡單實用、樸實無華,層級劃分清晰明了。
卡片式風(fēng)格是借用現(xiàn)實世界中卡片的特征和概念,將一個模塊或同類型元素放到一個卡片容器類,可以增加內(nèi)容的獨立性,讓模塊劃分關(guān)系變得非常的清晰,是現(xiàn)在非常常用的一種設(shè)計方式。
常用做法是采用淺灰的背景+白色卡片的方式,卡片都帶有一定的圓角,類似于將撲克牌一張張的放在桌子上,桌面是灰色背景,每一張撲克牌就是一個卡片。也不排除暗夜模式的卡片式設(shè)計,背景會更暗一些,卡片略亮。
在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線,單以間距來區(qū)分模塊和元素,對親密性的應(yīng)用有較高的要求。有時候單以間距來區(qū)分模塊和元素時,可能會導(dǎo)致模塊層級不分明,所以會使用將標題加大的形式,讓模塊與模塊之間的區(qū)分更加明顯。因為去除了分割線,留白就更多,會顯得界面更加的干凈、清爽。
新擬態(tài)是19年底在追波開始出現(xiàn)的一種設(shè)計風(fēng)格,特點是使用統(tǒng)一的光源做出立體的浮雕效果,元素有厚度但沒有紋理和材質(zhì)的輕擬物風(fēng)。
常規(guī)做法是假設(shè)一個統(tǒng)一的左上方光源,給元素分別添加一個左上角和右下角的投影,左上角(被光源照射的一側(cè))投影使用亮色,右下角投影使用暗色,讓元素可以浮起來。而在按下或選中狀態(tài)時則使用兩個內(nèi)陰影,左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個顏色,所以顏色不能使用純白或純黑,否則有一側(cè)的投影就會看不見,通常是使用藍灰色或深灰色背景。
新擬態(tài)風(fēng)格視覺效果新穎、柔和,對比度低,看得久了會產(chǎn)生一定的視覺疲勞,研發(fā)成本也較高,所以現(xiàn)在更多的還是處于概念稿,實際項目中應(yīng)用較少??梢宰鳛橐环N練習(xí)或部分功能的使用。
設(shè)計稿完成之后我們需要將圖標等元素切圖導(dǎo)出交付給開發(fā),IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。
IOS:現(xiàn)在通常是輸出2套,以@2x、@3X為后綴,也就是2倍圖、3倍圖;
Android:現(xiàn)在通常是輸出3套,xhdpi(超清,對應(yīng)IOS的2倍圖)、xxhdpi(超超清,對應(yīng)IOS的3倍圖)、xxxhdpi(超超超清),安卓切圖不需要將倍數(shù)加到切圖命名內(nèi),而是每種尺寸單獨建立一個文件夾。
png:最常用的切圖文件格式,背景無底透明,所以在導(dǎo)出切圖文件時需要先去掉背景色(figma將畫板填充色隱藏,sketch畫板不要勾選“包含于導(dǎo)出項”);
svg:矢量切圖,需要背景無底透明,部分網(wǎng)頁端項目可能需要svg格式的切圖文件;
bmp:部分硬件機器的項目需要使用的圖片格式,需要注意的是bmp無法實現(xiàn)背景透明,如果背景是透明的會自動帶上白色,需要切圖文件把背景帶上一起切,而且figma和sketch等UI設(shè)計軟件無法直接導(dǎo)出bmp格式,需要先導(dǎo)出為png或jpg格式,再使用ps或其他工具轉(zhuǎn)換一次。
只能使用英文、下滑線、數(shù)字進行命名,不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態(tài)(有些切圖沒有多種狀態(tài)則不需要添加狀態(tài)命名)。
以蘋果端舉例:如底部菜單欄的首頁圖標命名則是ico_bottom_home_nor@2x(圖標_底部_首頁_未選中狀態(tài))和ico_bottom_home_sel@2x(圖標_底部_首頁_選中狀態(tài))。
頂部的搜索圖標沒有多個狀態(tài),命名是ico_nav_search@2x(圖標_頂部_搜索)。
類別一般只有3種:圖標(icon)、圖片(image)、按鈕(button),我們通常會簡寫為ico、img、btn。
狀態(tài)一般只有4種:正常(normal)、按下(press)選中(selected)、禁用(disabled),我們通常會簡寫為nor、pre、sel、dis。pc端會多一種狀態(tài):懸停(hover)。
sketch和figma等UI設(shè)計軟件可以同時導(dǎo)出多個尺寸的切圖文件和前綴/后綴,所以我們只需要設(shè)置圖標本身的命名如ico_bottom_home_sel,而不需要每個切圖都去手動的添加IOS后綴的@2x和@3X,以及安卓的前綴xhdpi等,在導(dǎo)出設(shè)置中設(shè)置好每個尺寸的文件夾名稱和后綴,再統(tǒng)一導(dǎo)出即可。
軟件內(nèi)部導(dǎo)出:現(xiàn)在的UI設(shè)計軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件,只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴,就可以快速的導(dǎo)出切圖文件;
上傳第三方:最常用的就是將設(shè)計文件上傳至藍湖,研發(fā)人員可以在藍湖上下載自己需要的切圖文件,但在上傳藍湖之前需要把設(shè)計稿中需要切圖的元素設(shè)置為切片。
和切圖文件一起交付給開發(fā)的還有設(shè)計稿的標注文件,讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對齊方式、距離、透明度,文字的字體、字號、行高等。
很多設(shè)計文件都可以安裝藍湖插件,再通過插件將設(shè)計稿導(dǎo)出到藍湖,研發(fā)人員就可以便捷的查看界面的標注。
Figma、Mastergo等在線設(shè)計軟件都可以切換為開發(fā)者模式,只需要將研發(fā)人員邀請到自己的設(shè)計文件所在團隊內(nèi),研發(fā)人就可以查看到界面的標注;
有部分公司有一定的保密措施,會禁止設(shè)計師使用第三方平臺或是聯(lián)網(wǎng)操作,這種情況設(shè)計也無法使用Figma、Mastergo等在線設(shè)計軟件,只能使用Sketch等客戶端,輸出標注就需要使用相應(yīng)的插件,Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標注文件。
在項目上線的階段UI設(shè)計需要輔助研發(fā)提供上線應(yīng)用商店需要的項目預(yù)覽圖、啟動LOGO,也需要設(shè)計補充出APP的啟動頁、閃屏頁等。
上線應(yīng)用商店需要的預(yù)覽圖,通常是使用項目中比較有特色的幾個UI界面加以設(shè)計。
上線應(yīng)用商店必須提供的LOGO,手機中啟動APP的入口,但不同的應(yīng)用商店有不同的尺寸,華為、蘋果、小米、三星、應(yīng)用寶等所需要的啟動LOGO都有所不同,所以輸出多個尺寸。以蘋果App Store為例,需要以下尺寸:
啟動頁和引導(dǎo)頁一般是和UI界面一起設(shè)計,不過需要項目上線后才會有其價值,所以可以先設(shè)計完項目的界面,在研發(fā)開發(fā)的過程中再去設(shè)計啟動頁和引導(dǎo)頁,只要在項目上線前提供給研發(fā)就可以。
當(dāng)一個項目上線后,只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個項目上線后都會收集用戶反饋,根據(jù)用戶反饋的信息優(yōu)化功能和界面設(shè)計,通過持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來越好,這個過程中也需要我們UI設(shè)計不斷的去進行調(diào)整和優(yōu)化。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
度咔是百度短視頻生態(tài)首款面向泛知識創(chuàng)作者的視頻剪輯工具,致力于降低泛知識類作者的創(chuàng)作門檻,助力生產(chǎn)優(yōu)質(zhì)的作品。
隨著產(chǎn)品的功能迭代,體驗的逐步更新,產(chǎn)品依勢也需要打造更好的運營氛圍和品牌印象來建立用戶口碑、提升轉(zhuǎn)化。對此,設(shè)計側(cè)針對度咔產(chǎn)品進行了全面的思考和分析,通過重新定義度咔運營視覺語言,明確產(chǎn)品調(diào)性,幫助用戶更新品牌認知。
一、品牌框架搭建
產(chǎn)品的運營視覺不只是單純的畫面展示,其背后都有更加明確的設(shè)計理念和手段,但運營視覺語言并不是千篇一律的,首先需要明確自身定位,突出產(chǎn)品獨特性。
設(shè)計初期,我們針對同類型產(chǎn)品與用戶類型進行了大量分析,在用戶人群劃分上度咔更具有針對性,目標用戶是口播自媒體、知識類創(chuàng)作者。但不像專業(yè)剪輯軟件門檻那么高,度咔更多的是通過特色產(chǎn)品功能幫助作者去降低剪輯門檻,業(yè)務(wù)主要通過征稿和教程的運營活動來提升用戶認知,帶動日活。
由此,我們梳理出度咔的品牌框架圖。以度咔「專為口播自媒體打造的剪輯工具」產(chǎn)品定位作為切入點,依據(jù)其自身定位和度咔區(qū)別于同類產(chǎn)品的特色功能,我們提煉出“便捷”、“智能”、“專業(yè)”產(chǎn)品核心關(guān)鍵詞。
二、定義度咔運營視覺語言
在前期創(chuàng)意階段,我們通過大量的競品調(diào)研、創(chuàng)意發(fā)散、概念嫁接等創(chuàng)意手段,找到時下大字為主導(dǎo)的版式創(chuàng)意。簡潔明確的版式結(jié)構(gòu),適當(dāng)?shù)漠嬅媪舭祝垢髟卦诎婷嬷行纬删哂袟l理清晰、富有節(jié)奏的視覺關(guān)系。這種邏輯方式,為運營視覺的高效、科學(xué)、嚴謹性提供了極大的便捷,同時也對應(yīng)了度咔便捷、智能、專業(yè)的品牌感知。
對品牌定位、業(yè)務(wù)訴求、產(chǎn)品功能進行整合后,我們搭建以構(gòu)成、配色、元素為主的視覺語言框架。
與時下大字為主導(dǎo)的版式創(chuàng)意相結(jié)合,建立以大字排版,強構(gòu)成感為主的視覺語言基調(diào)。通過大量的風(fēng)格測試不斷完善視覺基調(diào)并投入到項目中,同時規(guī)范運營功能排版,搭建元素庫,通過設(shè)計手法,達到專業(yè)與簡潔的平衡,統(tǒng)一的視覺基調(diào)和品牌色強化用戶對品牌認知。
1、重塑視覺基調(diào):
1)統(tǒng)一風(fēng)格
度咔以往的運營視覺趨于參差,導(dǎo)致整體視覺有較為強烈的割裂感,煥新后的視覺變得更加直率簡約,以簡潔的視覺風(fēng)格保證內(nèi)容傳遞的高效性。拋棄了諸多裝飾元素,取而代之的是硬網(wǎng)格,保持視覺整體和諧統(tǒng)一感,同時也傳遞出度咔便捷、智能、專業(yè)的產(chǎn)品調(diào)性。
我們對運營頁面進行了布局重構(gòu),采用白色底的背景突出文字信息,使得內(nèi)容信息傳達更加明確,突出核心內(nèi)容。在各類場景中,我們通過品牌色彩、圖形、符號的滲透,強化度咔品牌印記。
2)主題延展
根據(jù)業(yè)務(wù)訴求,保持主題性征稿活動的特色——在強化功能點的運營活動中采用3D元素和彌散漸變背景,如夏日主題將度咔符號與泳圈做3D創(chuàng)意結(jié)合,增添活動氛圍感。
2、品牌色煥新:
1)建立度咔品牌色應(yīng)用規(guī)范。增強品牌識別性和記憶點。
首先搜集符合產(chǎn)品調(diào)性的顏色情緒版,選取整體偏明亮,識別度高的新品牌藍色。對比原來偏紫的品牌藍,現(xiàn)在升級后的藍色更顯專業(yè)智能,且更具有電子意味。
在一個科學(xué)有效的色彩系統(tǒng)里,往往包含至少兩種色彩:主色+輔助色,兩者互相搭配組合成產(chǎn)品體系的整體色彩感受,減少用戶在產(chǎn)品體驗中對反復(fù)出現(xiàn)的主色的視覺疲勞。
我們將藍色賦予了統(tǒng)一的品牌認知感受,并且將藍色加入到橙色里,生成了度咔特有的藍橙色系。橙色在度咔的色彩系統(tǒng)中起著至關(guān)重要的作用,為產(chǎn)品帶來積極,活力的感受,同時深黑和灰色創(chuàng)造結(jié)構(gòu)、表達邊界、建立信息層次。
以基礎(chǔ)征稿活動為主的頁面使用度咔標準藍;在需要強主題和活動氛圍的頁面加入輕量的彌散漸變色彩。
3、提升效率:
1)元素庫搭建
建立度咔元素庫,規(guī)范化運營活動主視覺圖形原創(chuàng)性和創(chuàng)意性,沉淀設(shè)計資產(chǎn)。
由于后期運營活動多處用到3D元素,對3D的質(zhì)感進行了規(guī)范統(tǒng)一。輕量化的3D風(fēng)格更加注重極簡主義理性美學(xué)。
考慮到運營頁面的通用性,避免3D材質(zhì)的喧賓奪主,材質(zhì)風(fēng)格以簡單通用為主,顏色以品牌色為基礎(chǔ),采用光感通透的玻璃材質(zhì),加入環(huán)境光感。明朗,透傳度咔的品牌氣質(zhì)。
四、總結(jié)
本次通過度咔運營視覺語言的搭建,無論從產(chǎn)品本身還是設(shè)計側(cè),在數(shù)據(jù)和效率上都有明顯的提升。而設(shè)計作為和用戶最近的一方,在平衡各方訴求后呈現(xiàn)給用戶一個全新專業(yè)感十足的產(chǎn)品,進一步向用戶傳達品牌感知,助力創(chuàng)作者發(fā)現(xiàn)更多美好。
感謝閱讀,以上內(nèi)容均由百度MEUX團隊原創(chuàng)設(shè)計,以及百度MEUX版權(quán)所有,轉(zhuǎn)載請注明出處,違者必究,謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX,視覺/交互/運營設(shè)計師,可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如:站酷)
關(guān)于我們:
MEUX,百度移動生態(tài)用戶體驗設(shè)計中心,負責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡單極致」為設(shè)計理念,創(chuàng)造極致用戶體驗的同時賦能商業(yè),推動設(shè)計行業(yè)的價值和影響力,讓生活因設(shè)計而更美好。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
借此機會和大家交流一下項目背后的思考,共同進步!
我將從以下幾個方面進行講解:
01 對于理念的思考
02 關(guān)于風(fēng)格的思考
03 關(guān)于背景的思考
04 關(guān)于材質(zhì)的思考
對于本次設(shè)計,需求方是沒有給主題限制的,那作為設(shè)計師的我就從自身現(xiàn)階段的生活去發(fā)現(xiàn)主題、尋找靈感。 從深圳到成都創(chuàng)業(yè),將近一年的時間,我發(fā)現(xiàn)成都的天氣總是陰沉沉的:
充足的陽光變得非常稀缺,對于成都人來說,如果有陽光的時候,都會去外面坐坐,曬曬太陽! 這一年,“光”對我說是一種期盼的事物:
基于這個生活細節(jié),我就把主題定成了“追光空間”而我對于“追光空間”的理解就是:光感、純凈、靈動
后面的執(zhí)行也是基于這個理念進行思考創(chuàng)新的!
有了主題,就可以基于主題去思考設(shè)計風(fēng)格了。
其實主題圖標的設(shè)計其實已經(jīng)有很多年頭了,尤其是“app”這個概念流行開始,各大安卓手機品牌就有了自己的主題商店,用戶可以根據(jù)喜好下載自己喜歡的主題圖標。 我們在網(wǎng)上搜索主題圖標,可以看到很多作品,其中不乏有非常優(yōu)秀的主題作品,但是當(dāng)觀察的量到達一定程度后,會發(fā)現(xiàn)市面上的主題圖標風(fēng)格還是比較相似,大部分還都是屬于二維圖標(下圖源自網(wǎng)絡(luò)):
即使是一些質(zhì)感很強的圖標,很多也是鼠繪出來的,也不算是3D風(fēng)格(下圖源自7years):
包括我們?nèi)ツ杲o小米做的幾套主題,也都是偏2維風(fēng)格的
基于這樣的現(xiàn)象,我們是否可以嘗試將3d風(fēng)格與主題圖標進行融合呢?雖然不能說是第一個這么做的,但至少在市面上出現(xiàn)的這種結(jié)合還是相對較少,所以也可以算是一種小的創(chuàng)新。
在構(gòu)想風(fēng)格的時候,我的底層邏輯就是找到未被發(fā)現(xiàn)的切入點,如何理解呢?
如果是3d風(fēng)格與電商活動結(jié)合,已經(jīng)相對常見了(下圖源自網(wǎng)絡(luò)):
如果是3d風(fēng)格與游戲視覺結(jié)合,也經(jīng)常會看到(下圖源自網(wǎng)絡(luò)):
但是如果是3d風(fēng)格與主題圖標結(jié)合并且落地使用,那還是相對比較少的,這就是我在思考風(fēng)格時候的一點心得:
希望可以給同行們一點啟發(fā),拋磚引玉,希望市面上可以看到更多的3d風(fēng)格的主題圖標!
這次的主題和以往不一樣,我們每做一個圖標需要延展4個尺寸:
有一些寬的、有一些高的,如果我們只放一個圖標,那么會比較空曠,不夠飽滿,所以我們必須在背景上加一些圖案或者紋理,使整體更加飽滿精致。
背景紋理怎么做呢?我們希望它有細節(jié)但又不能過于搶眼,于是把目光鎖定在了基礎(chǔ)形狀上面,比如方形、圓形、三角形等等:
鎖定基礎(chǔ)形之后,就需要在基礎(chǔ)形之上融入更多的設(shè)計思考,比如風(fēng)格的結(jié)合,因為整體是3d風(fēng)格,所以背景也可以是3d化的基礎(chǔ)形白膜:
除此之外,我們需要將圖形進行構(gòu)成設(shè)計,以不同的節(jié)奏和位置使其產(chǎn)生不同的美感,把基礎(chǔ)美多維度的釋放出來,比如矩形的基礎(chǔ)元素進行構(gòu)成設(shè)計:
這樣,就可以做出不同的背景圖案,以此來解決需求目標。
設(shè)計師一定不要輕視基礎(chǔ),不管是技法層面還是審美層面,往往優(yōu)秀的設(shè)計都是無數(shù)個“基礎(chǔ)”堆出來的,先掌握基礎(chǔ),才能用“基礎(chǔ)”釋放更大的能量!
其實本次的材質(zhì),也不算難,沒有用到特殊材質(zhì),主要有兩個關(guān)鍵點可以分享交流!
關(guān)于燈光
燈光我們使用的是日光燈,從軟件操作層面沒有任何技術(shù)含量,但是對于基礎(chǔ)審美會有一定的門檻,尤其是對于明暗交界線、光影對比的理解!
燈光的不同位置和大小會導(dǎo)致光影質(zhì)感的不同:
燈光曝光:
質(zhì)感太平:
物體與背景區(qū)分度不夠:
同樣的物體,不同的燈光角度和大小就會有不同的質(zhì)量等級:
只有這種基礎(chǔ)審美達標后,我們才能繼續(xù)往后延伸。
關(guān)于材質(zhì)
對于材質(zhì),最初我們嘗試用最簡單的漫射材質(zhì),但是發(fā)現(xiàn)缺少光澤度和細節(jié),于是又嘗試在外部加一層玻璃材質(zhì),形成一圈透明質(zhì)感和細節(jié):
后面大部分的圖標都采用這種形式進行延展!
以上就是這次項目背后的一些思考
共勉!
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
三星上一版本界面標題選用細體字,頭部區(qū)域留白,卡片功能區(qū)域小,背景選用寫實簡約照片,體現(xiàn)文藝感。
圓形的場景卡片與矩形的設(shè)備卡片形成對比,場景卡片與文字上下排列,更加凸顯場景圖片,但文字存在多行、單行顯示,這種表現(xiàn)方式會顯得凌亂。
設(shè)備卡片從上到下依次為圖標、設(shè)備名、狀態(tài)。
新版本標題選用粗體字,標題區(qū)域更加緊湊,功能區(qū)域展示空間變大,背景使用抽線雙色漸變,更現(xiàn)代時尚。
功能卡片為統(tǒng)一圓角矩形,場景卡片圖文左右排布,底部白色卡片區(qū)域可以很好兼容多行、單行文字的情況。
設(shè)備卡片從上到下依次為圖標、房間名、設(shè)備名、狀態(tài)。
底部新增Tab區(qū)域,細分為收藏、設(shè)備、生活、自動化、菜單5個模塊。
風(fēng)格布局總結(jié):新版本屏幕利用率更高,粗體字和抽象背景使得內(nèi)容更凸顯,底部的Tab提供了更多模塊入口,功能分類更合理。
舊版本只有一個首頁,功能都在此被分發(fā),并且功能較為單一。
新版本增加收藏、設(shè)備、生活、自動、更多模塊,對用戶使用場景做了細分。
界面頂部的房屋設(shè)置、添加、編輯為全局設(shè)計,不過在每個模塊中添加的內(nèi)容不同。
收藏作為用戶每次進入App的第一屏,說明是用戶常用的重要功能,在收藏模塊中,可以添加的內(nèi)容最多,用戶在此頁面可以完成大多數(shù)常用操作。
設(shè)備模塊是全屋設(shè)備的合集,自動模塊是場景、自動化的合集。
生活模塊主要提供家庭安全監(jiān)控信息,還可接入其他服務(wù),例如:智能家電監(jiān)控、智能烹飪服務(wù)。
新版本設(shè)備卡片主要由設(shè)備圖標、房間名、設(shè)備名、狀態(tài)、控制區(qū)構(gòu)成;房間名域為預(yù)留區(qū),保證在不同頁面下的統(tǒng)一性。
設(shè)備在離線狀態(tài)下,右上角會顯示離線圖標,代替控制按鈕。
只有我們提前羅列出更多的頁面顯示情況,整合并預(yù)留可變區(qū)域,才能使頁面更統(tǒng)一。
收藏模塊分為3大區(qū)域,區(qū)域1為狀態(tài)通知區(qū);區(qū)域2為收藏的場景區(qū);區(qū)域3為收藏的服務(wù)或設(shè)備。這3個區(qū)域展示順序是固定的,可以選擇是否展示,無法改變展示順序。
因為每個區(qū)域的卡片尺寸是不一樣的,區(qū)域固定的好處是,可以保證顯示的統(tǒng)一性。否則大小卡片穿插顯示,還可能會空缺幾個,很影響美觀。并且操控邏輯也是固定的,用戶更容易理解。
點擊收藏模塊右上角添加,可批量選擇內(nèi)容快速添加收藏。
在非收藏頁,長按卡片,可單獨添加收藏內(nèi)容。
在設(shè)備、場景等新建或編輯界面,可以選擇添加至收藏的選項。省去了后續(xù)的單獨添加動作。
在收藏頁,長按卡片,可以進行單獨移除操作。
在收藏編輯頁面,可以批量快速移除移除。滿足了不同的用戶需求。
首次進入,展示的是某個房間內(nèi)的設(shè)備,通過左右滑動進行切換房間,三星可能想為用戶提供模糊操作來提升效率,在房間少的情況下,這種方式比較好。當(dāng)房間多了,用戶會滑動多次才能到目標房間;當(dāng)然三星給出了針對精確選擇的方式,點擊左上角的房間入口,可以選擇、編輯房間。
房間多的情況下這2種方式都不是很好的解決方案。
這里要注意的是,三星把“沒有房間”也放進房間列表,供用戶選擇?,F(xiàn)實中,有好多設(shè)備是不屬于任何房間或者用戶暫時不想放到某個房間,增加無房間選擇可以更靈活的滿足實際使用場景。
在房屋編輯頁面,可以添加房間,在這里三星已經(jīng)為用戶預(yù)設(shè)了很多房間類型選項,用戶只需要做選擇,很方便,即使沒有要的,還可以在列表底部選擇自定義。
在設(shè)備頁面,只能添加設(shè)備、燈光組、監(jiān)控組。
用戶可以通過關(guān)鍵詞搜索、掃碼、設(shè)備類型篩選、品牌篩選進行設(shè)備添加。
很全,幾乎涵蓋了所有的添加方式。
在添加頁面,第一步要先填寫組的名稱、選擇所在房間,第二步選擇要合并的燈,添加完成跳轉(zhuǎn)至設(shè)備組詳情,方便立即調(diào)控。
設(shè)備控制頁面采用了模塊化的設(shè)計方式,控制區(qū)域均為列表形式,不同的設(shè)備只需要替換圖標和文字及對應(yīng)的操控列表,降低新設(shè)備重新創(chuàng)作新界面的設(shè)計成本。
長按設(shè)備卡片,選擇目標房間,可完成單個設(shè)備轉(zhuǎn)移。
選擇設(shè)備頁面右上角的移動方式,可以批量進行設(shè)備的轉(zhuǎn)移。
自動模塊包含場景、自動化、第三方設(shè)備,它們不具備房間屬性;
點擊右上角的箭頭可以展開或收起對應(yīng)列表,方便查找內(nèi)容。
第一步,先填寫場景名稱、選擇圖標、是否要添加到收藏;
第二步,選擇執(zhí)行的設(shè)備,可以根據(jù)設(shè)備名稱、房間名稱進行快速定位,并且可以批量選擇設(shè)備;
第三步,設(shè)備添加成功后,根據(jù)需要,單獨對設(shè)備執(zhí)行狀態(tài)設(shè)置。
新建場景的邏輯是:先批量選擇要執(zhí)行的設(shè)備,再單獨設(shè)置執(zhí)行內(nèi)容。
這種方式的好處是,不易打斷用戶的設(shè)置思路,還可以減少操作步長。
新建自動化界面分為觸發(fā)條件、執(zhí)行內(nèi)容兩大塊;
初始狀態(tài)會為用戶提供使用描述,便于用戶操作。
可以通過時間的變化、設(shè)備狀態(tài)變化、位置變化、天氣變化、安防變化來觸發(fā)執(zhí)行命令。
將設(shè)備狀態(tài)變化作為觸發(fā)條件時,設(shè)置邏輯是,完成一個設(shè)備的設(shè)置才能設(shè)置下一個,不能批量選擇。為什么和新建場景的流程不一樣?可能是因為在設(shè)置執(zhí)行條件時,用戶心智里認為設(shè)備和狀態(tài)聯(lián)系更緊一些,并且條件種類不會太多。
當(dāng)添加了一個以上的設(shè)備作為觸發(fā)條件時,界面會顯示“同時滿足或滿足任何一個”的選項。
執(zhí)行內(nèi)容可以是控制設(shè)備、通知給用戶、運行場景、改變安防模式。
可以批量選擇設(shè)備,并且可以設(shè)置執(zhí)行延遲時間、自動復(fù)位,滿足用戶不同需求。
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。
作者:土木君 來源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.wnxcall.com