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

          首頁

          未來感設計汽車大盤點(上)

          ui設計分享達人

          在靈籠中,白月奎開著奧迪在滿是噬極獸的世界馳騁。小伙伴們也驚呼連連。其實,這是一款名為AI trail的奧迪概念車已經被生產,預計2030年上市,那現實中是什么樣的呢?接下來,就從奧迪開始,為大家盤點未來感的汽車是什么樣子的吧。

          1.奧迪AI trail 

          這也是一輛純粹的SUV。它有四個電動馬達,每個軸距上有一個,這使它具有四輪驅動能力,它在公路上的最高速度為每小時81英里,越野范圍為155英里。它的輪胎壓力可以根據地形,在移動中調整。

                   

          奧迪 AI trail外觀


          當你坐在里面,它會給出一個令人難以置信的寬廣的觀察范圍,她甚至可以讓你看到輪胎。因為里面有足夠的空間,甚至沒有任何多余的顯示器,它是完全由你的手機進行控制的。

          把手機作為屏幕,從而達到更廣闊的視野


          你可能已經注意到沒有大燈,但這是因為它用于照明的燈被安裝在自主的無人機上,這些無人機會在前面飛行,為你照亮道路。當你在光線不好的環境野營時,你可以通過折疊無人機,手電筒等照明設備。

          無人機搭載照明燈


          充當照明設備的無人機


          2.雷諾EZ-Go 

          雷諾在2018年發布了他們的電子出租車概念車easy go,同樣計劃在2030年面世。其設計理念是:在未來,汽車的所有權已經不在是一種趨勢,當我們需要旅行時,我們只需預約一輛自動駕駛的汽車。雷諾高層表示,網約車和共享移動服務將會是雷諾的主要發展方向。當你來到一個陌生的場景,你可以透過360的窗戶來欣賞沿途的風景。進入內部,內部空間可容納六名乘客,呈U型排列車頂從前面打開,提供存儲空間。并且它還有四輪轉向功能,意味著它可以在城市間輕松穿梭。當然,作為更明顯的旅途用車,它的車速最高限制在50m/h。對于行動不方便的乘客,它有一個可伸縮的斜坡,當你需要下車是,將自動伸向路邊,讓乘客可以更加方便的進出。

          在城市穿梭的ES-Go


          通過顯示器可以看到基本信息


          汽車內飾


          undefined方便進出的設計


          3.terrafugia tf-x

          相信小伙伴們多少在科幻電影當中看到“會飛的汽車”,我在小的時候看過一個電影《第五元素》,依稀記得家里的七大姑八大姨,嗑著瓜子,坐在炕頭,討論著“我們有沒有機會坐上這樣的汽車”。這部這款汽車可能在不久的將來將會滿足大家的遠景。

          電影《第五元素》


          如果你正在尋找未來的汽車是什么樣子的,那么 terrafugia tf-x就是我們我們理想的設計。這款汽車售價 28 萬美元起,折合人民幣約為190萬左右。它擁有一雙可折疊的螺旋槳,隱藏在車機兩側。

                                          

          TF-X外觀                                                                              展開雙翼的TF-X


          這款汽車很快就由波士頓的設計公司開發出來了,這款概念車比它最初看起來的空間要大得多,它是插電式混合動力,能夠實現全自動飛行,在緊急狀態下可以手控或者遙控。在動力系統上采用插電式混合動力傳動系統,有兩個600制動馬力的電機和一個33制動馬力的燃料發動機,電腦自動控制,擁有有四個座位,可垂直起降空中續航可達640 公里,最高時速為 185 公里/小時,但是它在路上的最高速度或它的范圍還沒有被公司宣布,即它可以飛到可伸縮的翅膀上折疊出一個連接的螺旋槳的事實。

          與此同時,各國的航空當局也在討論和協商制定管理這一新興交通業的政策和安全標準。如果未來將會普及飛行汽車,那么開上飛行汽車是否需要飛行駕照?人們是否會花費超過100萬RMB來購買?

          正在倒車的Terrafugia TF-X


          飛行中的Terrafugia TF-X


          4.雪鐵龍19_19

          雪鐵龍1919確實是一款具有未來設計感的汽車,它的目的是要做到其舒適性已優先于其他每一個元素,它的設計理念是未來航空工業。結合前擋風和立體化的玻璃覆蓋,上半部分更像一個漂浮的太空艙。

          undefined

          雪鐵龍19-19外觀


          它在車頂后部安裝了激光雷達探頭,主要用于在長距離行駛時的自動化駕駛。 它的踏板和方向盤,是可以伸縮的。但當駕駛者想自己駕駛時,踏板會降到合適的位置,方向盤會展開。當用戶不想駕駛的時候,方向盤會自動縮回,智能音箱自動升起,幾乎像一個潛望鏡一樣,幫助用戶實時檢測駕駛情況,并且把信息顯示在擋風玻璃上。undefined

          自動駕駛模式,信息在擋風玻璃上顯示


          5.輛豐田LQ

          豐田LQ的設計原則是,讓司機和他們的車輛之間有更加緊密的聯系。所以通過加入最先進的先進的AI,稱為Yuyi,將人工智能打造成你在車內最好的朋友之一。 

          會眨眼睛的LQ


          它是全電動的,擁有SAE  L4級自動駕駛系統,這意味著不需要用戶的參與,因此車廂的舒適性就顯得尤為重要。在座艙內的乘客被不斷地監測,AI將根據司機的情緒和警覺狀態來調整溫度,甚至是駕駛模式。并將進一步嘗試在情感上吸引司機,使他們在旅途中保持愉快的心情。車內的每個控制都是語音激活的,這代表車內幾乎沒有任何物理按鍵,所有的信息將會投射在擋風玻璃上。甚至可以調整照明水平,在空氣中釋放平靜的感覺,AI也會選擇自己的音樂播放列表,喚起它認為目前最符合你情緒的音樂。

          AI根據用戶心情播放相關音樂

          正在自動駕駛的LQ


          6.梅塞德斯-奔馳Vision AVTR

          如果你想看到世界上最有未來感和最有異國情調的輕型概念車,那么你一定要看的就是這輛車。相信小伙伴們都看過《阿凡達》這個電影,無論是科幻的劇情,還是絕美的場景,都在當時引起了不小的轟動。這輛車的靈感就是來自《阿凡達》這部電影。而且契合度可謂是非常的高。

                               

          阿凡達場景                                                                  阿凡達宣傳海報


          它外觀采用了仿生設計,整體觀感十分科幻。車身兩側采用了全透明設計,意在大幅提高車內視野,強調車內、車外的交互。它還使用了33瓣采用了獨立的仿生襟翼,看起來像爬行動物的鱗片,可以根據不斷變化的條件來調整車輛上方的空氣流動。

                

          《阿凡達》電影中的精靈樹


          他的輪胎,借鑒了電影中,精靈樹的樣式,并且它去掉了傳統的圓形輪,胎取而代之的是球形輪胎,它提高了機動性,對周圍的影響較小,并且能夠扭轉30度,這意味著汽車可以以螃蟹的方式側向移動。

          AVTR外觀


          可以依據氣流和感應翻轉的仿生襟翼


          內飾以流動的波浪和花朵形狀為基礎,這看起來是有史以來最舒適、最高效和最愉快的旅程。這輛車會與你交談,了解你想去的地方,在給它下達指示后,你需要做的就是坐下來,讓它做所有剩下的事情。值得一提的是,車內同樣沒有任何按鍵,當你伸出手站,并且注視手掌時,按鍵就會顯示在你的手心上,你進行移動點擊等操作。

          AVTR內飾                                                             顯示在手掌上的虛擬按鍵


          通過手掌來控制方向                                                用手掌進行交互


          通過對趨勢的了解和分析,相信小伙伴們對未來感汽車有了新的認識和理解。目的也是為了讓大家更好的把自己的理念和設計與未來汽車相貼合,亦或是產生靈感,發散思維,做出更好的創作。希望在不久的將來,無論在汽車造型,還是內飾,或是儀表等,可以看到大家充滿激情的設計。

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

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

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

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


          案例分享 PM/UX 必看 [用戶體驗]

          ui設計分享達人


           

          講User Research | 用戶研究 之前,有必要先介紹下“用戶體驗”。這兩者是密切關聯的。

           


          作為一枚互聯網老兵,先說一下歷史吧。

           

          N年前,UX Designer還不怎么流行。

           

          隨著喬幫主iphone4的橫空出世,驚為天人,徹底改變了整個手機生態。于是在中國市場,各種熱錢涌入,到處都是創業公司(start-up),各類APP紛紛孵出(我在上海)。這是整個移動互聯網行業野蠻生長的年代。公司那么多了,那么UI,iOS開發,Android 開發等等都是供不應求的。

           

           

          當然,那么多創業公司,90%都會在一年內,在天使輪的階段死掉。能活下來的,都是壯士!現在你看看你手機上裝的啥耳熟能詳的APP,基本也就是那些了。

           

          題外話:我當時的公司樓上是一家知名網游公司。某天我很快樂(KU B)的去上班(Make Money),結果就看到新聞說那家創始人CEO昨天半夜心臟病發,人沒了。隔天就看到他家公司門口貼訃告了。(此處默哀!)創業不易,真心能活下來的都是壯士!

           

          野蠻生長的年代,對于崗位要求不會那么精細。做UI的,最好你什么都會,十項全能。平面/手繪/App UI/ Web UI/H5/交互/動效/前端最好也懂一些/其他。。。


          那時候少有交互崗,因為交互崗通常會被產品崗,或者UI崗兼了。但隨著這些年WEB/APP越來越成熟,用戶對于體驗的要求越來越高。另外,隨著各類海歸人才帶回來的國外先進設計理念。各路大中小廠對于UX交互也就越來越重視。

           

          于是,就有了UX Design | 交互設計的專門崗位,有些也叫User Experience Design | 用戶體驗設計,在互聯網行業,兩者基本一個意思。

          (我們這里不討論用戶體驗的五個層次,戰略層、結構層、表現層之類的。這些太理論,大概知道就行了,多說我也困。真要硬掰,那交互設計實際算是用戶體驗中的結構層。但在國外專業文獻中,UX Design=User Experience Design。不要硬剛。 :P)

           

          人類總是情緒化的,總是對他們世界里的產品做出情緒化的反應

          -艾倫·庫珀,Cooper公司總裁,Visual Basic之父

           

           

          一.什么是 User Experience | 用戶體驗?


          通常來說,“用戶體驗”就是人們在使用產品時候的感受。用戶體驗并不僅限于互聯網行業,各行各業都有。


          用戶體驗更關注的是人和物的交互(Human-Objects Interaction)之間的聯系。


          “物”在互聯網產品中的應用可以是Web,APP,System等。

           

          舉個生活中的例子,迪斯尼。

          迪斯尼,娛樂行業吧?但它更是一家徹徹底底的體驗公司,極其注重體驗管理。


          迪斯尼樂園為小朋友們,大朋友們筑造了一個夢。迪斯尼的體驗管理,就是從造夢這個目的出發的。


          對于服務人員、演職人員的要求,干凈、禮貌都是最基本的。


          迪斯尼對演員的要求是,你不是演米老鼠,你就是米老鼠。用戶體驗細致到如下:

          只要有賓客在,演員就不能把頭套摘下。之前有新聞說演員中暑了,也堅持不取下頭套。(這里我們不討論勞工權益之類的問題)因為不能毀滅孩子們的夢。

          在同一個視野里,不能有兩個同樣的米老鼠。因為對于孩子來說,米老鼠只有一個!

          全世界演米老鼠的演員,都要苦練簽名。因為對于孩子來說,全世界只有一個米老鼠,簽名當然是一摸一樣的。


          這只是演員,還有其他工作人員,還有工作以外的服務。此處不再延申討論了。


           

          二.什么是 User Experience Design | 用戶體驗設計(即UX Design | 交互設計)?


          用戶體驗設計,顧名思義,就是為產品/服務設計一個良好的體驗。用戶體驗設計同樣并不僅限于互聯網行業,各行各業都有。

           

          舉個生活中的例子,麥當勞的打包袋設計。


          傳統設計是這樣的。

          漢堡薯條什么的全部裝紙袋,沒有提手,每次都捏到我手指抽筋。飲料再另外裝個塑料袋。

          一個捏,一個提。其實是不舒服也不方便的。

           

          用戶體驗好的設計可以是這樣的。方便快捷,節約資源,解放手指。

          (gif動圖,刷新頁面重播)

           

          我們這里想說的用戶體驗設計,特指互聯網行業。


          早期的Web頁,幾乎就是個靜態網頁,就提供些信息展示。那時候用的還是asp, php, .net技術,快捷點的話有個模板套套,新聞/產品就能后臺維護了。


          從大概2010年以后,Web就開始越來越復雜了,APP也開始越來越精細和規范了。這對于交互的要求就越來越高,需要有一個良好的用戶體驗設計。

           

          舉個APP的例子。

          淘寶最近對“確認收貨方式”做了優化(大致在2021.9),不知道你發現了嗎?


          淘寶購物時,首先,在買東西付款的時候,就需要輸入第1次支付密碼。


          最后,在收貨確認時,

          Before: 原來,還需要再輸入第2次支付密碼。

          Now: 現在,只需要點擊“確認”就行了,不需要再輸入一次支付密碼了。此次優化,就是簡化用戶的操作,提升用戶體驗。

           

          如下圖為最新優化后的截圖:


           

          如圖,

          Before: 原來,在Step 3中,原來還需要再輸入第2次密碼。

          Now:現在,在Setp3中,直接從Setp3——>Setp4.


          三.為什么UX Design | 交互設計很重要呢?

           

          產品成功與否,涉及到太多方面了。戰略決策、產品、內容、用戶體驗、技術、運營、服務、競品情況,資金投入、運氣等等,缺一不可。而用戶體驗/交互是其中重要的一環。


          專注于用戶的交互設計,大大增加了項目成功的機會。因為產品是給人用的,尤其是互聯網產品,用戶不會因為產品是知名品牌,就堅定不移的支持它,買它,用它。


          要是產品不好用,那放棄它,也是遲早的事情了。


          畢竟,能讓大家都喜愛的,還不管怎么樣都愛到死的,也只有RMB人民幣了。

           

           

          四.什么是 UX Designer | 交互設計師?


           

          交互設計師,需要通過調查和分析等用戶研究方法來設計產品,或者對產品做優化改進,以保證用戶能有一個良好的用戶體驗。


           

          五.UX 和UI的區別?


          UI,純粹的UI,通俗來說,就是負責好看。把產品做好看了,做精致了,讓用戶看得賞心悅目,心情舒暢。這是美學意義上的工作。

           

          UX,通俗來說,就是負責好用。讓整個產品流程簡單又便利,用戶使用產品不會有停頓和疑問,讓用戶使用產品的感受非常好。最終目的是為了增加用戶的粘性,提高產品的流量,促進產品的轉化率,為公司帶來直接或間接的收益增長。

           

          UX是產品中的重要一環。

           

          當然,在實際工作中,如果產品——長得好看+體驗好。那就是王者~

          這也應該是做產品的要求和標準,也應該是設計師對自己的要求和標準。

           

           

          舉個兩者結合的例子,摩拜單車。

          (雖然他欠用戶押金,雖然他已經沒了,成為了美團單車。但是他的故事還是可以講一講的)

           

          設計方面,

          摩拜單車的聯合創始人王曉峰(負責具體的研發、運營及市場工作)回憶當年做摩拜單車的時候,首先考慮的是產品和服務要讓消費者有面子。


          前期他做了很多市場調研(看,用戶研究),當年在校園外騎車的只有三種:除了專業騎賽車的,就是藍領工人和老年人。


          想讓白領階層都愿意騎自行車,就必須要讓他們覺得有面子。如果讓一個白領,騎著五花八門,甚至還叮當帶響的自行車上路,那是很沒面子的,這種生意一定會失敗。


          于是,摩拜就設計出一輛金屬感十足的橙色自行車,好看又酷炫。

           

          用戶體驗方面,

          摩拜單車能夠提供給用戶的體驗一直有著不錯的口碑,比如車身結實、開鎖方便、損壞率低。但是,在夸贊的后面,用戶們往往會補刀:「好是好,就是太重了。」(第一代重量為25公斤,是普通自行車重量的2倍。)


          于是,為了改善用戶體驗(看,基于用戶反饋。又是用戶研究。),第二代摩拜單車在確保安全和耐用的前提下對每個零件減重,整車僅重 15.5kg。比于第一代單車「減重」了約 10 公斤。


          這還僅僅是車身重量,其他各方面,輪胎,鎖,鏈條,車座等等,全部做了優化改進。此處不再延申討論。

           

           


          回到做WEB或者APP的設計上。


          中國的互聯網行業并不羞于抄襲對手,現在產品同質化這么嚴重,靠單純的產品創意早已經無法取勝了。


          現在產品更多的核心優勢是ABC——人工智能(AI)、大數據(BIG DATA)和云計算(CLOUD)。我們頂尖的算法工程師們(Data Scientist)好不容易對數據做了識別、分析和精準有效的輸出。


          結果在交互這一環沒做好,用戶找不到,看不懂,不會用這些產品/內容。你做設計的良心會不會痛?


           

          六.用戶體驗設計就是需要“以用戶為中心”(user-centered)而設計


          不要拍腦袋決定,不要自己YY。

          不然只能設計出一個你自己想要的,或者是你老板想要的產品。

           

          舉個反面案例:生活中的例子,廁所標識。

           

          用戶體驗—— 正常

          這張圖,好理解吧,廁所標志。就算右邊那個清朝的個性了點,那也是設計得不錯,能看懂。


           

          用戶體驗—— 差

          這張圖,額。雞?讓我想想,哪個是公雞,哪個是母雞?只要我努力辨認,我還是有機會成功上廁所的。


           

          用戶體驗—— 極品差

          這就是設計師自己YY的結果。


          這張圖,這都是什么玩意兒?大象?長頸鹿?什么意思?設計師,你給我出來,你信不信我打不死你?


          這樣的廁所標志,我猜都猜不出來,我只能跑到廁所門口張望,當個女流氓,看看廁所里的坑位是什么樣的,我才有指望上廁所。

           

          好了,那位設計師現身說法了,他的靈感源于動物習慣,大家弄不清楚的原因是他們不了解動物的具體習性。


          長頸鹿在噓噓時會張開雙腿,這標志著女廁所,而大象則用象鼻噴水,這標志著男廁所。他的靈感在大部分人看來太牽強,因為一般人對于這些動物習慣一無所知,用大象和長頸鹿來分辨廁所之間的區別是不是很無語?


          這設計師就光顧自己玩創意了,自己YY。廁所是為了給大家帶來方便的,好的設計創意是一回事,但最大的問題也是要方便眾人使用的。

           



          舉個正面案例:APP的例子, AR(增強現實)。


          現在AR技術已經相對成熟了,導航,家居,翻譯,試妝,試鞋,地球儀都有AR。

           

          拿AR試鞋舉例子。

          Before: N年前,AR試鞋還是把鞋子投到地面上,看個大致效果。(左側Before截圖大概是我3年前截的)

          Now: 現在,AR技術做強了,AR試鞋就直接投到腳上,能夠看到鞋子上腳的效果。對用戶而言,體驗更好。對商家而言,轉化率會更高。

           

          好了,用戶體驗就講到這了,是不是很輕松,看看故事就有些體會了?


           

          最后,

          今年是喬幫主逝世10周年,緬懷下!原來,他已經離開這么久了。

           

          I skate to where the puck is going to be, not where it has been. 

          - Wayne Douglas Gretzky

          這句話簡單來說,就是預判形勢,提前準備。

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

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

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

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



          B端查詢列表剖析和實戰

          ui設計分享達人

          什么是查詢列表?


          首先我們先了解下官方Ant Design對查詢列表的定義:


          簡介:

          查詢列表可以查看和處理大量的條目數據,常有導航至詳情的作用,

          用戶可在列表頁對條目進行篩選、搜索、對比、新增、分析、下鉆至條目完整詳情頁等操作。


          設計目標:

          幫助用戶更高效的查看、處理、查找條目。


          設計原則:

          易讀性:采用格式一致外觀,突出有利于對象識別的關鍵信息。利用富交互分層展示信息以減少認知負荷;

          可尋性:列表以易于瀏覽的邏輯排序。提供合適的搜尋組件幫助用戶快速查找信息;


          常規布局順序:

          數據過濾 + 數據統計 + 數據列表 + 批量操作

          undefined


          模板頁面示例:


          現在有了官方解答指導,我們就先從分析模仿開始



          查詢列表有什么?


          從四個維度開始一一分析:


          一、數據過濾:

          常規的數據過濾分為兩種類型:


          1、條件篩選:

          特點【結構化+有限范圍】,篩選需求和數據都是結構化的,

          比如有一個用戶信息表,需要篩選出性別【男】+城市【北京】+年齡段【18-24歲】的用戶,就是因為信息屬性可以被量化和拆解處理,我們才能多條件組合篩選(且的關系)出來;


          組件:選擇器(單選/多選);

          布局:上下結構(常用)、左右結構,條件多時要配合可折疊操作;

          形式:區域堆疊、表頭、彈窗;


          2、搜索查詢:

          特點【非結構化+模糊/精準匹配】,搜索的需求是非結構化的,

          比如還是用戶信息表,需要查到一個叫【寧榮榮】的信息,你就只能去手動打字去搜索,因為姓名是開放式的信息,無法被結構化處理。

          undefined


          組件:基礎搜索框、高級搜索框;

          布局:跟隨列表,常放置其左上角或右上角;

          關于具體使用,搜索不用多說,遵循系統統一性原則,選擇一處固定位置就好,


          對于B段產品,業務本身比較復雜,篩選條件偏多,原則建議從使用高低頻入手,高頻顯性,低頻置后、折疊都可(后續可以出一片詳細的篩選篇分享下)


          二、數據統計:

          數據統計一般作為查詢列表的重要配角出現,方便用戶直觀了解到當前頁面的統計信息。

          就是列表數據提煉出來統計信息,數據名稱+數值,左右、上下布局都可,

          有一點強調一下,業務的數據統計要求和條件篩選聯動變化,就要放在條件篩選下方,

          如果統計數值是固定值,就放置條件篩選上方。


          三、數據列表:

          這里的列表主要陳述標準的【表格Table】形式,

          表格被公認為是展現數據最為清晰、高效的形式之一。


          它常和排序、搜索、篩選、分頁等其他元素一起協同,適用于信息的收集和展示,以及操作結構化數據,

          明顯優勢就是結構簡單,分隔歸納明確,使信息之間更易于對比,大大提升了用戶對信息的接收效率和理解程度。


          常規內容構成:

          Header:標題、篩選(高頻)、操作按鈕、表搜索、icon(列設置、刷新、全屏)

          Table-Header:復選框、序號、列名稱、icon(排序、提示、列篩選、列搜索)

          Table-Content:數據內容、按鈕

          Footer:多選數量,分頁器


          四、批量處理:

          批量操作是作用于整個頁面的操作,故放置與頁面最底部,當然這個可以根據應用場景調整位置,

          常見操作有【批量刪除】【批量禁用】【批量導出】。



          如何設計查詢列表?


          筆者也是從0開始接觸B端設計,開始查閱了相關很多設計規范體系,一頓狼吞虎咽,依葫蘆畫瓢出了設計模板


          下圖就是依據Ant Design設計出的第一版查詢列表模板


          經過產品和研發評審,這樣的布局表現雖說“五臟俱全”、“兼容性較好”,但是脫離了用戶實際使用場景和交互路徑,割裂感也很強,


          舉個例子,你準備蓋一個房子,常規講應該有有客廳、臥室、書房、廚房和衛生間五個空間,但你現在只是單純用磚塊砌了五個房間,大小一樣,毫無順序,想必你也不會這么蓋···,我們現在從頭開始,你是不是會考慮:


          1、是不是進門應該是客廳,是不是應該大一點好接待客人;

          2、書房是不是應該遠離,減少噪音;

          3、哪些房子需要窗戶,窗戶朝哪邊好通風,陽光充足;

          4、等等···


          總結一句:我們設計出的交互操作&視覺呈現,要契合用戶實際使用場景和路徑,而不是自己YY。


          怎么獲取你想要的答案?調研和競品分析。

          調研可以向產品、銷售、交付人員獲取你想要的信息,

          競品分析可以找同類型產品進行優劣分析,取其精華。


          下面列舉調研和競品分析的幾個點說明下:


          調研一

          問:產品或銷售登門拜訪客戶時,演示電腦分辨率是多少?客戶使用電腦分辨率是多少?

          答:多為老式筆記本電腦且分辨率偏小,1440*900、1366*768偏多。


          機會點:上圖數據來自百度統計-流量研究院也只能作為輔助參考,最終還是要看產品實際用戶設備情況,為了保證頁面內容盡可能多的展示在屏幕上,布局得緊湊,要優先適配小屏幕效果,所以設計稿尺寸得調整為1440*800(去除瀏覽器頂部頁簽+地址欄+Win任務欄高度,再取整)。


          調研二

          問:詢問客戶使用查詢列表頁面是否能高效的查看、處理、查找條目

          答:查詢查看沒問題,就是一屏數據內容展示的太少,標題欄、篩選和數據統計占了太多高度,而且篩選也不常用,導出按鈕在底部不明顯,橫向滑動很難用,看錯行。

          機會點:優化布局,篩選考慮折疊或者表頭篩選,橫向數據堆積能否換行展示,導出操作是否可以放在上方?


          競品分析:紛享銷客CRM

          優點:列表內容占主要視覺面積,篩選采用表頭和自定義配置條件功能結合,列內容可自定義隱藏/顯示/前置和列固定左側,優先展示用戶自己想看的信息,減少橫向滾動條操作和提升小屏用戶體驗,將主動權交給用戶,列表視圖和分屏視圖也滿足了不同用戶的查看需求,以上這些都是很好的優化方向。



          競品分析:廣聯達

          優點:同樣列表內容占主要視覺面積,高頻篩選放出來,低頻篩選采用折疊交互方式,用戶有需要則點開【更多篩選】去操作,頂部有數據統計支持總攬,Table內容對于強關聯的內容進行上下組合(節省橫向空間),所有的操作按鈕集合到右上角,方便用戶定位操作。

          undefined


          總結一下:

          undefined


          以上就是筆者在調研和競品分析上可以獲取到的主要信息,雖說第一版套用AntD模板的設計并不理想,但對于初入B端行業的筆者來說著實重要,對查詢列表的框架、功能、和交互有了基礎指導和了解,才能有后續的一些針對特定業務場景的設計優化改版,凡事還是得現有基礎理論支持,后面的路才會走的更遠。


          言歸正傳,下圖就是針對上面的總結優化后的查詢列表,相比第一版(可上劃參考對比)變化還是挺大的,各位可以對照的優化點細細體會下:


          1、取消面包屑(系統深度較淺),優化(減少)標題欄高度;

          2、增加數據統計,區域板塊使用分割線劃分,減少割裂感;

          3、頁面操作按鈕集合放置在右上角,主按鈕統一在最右側;

          4、高頻篩選常駐+表頭篩選結合交互(這里其實還是有問題的,對于組合篩選操作并不易用,待優化);

          5、增加Table刷新和列設置操作(刷新和設置icon);

          6、列鎖定(鎖子icon)可以快速自定義設置優先左側固定;

          7、Table內容根據業務內容屬性合并上下組合展示,節省橫向面積(寧可上下滑動,也不要橫向滑動,至少減少橫向滑動的距離);


          這一版看起來整體架構層級依然清晰明確,從視覺角度看更豐富、更有節奏感,從交互來看也更符合用戶的操作場景,新增了幾個輔助功能,讓用戶可以根據自己的業務需要自定義配置列表內容,更有掌控感,能更高效的查看、處理、查找相關信息,這也是基本達到了查詢列表的設計目標。


          經過和產品經理溝通,此次優化思路和方向也很準確,獲得了肯定,后續的迭代還需持續進行。


          調研和競品分析帶來的好處想必各位也體會到了,凡是我們不了解不精通的,就去多看看多搜搜,總會有收獲,站在巨人的肩膀上總會看的更遠。


          Ending


          這次的分享是自己在探索B端道路上的小經歷,同時也體會到一些更深層次的東西,比如設計的意義在哪,什么是好的設計,怎么才能做出“好”的產品,在此分享給各位,希望能給大家帶來些思維上的變化,共同進步。

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

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

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

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


          B端產品界面高屏效初探

          ui設計分享達人

          背景

          在 B 端設計領域中,不管是內部用戶、產品、設計師、開發,還是外部產品、設計師等,總能聽到關于界面「屏效」方面的訴求或吐槽。


          undefined


          「屏效」狹義理解是「界面過度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數)。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。


          為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感,于是我們展開了「屏效」專題的設計探索與實踐?!钙列А箤n}探索主要以「探索」與「實踐」相結合的方式展開,將實踐過程中反復驗證有效的設計策略沉淀成設計手冊,同步將部分功能進行工程化,確??梢蚤_箱即用。


          undefined


          探索階段-為誰在何時何地設計

          用戶聲音|不同的故事相似的訴求

          面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%;認為提升屏效對體驗有提升的終端用戶占 50.6%。


          undefined


          外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里,其中就有 2 點提到關鍵字「效率」。


          undefined


          通過了解不同用戶和產品類型發現,不同的用戶在工作場景的產品使用中有著相似的特征:


          undefined



          案例收集|發現問題,大膽假設

          縱觀 B 端產品界面,發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例,為了逐步突破問題,選擇以數據產品中覆蓋率極高的表格為設計切入點,通過線上跨產品多端地毯式的體驗走查,發現表格三個層次的問題:


          undefined


          視覺、交互層在無需理解業務場景和用戶目標的情況下,都較容易發現,屬基礎問題,但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

          綜上我們提出假設:為提高屏效,可從視覺、交互、信息三個層次解決

          視覺層為提高信息查閱速度,可以通過提高信息密度;交互層為提高操作速度,可以縮短當前手勢到目標之間的距離;信息層為提高信息被理解的速度,可以通過重組織等方式。

          基于假設,我們進行了進一步的桌面研究,查閱論文等書籍,尋找設計理論的驗證和指導。


          競品分析|尋找實踐證據,謹慎驗證

          我們知道視覺上界面留白過多(過疏會增加滾屏成本,過密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號、字高和行高的關系,因為不同字體的同字號實際像素高度會有差異,因此選擇的是字高(即文字垂直高度的視覺大小)而非字號或字行高,決定留白的兩個重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關系,探究在視覺層怎樣的留白率能保證甚至提升屏效。


          undefined


          以數據產品中的表格為例,通過直接和間接競對的方式,分別從數據的查閱(視覺)、分析(交互)維度進行功能點和設計細節上的比對,來看看優秀產品是如何解決屏效問題。

          直接競對:內部用戶口碑較好的產品 A、B外界競對:同領域的 Tableau、網易有數、金山、微軟表格;間接競對:谷歌郵箱、AntD 等的緊湊主題的常規列表(一維表格)


          undefined


          通過競品分析可以發現,數據分析領域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類面向數據用戶的 Tableau、網易有數,而谷歌郵箱等工作臺常用的常規列表緊湊版本中,留白率和數據領域的電子表格不相上下。


          緊湊版的使用場景也常常是面對數據量巨大的信息呈現,通過切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大,而在實際案例實踐中,也已經將表格行高優化至 30px,克制的使用留白。


          除此外,競品其他層次的設計也做了比對,總結來看整體設計做法:高密度、少屏數、少留白等。


          文字陷阱:中英文字高不等于字號


          舉個容易犯錯的競品參考是,谷歌在緊湊版主題下字號 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠,缺乏呼吸感。


          undefined


          原因在于谷歌的 12px 是英文字體,實際字高只有 10px,而 AntD Table 的語境是中文字偏多,實際字高有 12px,所以留白的差異在于一個是 18px(28-10),一個是 16px(28-12),這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高,而非「字號」和表格行高,進一步推演,決定界面留白的是「元素視覺高度」和「元素間距」。


          論文查閱|尋找理論證據,謹慎驗證

          研究表明,低密度認知負荷低,但高密度任務完成率高,用戶更喜好

          參考資料:論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

          對于信息,用戶需要需要閱讀(視覺),思考和理解(認知),需要點擊按鈕、操作鼠標和打字(行動),在人機工程學中,統稱為負荷。即認知(記憶)負荷、視覺負荷、動作負荷,即分別對應用戶體驗設計的三個層級,信息/視覺/交互。而負荷所花費資源從多到少依次為:認知 > 視覺 > 行動。


          認知負荷,舉個例子,看了但不一定懂了。你是否有這么一種體驗——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門 C4D 教學視頻,即使就短短十來分鐘(信息密度大,輸出效率高),但是卻要看上半天。因為刷短視頻時,你的輸入效率遠高于作者的輸出效率,而看一門 C4D 教學視頻時,你的輸入效率遠低于作者的輸出效率??墒牵敵鲂适强陀^的,輸入效率是主觀的。如果輸出效率很高,你可以通過提高自己的輸入效率(比如讓自己成為 C4D 專家)來跟上作者,從而變強;否則輸出效率很低(信息質量低),你的輸入效率很高(很專業),信息于你而言都是無效的。


          假設負荷總量不變的情況下,那么以上三類場景界面需要對用戶負擔分配大致如下,官網品宣類需要低認知成本,低視覺負擔,視覺要求高,用戶才會被吸引過來閱讀,甚至酷炫的交互更能增加互動體驗而帶來的趣味感,比如蘋果官網,信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息,而 B 端應用因為是專業使用,首先認知方面隨著員工的專業度提高而降低,因此可以通過提高視覺負擔,來降低行動負擔,進而減少操作用時,當然最佳情況是三個維度能整體降低負擔,讓總負擔降低,就需要更多設計巧思了。


          undefined


          面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中,設計師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。


          undefined



          實踐階段-如何設計

          通過以上的探索,我們可以確定的是,B 端產品面向專業人員的工作界面設計中,提高屏效可從視覺、交互、信息三個層次進行,視覺層-高密度,即提高屏幕信息密度;交互層-低跳轉,通過減少頁面跳轉、手勢與常用操作的距離等;信息層-有效性,通過重組織或輔助信息幫助用戶理解,甚至提供幫助手冊等以提高用戶專業能力。


          undefined


          基于以上的總結,對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,尋找運營機會點。


          如下表格經過高屏效策略優化前后對比圖,優化前相同維度下不同人群數量的對比需要視線來回跳動比對,而優化后的表格內容,更符合用戶看差異場景下分析目的數據查閱,視線鎖定相同維度,即可快速比對數值大小。


          undefined


          下面以視覺、交互、信息三個層次解剖設計過程背后的思考。


          視覺層|高密度-克制的留白

          眼動理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動舒適轉動區 30度,垂直最大眼動舒適轉動區 55度??傻贸鋈搜圩钚∽R別范圍 12px,水平視野舒適眼動寬 1200px,垂直視野舒適眼動高 2200px。參考資料:論文《基于眼動交互的用戶界面設計與研究》


          undefined


          如圖,縮小表格行高的同時,目標信息之間的眼動距離隨之縮短,在眼動舒適區內看到更多信息,便于信息的高效獲取。


          undefined



          交互層|低跳轉-高頻信息前置

          理論基礎:菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型,它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為:T=a+blog2(D/W+1),W為其中目標的大??;D為到目標的距離;T為移動到目標所用最短時間。參考資料:菲茲定律


          undefined


          表格單元格借助交互狀態,增加懸浮出現的信息組件,前置顯示目標單元格明細信息,同時通過交互出現的指示器輔助行列信息的獲取,高頻操作考慮手勢位置放置,縮短與操作目標的距離,以提高整體操作效率。


          undefined



          信息層|有效性-信息重組織

          理論基礎:交互設計四大策略「組織、刪除、隱藏、轉移」參考資料:《簡約至上》


          undefined


          用戶為了對比 A、B 兩不同人群在相同維度(白領-有信用卡)下的人數差異,但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看,根據用戶目標,將關聯性大的數據放置相鄰列(即將要對比的人群放置列頭),即可快速查閱,減少眼跳距離。


          undefined


          結語

          設計趨勢中常見的大字體大留白界面,但在 B 端場景中,面對緊張的工作節奏,時間和注意力變得尤為可貴,相對而言,基于復雜度守恒定律, B 端信息量大且高頻訪問的產品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉」詮釋的即是「空間換時間」,少一次點擊,少一次跳轉,少一份等待,就多一份時間和效率。

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

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

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



          從體驗層面出發,分析App搜索框設計的要點

          ui設計分享達人

          搜索動作在App中依靠搜索框來完成,好用的搜索框很大程度上決定了產品的搜索體驗如何。大多數搜索框存在相似性,但真正好的搜索框會在細節上為用戶帶來差異化的反饋,帶來很暖很貼心的感覺。


          1、搜索框結構分析 

          從體驗層面上看,一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為:

          使用前-找到搜索框入口;使用中-點擊輸入內容;使用后-展示搜索結果。

          其中使用中會涉及到跳轉和輸入兩種不同的狀態,在下面的文章里我會展開來分析。


          2、搜索框的常見類型 

          回想常用App的搜索框,好像它們的樣式看起來差別并不是很大,但其實每個搜索框的細節都是經過精心設計的,下面總結了幾種常見的搜索框類型。

          搜索圖標

          頁面上只提供一個放大鏡圖標,通常需要用戶點擊圖標后才能跳轉到搜索頁面,例如小紅書就將搜索圖標放置在頁面右上角。

          基本搜索框

          基本的搜索框組成包括放大鏡圖標、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式,文字提示為搜索,簡潔清晰。

          文字提示類搜索框

          和基本搜索框的唯一不同的地方在于,這類搜索框中的文字提示部分不再是搜索兩個字,而是根據產品需求支持預置多組文字提示并在搜索框內循環展示。

          ▲ 在大眾點評的頂部搜索框中,文字提示部分循環展示了三組不同的內容,引導用戶快速檢索到好吃和好玩的。

          功能類搜索框

          之所以叫做功能類搜索框,是在文字提示類搜索框的基礎上根據產品功能的需要額外添加了常用的功能性圖標,如掃碼圖標、拍照圖標、語音圖標等,賦予搜索框更多的功能屬性。

          ▲ 經常使用豆瓣看書評的同學可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標,點擊之后可以快速掃描圖書條碼或二維碼,快速識別書的內容,省去檢索的麻煩。

          ▲ 淘寶搜索框的組成更復雜,除了支持掃碼外還有相機圖標,方便用戶拍照識別商品。 


          3、搜索框設計狀態分析 

          使用搜索框搜索的過程總體可以分為四部分:搜索前、點擊搜索框、輸入中、搜索后。設計分析過程中我們要先理清整體的搜索流程,再考慮每個狀態對應的交互細節及反饋,這樣才能保持邏輯清晰。

          搜索前-默認狀態

          位置

          大多數搜索框出現在頁面頂部,作為一個大的觸摸目標更符合用戶的認知習慣,更容易被用戶發現和使用。

          ▲ 在蘋果自帶的地圖應用中,搜索框放在頁面中部偏下的位置,相比于頂部搜索框,這樣的位置分布更方便用戶單手操作。

          樣式

          搜索前的狀態除了前面講的幾種常見的搜索框樣式外,有些產品會直接在搜索框增加“搜索”按鈕。

          ▲ 阿里系產品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕,相比于點擊搜索框再點擊鍵盤搜索內容推薦,直接點擊按鈕簡化了搜索流程。

          點擊后-獲取焦點

          搜索框

          點擊搜索框后,框內的放大鏡圖標會消失,出現閃爍的光標引導用戶輸入,搜索框右側會出現“取消”按鈕。

          ▲ 點擊大眾點評的搜索框后,搜索頁會出現三個選項,點擊每一個選項,搜索框內的文字提示都會改變,有效幫助用戶提升搜索準確度,雖然是很小的點但做的很用心。

          鍵盤

          點擊搜索框后會彈起鍵盤,在不輸入內容的情況下,點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內容。

          搜索頁

          搜索頁的內容通常包括歷史搜索、搜索發現、熱門推薦等版塊,記錄用戶的搜索行為,推薦目標商品或服務,提高轉化率。

          ▲ 豆瓣將最熱門的內容都展現在搜索頁中,包括實時更新的熱門書影音榜單、熱門小組、熱門話題等,為用戶提供有效的引導。

          關于歷史搜索我們還可以繼續深入分析,思考這些記錄怎么排序、最多顯示幾條記錄……

          ▲ 網易云音樂的歷史搜索最多可以保留10條,采用橫向滑動的手勢交互可以節省屏幕空間。根據內容長短一屏一次可以顯示2-3條記錄,這會導致排在后面的歷史記錄不容易被用戶快速發現。

          ▲ 淘寶的歷史搜索可以容納更多的數量,當搜索記錄超過兩行時會有一個小的展開按鈕,點擊按鈕可以查看早期的記錄,這樣既能節省屏幕空間也能最大化容納歷史記錄。

          搜索中-輸入內容

          刪除/取消

          當開始輸入內容時,在搜索框的右側會出現刪除圖標,方便用戶一鍵刪除輸入的內容,這里要注意區分刪除和取消的區別。

          ▲ 在淘寶中點擊“刪除”圖標,頁面會返回到上一級也就是搜索頁;

          ▲ 點擊“取消”按鈕,頁面會直接返回到主頁也就是搜索前的狀態。

          搜索提示

          在用戶輸入內容時,產品會根據用戶輸入的內容提供相對應的搜索推薦,這是搜索框的必備的交互反饋。

          通過合理的詞條推薦能極大降低用戶的思考時間,提高搜索效率,同時省去再次點擊搜索按鈕的流程,降低用戶的操作步驟。

          字數限制

          目前我所知道的大多數App在搜索時都沒有字數限制問題。

          回顧一下搜索使用場景會發現用戶在搜索框內輸入任何內容都是有可能的,盡量不要約束用戶的輸入內容。無論用戶輸入多少內容,點擊都可以完成基本的搜索操作,這樣整個流程才完整。

          ▲ 在百度中輸入過多字符時,會提示查詢限制在38個漢字以內,多的字符會被忽略,雖然給出了提示但并未打斷用戶的操作流程,可以讓用戶繼續完成搜索。

          搜索后-展示結果

          符合預期

          搜索的理想狀態是搜索到的結果符合用戶的預期,滿足用戶的搜索需求,并把最吻合的搜索結果排在前面,為用戶帶來清晰的結果展示。

          智能提示

          智能提示是對用戶輸入內容上的一種提示或糾正,如果用戶輸入的內容有問題或不夠標準,在搜索結果中會能給最貼切的搜索結果。

          ▲ 在淘寶中輸入“shouji”或“souji”,淘寶會根據拼音給出“手機”的搜索結果,但仍保留原標簽,方便用戶再次點擊搜索;輸入“手ji”時,會直接給出“手機”標簽,這種差異化的反饋能更好的為用戶服務。

          無結果提示

          如果沒有搜索到用戶輸入的內容,搜索頁會顯示一個空狀態,提示用戶沒有搜索結果。關于空狀態如何設計可以看我之前寫的一篇文章——如何做好「空狀態」設計?來看資深設計師的總結!詳細分析了空狀態的設計方法。

          ▲ 相比于直接顯示搜索無結果的狀態,拼多多的搜索結果首先會標明相關商品較少,然后將搜索內容拆分成不同的標簽進一步引導用戶來發現內容。

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

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

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

          如何選擇合適的圖標?來看這份圖標類型和風格匯總

          ui設計分享達人

          常見的分類是簡單的線性分類,缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。


          大家好,我是Clippp??吹胶玫膱D標我們會習慣性地截圖保存,但隨著收集的圖標越來越多,會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題!

          一、定義圖標類型

          對圖標進行分類時,普遍會遇到的問題是一個圖標有多種風格。例如下面這個水滴圖標,樣式很簡單,但可以劃分到多個類別中。

          面對這樣的問題,推薦使用系統性的結構來劃分圖標類別: 
          • 首先將圖標按尺寸大小分為兩類;

          • 繼續細分對應的面性、線性、線面結合、扁平、擬物化等類型;

          • 最后選擇標準、容器、漸變、3D、手繪、陰影等風格。

          利用這種結構層級,可以明確定義圖標類別。

          二、圖標尺寸

          圖標的大小取決于具體功能。例如帶有漸變和陰影的圖標看起來很酷,但把它縮小到16px,這些酷炫的效果都無法呈現出來。

          在對圖標歸類時,首先要考慮圖標用在什么位置需要多大尺寸。這里將圖標分為兩大類: 
          • 大尺寸圖標通常指標志性圖標,例如App啟動圖標或代表品牌形象; 
          • 小尺寸圖標用作UI控件,起到引導功能或裝飾目的。

          三、圖標類型

          確定圖標尺寸后,進一步細分圖標類型: 
          面性圖標 
          線性圖標 
          線面結合圖標 
          扁平化圖標 
          擬物化圖標 


          利用這種簡單的分類方式就能避免圖標發生重疊。另外擬物化這種細膩的風格不適用于小尺寸圖標中,所以在小圖標分類中沒有展示。

          四、圖標組成


          圖標尺寸越小,展示的細節越有限。相比于大圖標,小圖標的尺寸有一定局限性,圖標組成包括 標準和容器兩種。 


          大圖標利用尺寸上的優勢能展示更多內容,分為多種組成形式。

          五、小尺寸圖標樣式


          簡單的圖像可以更具包容性。圖標的尺寸越小,越考驗設計師傳達信息的能力。 

          1.面性圖標

          1.1標準面性圖標

          面性圖標易識別,適合應用在小尺寸圖標中。 
          關鍵點:
          確保圖標有清晰的邊緣,避免羽化; 
          圖標復雜程度隨著尺寸變小而靈活調整。 

          1.2帶有背景色的面性圖標

          彩色背景為簡約設計帶來了更多可能。通過這個技巧使面性圖標更友好,更具吸引力。 
          關鍵點:
          為背景選擇4-12種顏色。 
          考慮圖標是淺色還是深色,是否適用于所有背景色。 
          在彩色背景上使用白色圖標比黑色效果更好。 

          2.線性圖標

          2.1標準線性圖標

          線性圖標因為簡潔性和現代性而受到用戶的歡迎。隨著屏顯越來越清晰,我們可以更加大膽地使用線性圖標。 
          關鍵點:
          確保輪廓像素清晰。 
          越簡單越好。 
          追求更簡單的細節。 

          2.2雙色線性圖標

          設計小尺寸圖標時,必須放棄細節并強調簡單的形狀。但當使用一種顏色效果不太理想時,可以考慮添加一些顏色。 
          關鍵點:
          使用兩種搭配和諧的顏色。 
          考慮將一種顏色用于主要形狀,另一種顏色用于細節。 
          少即是多。 
          使用粗線條。 

          3.線面結合圖標

          線面結合擁有更多細節,提升用戶的愉悅感。 
          關鍵點:
          最好使用深色而不是純黑色描邊。 
          限制圖標的顏色種類。 
          避免過多細節。 

           4.扁平化圖標 

          扁平化圖標既簡單又巧妙,表達品牌形象的同時具有豐富的內涵。 
          關鍵點:
          避免在<20px的尺寸中使用此圖標樣式。 
          選擇2-3種顏色,可以一起使用。 
          一種顏色為主色,另一種顏色應為高光/細節色。 

          六、大尺寸圖標樣式

          大尺寸圖標在界面中使用較少,更多用于產品標識或品牌宣傳。 

           1.線性圖標 

          1.1標準線性圖標

          在設計任何圖標前,都可以先創建一個線性輪廓,確保形狀看起來足夠美觀后再添加顏色。 
          關鍵點:
          這類圖標最容易制作。 
          避免出現輪廓羽化。 
          線條粗細要一致。 
          不要害怕添加細節。 

          1.2漸變線性圖標

          添加一些漸變能讓原本單一的線性圖標賦予更多的個性。 
          關鍵點:
          在小尺寸圖標中添加漸變會降低圖標的可視性。 
          選擇漸變時,首先考慮鄰近色。 
          線條越粗,漸變越明顯。 
          線條細節越多,漸變越明顯。 

          1.3等距線性圖標

          2.5D圖標做起來會花費很多時間,但效果會很好。在設計汽車、房屋、家具等實體產品時,建議優先使用2.5D圖標。 
          關鍵點:
          同一組圖標要使用相同的等軸測網格。 
          2.5D等軸圖標很復雜,在較小的尺寸下會失去作用。 
          如果可以,讓所有圖標都朝向同一個方向。 

          1.4手繪線性圖標

          隨著設計趨勢向簡約化、扁平化發展,很多設計師喪失了手繪圖標的能力。實際上手繪圖標讓品牌更真實甚至更有趣。 
          關鍵點:
          手繪圖標掃描后,再用數字方式重新繪制,這樣可以保證線條粗細一致。 
          盡量讓所有的線條保持相同的顏色,這會使文件更小。 

          1.5斷線圖標

          標準的線性圖標看起來可能會很單調,而簡單靈活的斷線處理能為圖標增加更多個性。 
          關鍵點:
          斷線粗細應該相同。 
          圖標的中斷次數盡可能保持一致。 

          1.6雙色線性圖標

          關鍵點:
          確保兩種顏色具有相同的對比度,否則可能會導致用戶看不清其中一種顏色,因此無法識別完整的圖標。例如左下角的淺綠色對于視力弱的用戶來說就很不友好。 

          2.線面結合圖標

          線面結合圖標可以看作是添加顏色后的線性圖標。線面結合具有很強的輪廓,讓圖標能夠清晰可見。 
          2.1標準線面結合圖標

          關鍵點:
          使用有限的顏色和統一的線條風格,使圖標具有品牌性。 
          使用線條和點來添加更多細節。 
          避免使用純黑色描邊。 

          2.2帶有背景色的線面結合圖標

          關鍵點:
          描邊斷開時,圖標效果很更好。 
          避免在小尺寸時使用。 
          使用有限的調色板。 
          考慮使用較淺的描邊/背景色。 
          考慮在圖標下方添加一條水平線,使圖形具有相同的位置(中間的圖標示例) 

          2.3錯位線面結合圖標

          當填充色與描邊錯位時,顏色移到右邊圖標左上角留出高光,帶來一種清新的感覺。 
          關鍵點:
          考慮使用斷線描邊。 
          使用有限的調色板。 
          確保描邊和填充色簡單且一致。 

          2.4色塊圖標

          這種風格的圖標的特點在于并不依賴于顏色,僅將其用于裝飾。 
          關鍵點:
          選擇有限的調色板。 
          先關注輪廓再關注顏色,顏色僅用于裝飾。 
          避免形狀色和背景色過于相似,降低可見度。 

          2.4單色線面結合圖標

          關鍵點:
          避免使用暖色調尤其是紅色,會讓用戶感到壓抑。 
          首先確定合適的描邊顏色,再考慮填充色。 

           3.扁平化圖標 

          扁平化圖標通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當的細節,讓這類圖標非常具有吸引力。 
          3.1標準扁平化圖標

          關鍵點:
          使用柔和的調色板,避免明亮的顏色。 
          分清簡化和添加細節之間的界限。 

          3.2帶有容器的扁平化圖標

          嘗試讓圖形打破容器,帶來動態的感覺。 
          關鍵點:
          嘗試讓圖形從容器中凸出來,以增加深度。 
          因為在容器中,可以添加更多的細節而不用擔心圖形變得混亂。 
          嘗試使用正方形、橢圓形或與品牌相關的容器形狀。 

          3.3等距圖標

          關鍵點:
          保持所有圖標朝向同一方向。 
          選擇恰當的調色板能讓圖標看起來更一致。 
          避免小尺寸使用。 

          3.4半陰影扁平圖標

          半陰影圖標是在扁平圖標的基礎上添加半色調陰影,得到更具個性的圖標。 
          關鍵點:
          小尺寸圖標不起作用。 
          使用有限的調色板。 
          確保所有的圖標色調相似。 

          3.5長陰影扁平圖標

          當圖標位于容器中時,可以考慮添加長陰影,主要包括純色陰影和漸變陰影兩種類型。 
          關鍵點:
          使容器具有相同的顏色或類似的色調。 
          只在大尺寸圖標中使用。 
          將半陰影與長陰影組合使用效果更好。 

           4.擬物化圖標 

          擬物化圖標實際上已經包含了大部分的樣式,例如它們是立體的,有豐富的漸變和陰影。 

          這種風格的圖標看起來與現實生活中的圖標盡可能類似,讓用戶感到更舒適。 
          關鍵點:
          考慮添加底部陰影。 
          使光源來自同一方向。 
          確保圖標都朝向相同的方向。 
          目前絕大多數界面不在有這種風格的圖標,可以考慮使用3D建模來實現這種效果。 

          總結

          希望大家能對圖標的分類及設計有更全面深入的認識,從而構建一套完整的圖標思維體系。

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

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

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


          掌握這20條用戶體驗設計原則,助力設計成長!

          ui設計分享達人

          文章整理了20條用戶體驗設計原則,希望通過這份簡潔易懂的合集能夠讓你對用戶體驗領域有一個初步的概覽和了解。

          1.以用戶為中心 

          這是最常被提及的用戶體驗設計基礎,當涉及到產品設計決策時,提醒我們要學會使用同理心,而不是僅憑個人的想法或意見。

          真正好的用戶體驗設計是為用戶量身打造的,用戶的意見、痛點、愿望、偏好和需求對產品來說至關重要,所以在項目初始階段需要投入大量的時間和精力去了解用戶。

          用戶體驗研究重點是了解用戶,為接下來的產品設計做準備。以用戶為中心的設計理念是設計師迎合用戶的需求,區分了設計任何人都可以使用的產品和為目標用戶設計的產品。


          一款特定的產品需要面對不同的目標群體,前期研究中需要了解目標人群需要什么并在產品中反映出來,這是針對性很強的設計研究。 


          2.了解信息架構

          可能很多人對信息架構的定義很模糊,這里舉個例子來具象說明一下信息架構的含義。

          例如在一款產品中,如果把所有內容都堆到一個列表或頁面中,可能我們將無法使用這款產品,所以我們看到大多數的App和網站都包含很多的導航和頁面結構,按照內容重要程度有序地來組織內容。

          信息體系結構的最終目標是幫助用戶理解他們在看什么,并幫助他們找到需要尋找的內容。

          信息架構在制作線框圖或原型之前完成,因為它是產品的基礎,有助于設計師考慮什么功能是最重要的,哪些是用戶最需要的以及哪些次要內容可以隱藏起來等。

          這種結構與產品的導航設計密切相關,有助于將用戶引導到正確的位置。導航和信息架構都試圖讓用戶以最少的認知努力來完成操作。


          信息架構的設計不當會造成重大故障甚至可能危及整個產品。如果用戶在使用產品時找不到任何想要的內容,點擊任何元素都沒有反應,會給用戶帶來很糟糕的使用體驗。 


          3.考慮使用場景

          沒有場景,任何設計都很難生效。設計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。


          這條原則有助于設計師考慮還有哪些因素會影響用戶和產品,很多產品設計會為用戶提供一些有助于消除使用摩擦的操作提示。 
          例如在設計表單時,會盡可能的添加 輸入提示,最大程度地減少用戶出錯的機會。 


          4.了解一致性及其重要性

          保持一致性是用戶體驗設計的關鍵原則。擁有一致設計的產品可以更快地被新用戶接受,因為用戶不需要再次學習如何操作,他們會回憶起之前的操作習慣并將其作為指導,這也解釋了為什么同類型的產品例如電商類App頁面設計的很相似。

          保持一致意味著在需要時可以重復使用某些UI組件,并在整個產品中保持一致的行為。例如當點擊或懸停在按鈕上面時,所以按鈕的狀態應該是一致的。


          從邏輯上講,產品越大,這種一致性會變得越來越有挑戰性,這促使許多設計團隊創建自己的設計系統。一款產品的學習曲線越長越陡,放棄的用戶就會越多,在市場營銷中,這通常被稱為銷售漏斗中的漏洞。 


          5.給予用戶適當的控制權

          這條原則意味著用戶希望能控制產品,無論是完成任務還是定制滿足他們需求的內容。

          在設計過程中一直試圖給用戶盡可能多的控制權,例如允許用戶撤消操作、更改設置、自定義UI外觀、創建快捷方式等中。


          需要注意的是,當提供太多選項或用戶太依賴于自己的選擇時,用戶可能會不知所措,造成所謂的 選擇悖論。所以在設計時要了解用戶樂于掌控的余地,不能讓用戶感到使用壓力。 


          6.把可用性放在首位

          在整體上看,建立高標準的可用性是為用戶做的最好的事情,有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作。


          可用性的重要之處在于要理解可用性的靈活性和重要性。 


          7.了解用戶測試

          結合可用性的概念,我們還要進行用戶測試,這是設計師對工作進行測試的方式,對新的產品來說至關重要。

          當設計思想和理念被轉化為有形的原型時,設計師要觀察真實的用戶是如何與之交互的,可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現。


          測試通常分幾輪進行,團隊在向原型添加更多細節之前驗證每個步驟。隨著測試結果的出現,設計也隨之發生了變化。 
          如果發生更改,將會進行新一輪的測試,通過這個過程,設計團隊可以改進他們的工作,直到達到可用性標準。 


          8.少即是多

          在創造力和創造獨特事物的渴望中,很多設計師很容易無意中弄亂產品界面甚至產品本身。

          功能過多的產品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊,但也會給用戶帶來負面體驗,在設計時要學會克制并優先考慮真正關鍵的部分很重要。


          另外手機端的屏幕空間非常小,創建一個有效的布局,想出巧妙的方法來隱藏次要元素并創建一個令人愉悅的界面需要付出很大的努力和創造力。 


          9.視覺層次

          視覺層次是向用戶傳達產品中元素重要性的方式。良好的層次結構有助于用戶視線在界面上移動,并立即了解最重要的內容以及這些內容與其他部分的關系。

          視覺層次結構與布局設計緊密相連,幫助用戶消化所接觸到的信息。


          創建層次結構從概念的草圖開始,一直持續到完成設計。例如發送按鈕通常會用綠色而是不紅色,而次要按鈕會顯示為灰色或與背景混合,并顯示“撤消”或“返回”。 


          10.了解用戶的心智模型

          為用戶創建心智模型是嘗試使用同理心的一種方式,是幫助設計師從用戶的角度看待問題的工具。

          正確使用意味著用戶無需投入精力就可以使用的直觀產品,而錯誤的思維模型會導致一些問題,例如界面混亂、高昂的交互成本。


          為了匹配用戶的心智模型,可以采用多種不同類型的研究方法,常見的方法包括 卡片分類、決策樹、對用戶行為的密切觀察,或者使用大量的數據來建立關鍵用戶的心理模型。 


          11.設計中的講故事

          講故事的方式更加直觀,利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設計中的視覺敘事是為了喚起用戶的情感,給用戶留下持久的印象。


          想出一種可視化的方式來傳達復雜的內容具有挑戰性,但同時也是有益的,可以更好地接近用戶并將其作為提高產品可學習性的方法。 


          12.不要直接跳到高保真原型上

          高保真原型是設計項目的最終目標,但是直接使用原型軟件不斷添加各種頁面細節是錯誤的操作。


          避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下,一款產品無論具有多少的細節都有可能面臨不符合用戶使用的情況。 


          13.可訪問性測試很重要

          不僅要檢查關鍵用戶是否可以流暢地使用產品,還應該檢查其他所有用戶例如少數群體等是否都能夠正常使用產品。


          事實上,殘疾人和其他用戶一樣需要數字產品,但很多產品在設計時并沒有考慮到這些群體,但這也提供了一個機會,為所有用戶提供一個可以依賴的好產品。 


          14.熟悉并在用戶體驗設計中使用

          我們知道為用戶提供一致的設計有助于克服學習曲線,同時為用戶提供熟悉的東西也有助于縮短學習曲線。

          例如,大多數用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕),這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

          使用用戶已經熟悉的東西并不一定會讓產品的獨特性消失,有經驗的設計師會利用這種熟悉性來來創造一些獨特的設計,同時也是直觀的,不需要太多努力就可以使用。


          設計一個完全不依賴熟悉度的產品可能是具有風險的行為,因為它很容易讓那些不熟悉產品的用戶超負荷,形成巨大的學習曲線,增加用戶負擔。 


          15.了解交付成果的力量

          可交付成果是可以在整個團隊中交付的內容,包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等,是一種有形和具體的表現。

          可交付成果是用戶體驗設計原則,可以幫助設計團隊和其他利益相關者理解和交流概念。

          ▲ 用戶畫像可以捕捉理想用戶,并提供可以相關聯的真實面孔,是一種指導設計的工具。用戶旅程圖幫助設計師了解用戶完成任務需要的具體步驟,有助于確保這些步驟確實可以輕松執行,并且整個過程很流暢。


          這些交付成果服務于關鍵功能,設計師需要在整個項目中都依賴它們,不斷轉換為用戶可以與之交互的真實有形的設計。 


          16.專業的原型設計工具

          用戶體驗設計的過程不是線性的,而是一個循環。無論創建什么樣的產品,都需要專業的原型工具,將基本框架放在一起,然后添加可能需要的所有細節。


          從邏輯上講,設計團隊的具體需求會因團隊而異,但一些關鍵功能例如團隊協作、需求管理、交互設計和開發移交等,對于大多數團隊來說是必要的。 


          17.精心管理產品需求

          一切都從收集需求開始,然后慢慢創建關鍵列表。雖然簡單地列出一個列表聽起來很容易,但隨著項目的進展,要保持列表的條理性確實是一個挑戰。


          除了創建需求和檢查復選框之外,還有一個問題就是調整需求,需要從 設計、技術和業務各個方面來處理各種需求,還要確保這些需求之間沒有相互矛盾。  


          18.了解移動和網絡產品之間的差異

          網頁端和移動端產品最明顯的區別是屏幕尺寸,這意味著所有的視覺層次結構和信息架構都將將從Web到App發生變化。


          移動端產品會有更多影響設計決策的因素,例如設備的操作系統、使用產品的環境等。了解移動端產品在 導航設計、用戶流程等關鍵方面的差異是至關重要的用戶體驗設計原則。 


          19.利用UX設計模式

          幾乎所有的產品都專注于設計模式,它們可靠、易于查找并通過減少設計時間來為項目增加實用性。


          ▲ 當用戶在谷歌搜索中輸入的內容有問題時,谷歌會提供一個相關的搜索提示,輔助用戶進行精確地搜索,解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內容的問題。 


          20.使用合適的工具才能有效

          擁有單一的內容來源可以為團隊帶來清晰性和高效性,如果線框和原型分散在多個渠道中,這種內容的集合就會變得很難達成。


          通過合適高效的工具能夠避免產品在到達終點時遇到各種各樣的可用性問題,防止產品細節沒有表現出來或者被忽略。 


          最后

          通過這份用戶體驗設計原則的合集希望能夠讓你對這個領域有一個大致的了解。

          沒有人知道用戶體驗設計在未來會引領我們走向哪里,不過我們可以確定,無論它帶給我們什么,肯定都會很有趣。

          慢慢來比較快,希望對你有所幫助~

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

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

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

          騰訊公益小紅花火爆全網,背后的設計思維是什么?

          ui設計分享達人

          今年是騰訊發起99公益日的第七個年頭。騰訊公益不僅在配捐機制、產品體系、企業聯動、公益基礎建設上全面升級,還連接數億網友、近萬家慈善組織和愛心企業,為全民公益交出一張漂亮的成績單:

          數據顯示,小紅花互動人次超1.25億,送小紅花、答公益題目等行為公益實現破圈傳播,億萬愛心網友共同領取了超9000萬朵助力小紅花,共計有超過6870萬人次在99公益日期間捐出35.69億元,加上騰訊公益慈善基金會的6億元資金支持,共募得善款41.69億元。

          99 公益日為何能實現破圈傳播,作為騰訊公益日和 99 公益日的品牌符號,小紅花的設計背后又傳達了怎樣的思考?今天就來聊聊小紅花那些事。



          2015年9月9日,騰訊公益聯合國內數百家公益組織、知名企業共同發起了中國第一個互聯網公益日。

          為了讓用戶了解互聯網公益的核心特色與參與方式,讓更多的人參與到互聯網公益中,第一屆 99 公益日的活動主題定調為“一起愛”,在logo的設計中也借用了“無限”符號表示“愛無止境”的含義。


          在前三年的 99 公益日中,募款額度得到了廣度上的增長,在用戶已經了解到互聯網公益低門檻、多形式、透明度、可記錄的特點之后,如何留住用戶,對互聯網公益形成日常習慣和持久投入,就成為了設計亟需解決的問題。

          “小紅花”是騰訊公益平臺在2018年給出的答案。因為小紅花作為國人的集體回憶,關聯著你我兒時從老師那里收獲到的鼓勵。每一朵小紅花背后,是我們完成的一件“好事”。

          延續小紅花的記憶線索進行延展,在公益中,小紅花是對用戶的捐贈給予的最大肯定,是受助者正在發生的改變。在傳播上,小紅花是記錄用戶每一次公益行為的符號,通過「戴小紅花,一塊做好事」而得到成就感的有效激勵。

          于是,2018年99公益日的主視覺上,無數的愛心化為花瓣,匯聚成一朵小紅花,這是小紅花在騰訊公益平臺的初次綻放。



          為了讓品牌有延續性,加深用戶對小紅花和99公益日的認知,小紅花作為核心品牌元素開始貫穿在每一年99公益日的主視覺中,并通過不同的畫面故事表達每一年的主題。

          比如,2018年的主題是積小善,成大愛,于是在設計中,讓很多愛心小花匯聚在一起,讓小的愛心變成大愛;2019年的主題是一塊做好事,通過每個人的善意匯聚成小紅花……



          在2019年,“小紅花”正式成為騰訊公益與99公益日的品牌符號。



          從2020年開始,小紅花開始發力于傳播,聯動外部品牌 IP 如QQ、微信、Bilibili、狐妖小紅娘等開啟推廣,在各種不同的場景,詮釋“一塊做好事”的內涵。

          這一年,小紅花之歌火了,同名神曲MV播放量超1億次;在線下,小紅花也開到喜茶等連鎖品牌的店里。

          而2021年,屬于用戶獨特的小紅花愛心賬戶上線了,用戶在騰訊公益平臺做好事打卡,向好友發起集小紅花的自發傳播,從而爭取更大的配捐額,在增強用戶捐款積極性的同時,撬動更多用戶了解并參與到活動中來。


          小紅花愛心賬戶


          用戶還可將積累的小紅花兌換周邊禮品。在推廣上則從創作入手,發起共繪小紅花的活動。



          可以說,小紅花串聯起了用戶從感知、到行動、到反饋的全流程,保證了用戶參與互聯網公益的動機和動力。

          在預熱推廣階段,騰訊公益推出一支小紅花為主角的宣傳片,試圖為小紅花是什么,做出來自官方的定義。

          不管是線上線下征集用戶繪制的小紅花,“每個人的小紅花”畫展,還是在感恩日隨證書送出的小紅花畫作,都讓用戶全方位地感受到騰訊公益小紅花的“玩法”,也為小紅花元素賦予了豐富的內涵。

          征集到的部分小紅花作品


          寄出公益榮譽證書


          愛心用戶的開箱視頻


          99公益日期間,小紅花與騰訊新聞、微保、騰訊視頻、騰訊會議等多產品的玩法聯動,讓小紅花開遍“地球村”。


          多款產品聯動一塊做好事


          而在線下,小紅花也伴隨系列廣告,落地在線上下,IP聯盟、異業合作、核心城市燈光投影秀等,讓小紅花無處不在。


          部分城市地標燈光投影秀


          最后,小紅花這一品牌形象的成功,不僅在公益設計這一領域上有借鑒的意義,在品牌IP的設計上同樣有值得學習的地方。

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

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

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

          為什么越簡單的設計越說不出理由

          ui設計分享達人

          常見場景


          設計師日常工作中,經常遇見的那些顯而易見的設計邏輯,卻難以給出設計理由的情況到底指的是什么呢?


          以我自己近期的工作為例,不妨為大家舉個簡單的例子:


          下圖是一個補貼規則的設置流程,在用戶未設置補貼規則之前,明確告知用戶還未設置補貼規則,當用戶設置了補貼規則后,可以對補貼規則進行修改。



          我認為這是一個非常簡單且合理的頁面路徑跳轉,并且在很多現有的產品中都有類似這樣的邏輯存在。然而在與上下游同學對接的過程中,卻遇到了不同的意見:有人認為沒有必要區分用戶是否設置了規則,用戶未設置規則可以直接展示系統默認的補貼條件和補貼范圍,如果用戶認為不合理,自行修改便是。

          不知道大家看到這里是什么感覺,我在聽到「方案二」時的反應是:能夠理解卻并不認同,說不出來哪里不對,就是覺得這事它不應該這樣。


          以上,就是在我工作中發生的一次非常具體的案例。


          直覺真的不如推理靠譜嗎?


          那么為什么我會產生“感覺哪里不對,卻又說不出為什么”的強烈感受呢?


          最直接的原因是,這樣的設計方案(方案一)是用直覺做出來的,缺少了對方案本身的思考。


          直覺,指的是那些沒有經過分析推理的觀點,因此常常給人一種不靠譜的感覺。


          可是有時候我們依賴「直覺」做事真的就完全不靠譜嗎?帶著這樣的疑惑,我去查閱了一些相關的資料來輔助我更好理解這種直覺性思考,恰好找到了一個真實的實驗案例:


          1997年,Bechara, Antoine et在一個賭博游戲實驗中發現:「直覺」比「意識」更能指引正常人做出有利的的選擇。

          該實驗先后邀請了10名正常人和6名前額葉損傷的決策缺陷患者,以探究人們做出正確選擇是在對相關知識進行推理之前還是之后。在游戲開始前,工作人員給予每位參與者2000美金、發放4副牌,要求參與者在游戲過程中翻出100張卡片,并盡可能的多贏錢,但他們不會告知參與者每副牌中的卡片價值:從A、B兩副牌中翻出正常的卡片能賺100美金,C、D兩副牌中的正常卡片值50美金,同時每副牌中也隱藏著罰款,A、B兩副牌中的罰款比C、D兩副牌的罰款重,參與者很可能會輸光所有的錢。

          實驗結果顯示:正常人在意識到哪副牌贏面更大之前就開始選擇有利的卡牌,而決策缺陷患者即使知道了正確的策略,卻仍然繼續選擇對自己不利的卡牌。


          根據上述實驗,我們起碼能發現直覺未見得不可靠,也就是說,憑借直覺出的設計方案,并不意味著不是一個正確的方案


          可是在日常溝通協作的過程中,「直覺設計」一旦遇到不同的意見,就會缺少理論支撐。決策者無法判斷設計師的直覺是否可靠,從而覺得方案本身也不可靠。


          遇到這種看似「死胡同」的情況,我們應該怎么去思考呢?


          很簡單,直覺在前,策略性推理在后。


          喬納森?海特(Jonathan Haidt),著名社會心理學家,在《正義之心》中有提到:


          判斷和論證是兩個相互分離的過程,直覺與推理的關系就像大象與騎象人,騎象人(推理)騎在大象(直覺)上,騎象人不斷發展以服務于大象。


          拿上述的方案來說,當我面對這類的質疑時,我也會有愣住,但我知道我不能驚慌,而是該讓騎象人(推理)表演了。


          其實仔細分析一下上述案例就會發現,方案一和方案二最本質的區別在于:


          是否需要區分用戶(商家)自行設置過「補貼規則 」?


          百度百科對規則的定義是:


          規則,一般指由群眾共同制定、公認或由代表人統一制定并通過的,由群體里的所有成員一起遵守的條例和章程。


          規則本身是屬于利益相關者之間的約定。按照這個邏輯,「補貼規則」可以理解為用戶(商家)與消費者形成的基本約定。


          用戶(商家)未設置規則,如果系統直接展示默認的補貼條件和補貼范圍,就會給用戶(商家)一種平臺借以商家的名義與消費者形成了約定的印象,這與現實不符,甚至可能給用戶(商家)的業務帶來不必要的紛爭。因此,區分用戶是否設置過補貼規則是非常有必要的。


          為什么要為自己的設計辯護?


          在上述場景中,雖然我的直覺先于理性給我發送了信號,但設計師如果光依靠直覺卻給不出任何說明,同樣會帶來一系列麻煩。


          湯姆·格里弗(Tom Greever)在一篇文章提到,偉大的設計往往取決于你怎么說。


          描述設計不是一件容易的事情,但每個設計師都不得不向很多沒有設計經驗的人講述自己的設計,并且要讓他們信服自己是對的,這群人很可能是方案的決策者。決策者通常會選擇那個聽上去最合理的方案,所以方案的表述對于最終方案的確立至關重要。


          普通設計師和頂級設計師之間的差距不僅僅是他們解決問題的能力,還在于他們能否用一種讓人心服口服、并促使人們同意的方式來闡述他們是怎么解決問題的。理論上,最好的設計應該勝出,然而事實并非如此,設計評審很容易變成設計批判會,每個人都在告訴設計師要怎么設計。


          最終,那些能夠說服別人“我是對的”的人會勝出。設計師如果沒有辦法說服別人為什么他們要這么做,就不得不按照他們不同意的方式去修改設計,原因僅僅是因為他們沒有辦法簡要的為自己的設計辯護


          聽起來似乎這些決策有失公允,甚至成了設計師的辯護大會,那么對于一些有著出色能力卻不善言辭的設計師而言,就真的沒有任何方法了嗎?


          如何突破直覺,能言善辯?


          設計師要想守衛自己的設計,就要警惕那些單憑設計直覺做出來的方案。


          設計直覺的形成與個人經歷、閱讀經歷相關。遇到相似的問題,設計師如果有這方面的經驗固然是好的,直接復用之前的做法可以大大提升設計效率。但我們完成設計后,最好想想哪些地方存在路徑依賴,以確保自己的方案能經得住質疑。


          一個最實用的可以判斷自己的設計方案,是不是由直覺得來的,就是多向自己提問


          同樣,我們來用實際的案例做個說明:


          想想下圖中「智能上傳」「更多操作」按鈕放在表格的左下方行不行?


          很明顯不行,但重點是支持這么做不行的理由是什么?


          如果你的理由是:


          “別的頁面是將按鈕放在了列表左上角的”

          “放在左下角不好看呀”

          “沒見過有產品這么放啊”

          “......”


          那這個方案就是直覺設計的產物了。


          想要突破直覺設計,設計師需要盡可能在每個設計點上多思考幾步,比如:


          為什么別的頁面會將按鈕放在左上角?


          根據2006年NNGroup 在眼動實驗中的發現,人們在網絡中的閱讀成F型,即用戶進入頁面中的第一眼,通常會落在頁面的左上角,也就是說左上方的區域是頁面的黃金區?!钢悄苌蟼鳌埂父嗖僮鳌箤儆陧撁娴暮诵牟僮鳎敲捶旁诹斜碜笊戏绞欠浅:侠淼?。


          此外,我們可以看到頁面的翻頁器是可以篩選列表展示的條數,假設用戶設置的條數,超出了屏幕顯示范圍,也就意味用戶進入到頁面會看不到操作選項,所以按鈕放在表格的左下方也是不合理的。


          為什么別的頁面按鈕放在左上角這個頁面也要這么做?


          因為我們需要保障產品的一致性,產品的核心操作方式保持一致,可以有效地降低用戶的學習成本,避免不必要的思考。


          總結


          在設計協作的過程中,設計師不可避免地會接收到來自四面八方的聲音,而我自己也曾在設計溝通中陷入過類似困境,因此我越發明白只有清晰地表述出自己的設計思考,才可能贏得每個人的支持。


          • 憑借直覺出的設計方案,并不意味著不是一個正確的方案。

          • 直覺在前,策略性推理在后。

          • 頂尖的設計師,也是頂尖的交流者。

          • 要想守衛自己的設計,就要警惕那些單憑設計直覺做出來的方案。

          • 多向自己提問,以確保自己的方案能經得住質疑。


          以上是關于這篇文章的關鍵思考總結,回到設計師個體而言,我認為我們需要對直覺設計保持警惕,因為看似簡單的設計背后往往蘊含著復雜的設計原理,而一個好的設計師除了擁有過硬的設計能力,強大的設計思考力和表達能力以外,我相信同樣在跨學科的研究和學習上會遠強于普通設計師,否則根本無法支撐起背后的設計思考。

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

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

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


          B端設計也“好色”

          ui設計分享達人


          我們需要什么樣的配色方案?


          B端的系統的主色代表著一個系統的氣質,與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案,目的就是期望從它們身上找出共性,引領我們的系統找到最適合的方案,這是知彼。

          光有“知彼”是不夠的,我們還要清晰的知道自己是誰?這樣我們才可以說我們的配色方案是最適合我們的,有理有據的方案。


          B端系統的真正使用人群比較復雜,具有年齡跨度大,文化水平參差不等,從事行業廣泛等特點。



          源于自然之美的色調,突顯靈活性與再生的創意!


          依據彩通色彩研究所專家的說法,紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩,這些色彩的百搭性質穿越季節,容許更多的選擇自由,適于表達原創的風格,也足夠靈活來適應現代新的更片斷化的生活方式 。

          “2021春夏的色調呈現出大自然,強調我們渴望擁有全年皆宜的靈活色彩,這一季的色彩充滿道地真實的感覺,這種感覺對色彩而言愈來愈重要,同時結合了某種程度的舒適與輕松感,并散發出活力,激勵振奮我們的心情”


          說到這里“主題色”如何來選擇?


          色彩對于人的大腦的沖擊力大于造型,比如淘寶,我們會記憶起淘寶的主色是橙色;色彩是影響人類視覺思維的重要因素,色彩能直觀的體現產品的性格和氣質,所以選擇一款適合產品的主色很重要。


          我們的用戶在更替,如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題,新的用戶群體從小接受的教育和喜好決定著產品的發展方向。

          比如:我們這次顏色升級中律動、青春活力是核心關鍵詞,而藍色則可以讓產品視覺符號得到延續。



          對于主題色的選擇指標有哪些?


          通過關鍵詞圖片像素化提取顏色,同時參考B端產品顏色流行趨勢和當年的年度流行色,以及竟品顏色分析結果,獲取藍色的色相、純度、明度范圍。


          2020潘通年度顏色經典藍(19-4052 Classic Blue),顏色值為#174A7B(H207 S81 B48)

          2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver,顏色值為#02569D(H207 S99 B62)


          假設:竟品的主題色藍色的色相范圍為205-225;純度的范圍為70-96,平均值為86;明度的范圍為70-98,平均值為88,B端產品流行趨勢的主色也多是藍色系,色相范圍為200-232;純度的平均值為70;明度的平均值為68。



          色彩的使用范圍及色階有哪些?


          色彩的應用場景包括:關鍵行動點,操作狀態、重要信息高亮,圖形化等場景;針對這些使用場景只有一個色值是不能滿足所有場景使用的,所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級,或傳達信息,或強化界面層級。


          在色彩系統中,常使用 Tints and shades 系統來建立調色板,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板,在符合無障標準的區域,選擇不同明度飽和度的色彩,形成有梯度、有層級的彩色調色板。



          B端產品中光有“主角”是不夠的,還要有“配角” 所以我們還要看一下輔助顏色是如何定義的?


          輔助色是為了幫助頁面區分狀態和層級而設立的顏色,主要包括圖表類儀表盤顏色和功能色,通過合理的顏色傳遞產品正確的信息,讓其信息傳達更明確清晰。


          輔助色的作用是配合襯托產品主色調,在不同的產品中,輔助色運用的策略是不同的,比如我們在竟品調研中發現,輔助色經常是取自主色的鄰近色、對比色和互補色等。


          儀表盤配色:通過對竟品的分析可得知,優秀的儀表盤的配色有多系列及低純度的特點,多系列配色是為了滿足用戶個性化的需求,而低純度是考慮用戶在長時間使用產品,色彩對其心理的影響。


          功能色:這類顏色在系統一般不會隨意更改,而且特定的語義一般都有固定的色相,只需改變其純度和明度,使其視覺上符合主色的氣質,使其搭配和諧。


          1.通過默認主題色選擇輔助色及默認儀表盤顏色

          我們以默認主題色為#467FEA(H 219 S 70 B 92) 為起始點,S(飽和度)、B(明度)保持不變,H(色相)以180°為起點,以15°為增量或減量標準,生成24色色板。這個色板是我們選取輔助色的重要依據。



          以鄰近色、互補色、對比色為原則選擇豐富的顏色


          鄰近色:在色相環中,相差15°的顏色為鄰近色,凡在60°范圍內的顏色都屬于鄰近色的范圍,主色和鄰近色的色系組成的搭配,可以在同一個色調中構建出豐富的視覺層次感和質感,賦予不同的功能含義,信息表達明確,和諧統一感很好,視覺上的趣味性,顏色的搭配顯得很柔和。


          對比色: 在色相環中,角度相差120°-180°之間的色彩,這里使用了120°為角度來選擇對比色。


          互補色: 在色相環中成180°角的兩種顏色,互為補色;主色可以和其互補色的兩個色彩的搭配,該色彩可以為鄰近色,例如:藍色和黃色、橙色的搭配;這種搭配既能保持互補色搭配強烈的對比度,區分關鍵信息,次要信息,又能增加視覺上的趣味性,色彩看上去豐富多彩。


          例如:藍色作為主色,互補色黃色作為輔助色應用在圖表、圖標和標簽上,再選擇黃色的鄰近色橙色作為另外一個輔助色,應用在不同的關鍵信息上,有助于用戶更好的閱讀產品的功能和內容。



          獲得輔助色-9色相


          通過鄰近色、互補色和對比色的選擇,我們從24色色相環中得到了9色相色環,9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。


          校正輔助顏色


          雖然我們保持相同的飽和度和明度,使用科學的方法得到了較為合適的色相,但由于色彩本身自帶感官明度屬性,導致在視覺感受上的感官體驗并不同頻。


          黃色、綠色的明度即發光度較高,藍色就稍微偏暗一些,導致色板看起來不一致,為了讓不同色相看起來更加協調,需要調整色板的明度和飽和度,以保證視覺感官體驗同頻且更加和諧舒適。


          校正后的顏色主要用于功能色和儀表盤顏色。




          從輔助色中提取功能色及儀表盤色系


          通過對竟品的分析總結同時結合默認主題色分析得出的9色色環,歸納分離,最后形成系統的默認儀表盤顏色。


          功能色的目的是明確信息及狀態,比如成功、出錯、失敗、提醒、鏈接等;功能色的選取需要遵守用戶對色彩的基本認知,結合分析得出的9色色環,顏色校正,得出系統功能色。




          輔助色的色階


          為了度量不同的可視化從高到低的數值,我們儀表盤顏色遠遠不夠,所有為了保證視覺上的統一性,我們需要加入輔助色的明度色階來區分數據層級。


          同時我們產品有深色和淺色兩種模式,由于視覺對比的原因,在深色的場景看下看的顏色,和淺色場景下看到的顏色是兩種感受,深色場景下顏色會發亮,所以為了保持視覺上統一,我們也需要加入輔助色的色階。


          輔助色色階建立方法與主色的色階建立方法一致,使用 Tints and shades 系統,通過在顏色上面增加白色,或者增加黑色,來改變它的明度和飽和度,形成同色系的調色板。



          模擬方案一主色、輔助色及消色匯總


          通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶,我們分別給顏色取了名字和編號,命名方式采用植物色彩命名,這也是200多年前顏色數值出來之前的命名方式,最早見于1814 年出版的《維爾納色彩命名法》



          本期交流就先到這里,希望這個配色的思路能夠幫到大家,感謝大家的耐心觀看!

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

          文章來源:站酷  作者:Evan繪酷設計

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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