92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

辭典精譯 | 怎么做響應頁面?柵格系統來幫忙!

鶴鶴

柵格系統知識點 


使用柵格系統很有幫助,它有助于在不同布局之間保持一致性,并加快設計決策的速度。柵格可更地控制不同屏幕尺寸之間的對齊方式及布局。本文重點介紹響應式柵格的重要知識點,以及產品設計師如何在設計工作流中調整柵格。


柵格結構

柵格由3個主要組件構成,包括列、槽和邊距。

列是虛構的垂直塊,用于對齊內容。我們用百分比(%)或固定值定義列寬。


柵格中的列


它是列與列之間的空間,有助于分隔內容,我們將槽的寬度定義成固定值。


柵格中的槽


邊距

邊距是內容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值,該值決定每個屏幕尺寸的最小空間。彈性邊距指的是列,槽和側邊距組成柵格后剩下的空間,它會根據不同的屏幕尺寸而變化。


柵格中的頁邊距和靈活邊距


如何使用柵格設計界面?

信息內容(圖像,文本或UI元素)常常會被放置于可見和不可見的內容塊中??梢妰热輭K具有明顯的邊框或填充區,而不可見內容塊則不具備,多數是透明底??梢姷母讣墐热輭K包括卡片,橫幅等組件。


卡片形式的可見內容塊


不可見的內容塊包括文本或功能按鈕。


內容塊應與列的邊緣對齊,避免與槽邊緣對齊。內容塊中的信息是獨立的,不一定非要與列對齊。


內容塊的列對齊


列結構

用于構成柵格的列數稱為列結構。8、12、16和20是用于響應式布局的一些最常見的列結構,設計師可以根據設計要求選擇具體結構。


8/12/16/20列柵格結構


12列結構是最靈活的,它可以進一步分解成為4–4–4或3–3–3–3大小的內容塊。


響應點

當屏幕尺寸到達響應點,那么頁面布局也會有對應更改,以實現最佳的布局視圖。列結構,列寬,槽寬度和邊距都取決于響應點。內容塊則根據不同的響應點堆疊或縮放,以重新調整獲得最佳視圖。


柵格縮放和堆疊


如果較小的屏幕具備足夠空間來呈現,其實縮小比例就能展示完整了。如果屏幕實在是太小,就會垂直堆疊成一列。


柵格的呈現類型

柵格有3種呈現形式,一起來看下吧!

固定柵格

固定柵格有固定寬度的列以及頁面邊距,且固定的柵格具有固定的內容塊寬度,該寬度在響應點范圍內不會出現變化,并且頁面邊距會占據剩余的空間。


固定寬度柵格


流動或全寬柵格

流動柵格列的寬度是不定的,但槽和頁面邊距都是固定的。流體柵格具有靈活的內容塊寬度,該寬度根據屏幕大小來變化。流體柵格中,列會隨著可用空間變大或是縮小。


流動柵格


混合柵格

混合柵格同時具有流動寬度和固定寬度。在現代布局中,一些元素會完全脫離柵格。常見的例子比如頁眉,頁腳,或是出血的圖片內容塊。


混合柵格


如果內容塊寬度大于可用的屏幕尺寸,則固定柵格會轉變為流動柵格來適應屏幕。


如何在原型制作工具中設置柵格系統?

電腦視窗

不要以1440×900、1600×900或1920×1080等高分辨率進行設計。1280×800是電腦端內最小的分辨率,以1280×800設計的流動與固定寬度的布局都可以適應更大的屏幕。


固定寬度柵格設置

要設置固定寬度的柵格,我們對槽和列都應固定好數值。建議設置列寬為74px、槽寬32px以及16px的邊距。


固定寬度柵格設置


列寬74px、槽寬32px可以生成1240px的內容塊寬度(不包括兩端的16px側邊距),最大化的利用了可用屏幕尺寸。在不同的響應點,固定內容寬度大于當前屏幕尺寸時,則固定寬度柵格開始變為流動柵格。


流動柵格設置

要設置流動寬度柵格,對槽使用數值,對列使用自動計算的值(以%為單位)。


流體布局柵格設置


流動柵格利用整個屏幕尺寸作為主要內容的寬度,每側留出16px的側邊距。


移動視窗

在移動端使用流動柵格,槽和頁邊距的寬度推薦設置成16px。因為移動設備的屏幕分辨率較小,若再分成12個獨立的列、槽和邊距的話,設計起來也會很麻煩。


移動端的流動柵格設置


因此,我們將3列中的每列合并以創建4個粗列,從而使布局柵格既簡潔又方便,快速對齊。


平板視窗

平板設置柵格的方式與移動設備非常相似,推薦槽寬和邊距分別設置為32px與16px,可以在768×1024大小的畫板上為平板設計界面。


平板電腦流動柵格設置


將12列優化成6列,讓柵格清晰明了,谷歌的材質設計曾建議使用24px寬的槽與頁邊距,實際應用時,不妨都試下看哪個效果更好。


布局樣式

柵格布局的變化決定了主要內容的結構,針對不同的布局要求,使用不同的柵格系統,而頁面中的內容塊數量決定了頁面布局的變化。


單列布局

單列布局或全寬布局,是著陸頁和首頁的風格之一。還可以合并12列來創建一個單列內容塊,也可以將12列分配到父級內容塊中。


一級頁面常應用單列或全寬柵格布局


雙列布局

該布局有兩個內容塊。通常,其中的一個內容塊會占據比較多的區域進行信息展示。



在雙列布局中,列要么分布在9–3或8–4父級內容塊中,其中的一個組合列區域,用來創建主要內容。帶有單個邊欄的界面是兩列布局的常見呈現形式。


三列布局

三列布局具有三個內容塊,主要內容塊占據最大的展示區域,在三列布局中,列分布在3–6–3或2–8–2父級內容塊中。


固定寬度的側邊欄布局

固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應點范圍內固定,剩余空間由固定寬度或流動寬度的內容塊占用。


側邊欄固定布局


移交開發

在原型工具中,設計布局和編碼有很大的不同。代碼可以合并列或將其堆疊,比如合并12列以創建單個列布局,或將12列分布到一組,用來創建不同布局變化的內容塊。在原型設計工具中設計布局時,你需要確保開發人員清楚了解電腦端,移動設備和平板設備上設置的列寬、槽寬及邊距。像Bootstrap,Zurb Foundation等開發軟件,其中對柵格值的設置會有出入。


自定義柵格


設計師可以多嘗試不同的柵格值設置,以找到最適合自己的呈現形式。如果交付開發的時間非常緊急,請使用文中建議的數值,更保險也不會出錯。


文章來源:站酷   作者:UX辭典

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

通知系統的設計規則 | 深度解析

鶴鶴

本篇文章從通知模塊的組成部分,到通知模塊的設計規則,進行了一個詳細的講解,幫助讀者更好理解對于通知的設計。

我們通過門鈴聲兒得知門外有人來訪,也能通過電話鈴聲得知正被人呼叫。短信通知也有著類似的作用,包括各類產品的消息推送。


但不同的是,消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大,包括短信現在也大多是垃圾信息。


而且,通知越來越多地通過各種方式去觸達用戶。比如消息未讀的紅點提示,或者顯示消息的數字統計,以及手機使用過程中的頂部提示與聲音或震動的提醒,等等。


但我們還是無法抑制點擊圖標的沖動,這僅僅是因為它具有未讀的計數或紅點提示,即使我們已經知道當中的內容并不重要。


而我要說的是,當通知內容變得次要且被濫用之后,它仿佛成了一種違背設計原則的功能 —— 中斷用戶當前行為。因為它打破了用戶與產品之間的層級關系,破局至產品之外來吸引用戶的注意力,這是一個非常打擾的行為。如果我在看書,突然收到一條并不重要的消息,那我一定會非常反感。


所以,為了不被「紅點」支配,以及不讓通知所打擾,我會把手機里所有產品的消息推送都給關了。


但是,以上內容并不能說明通知的無用論。同樣有許多用戶還是沉迷于通知的使用上,它所控制的是用戶對于某個產品的控制欲,擔心錯過某條消息,就好像我在豆瓣寫了篇隨筆,就想看別人給我點贊評論的消息,但我又不可能一直盯著,所以通知這時候就起到了一個很好的作用。


以至于對于優秀的產品人或設計師,包括運營來說,利用好通知,就能掌握用戶心理,巧妙的將用戶留在產品中。它們甚至有助于與打算放棄產品的用戶建立聯系并促進互動。


那么,我們應該如何更合理的設計通知呢?下面我們通過「通知的組成部分」以及「通知的使用類型與規則」來詳細做一次拆解。


通知的組成部分


關于通知的簡單定義:它是一種吸引用戶注意的功能模式,讓用戶獲悉新事件的信息動態。產品將其發送給用戶并與用戶產生交流。


因此從這個定義中我們可以知道,通知有兩種形式,分別是被動只讀型和操作反饋型。


被動只讀型,是指該信息可讀,但不可進行操作;操作反饋型,是指用戶可對該通知進行操作,如某寶訂單支付成功后的地址信息確認通知。


所以在梳理組件的時候也要注意掉這個差異。


1.消息中心

這里的消息中心,是一個信息匯總中心,但并不一定是信息來源。意思是,信息來源可能是有很多用戶在你的文章下面點贊了,而這個點贊行為被匯總到了消息中心,再用消息中心指引作者去到文章頁面查看具體詳情。


所以它是一個匯總表。但也有可能它就是信息來源點,比如一些系統通知,告知要升級,因為它沒有其他功能可承載,所以只會在消息中心里出現。


或者類比 iOS 系統的通知中心,如果通知是 App 推送的,那么它會指引用戶進入某個 App;如果通知是系統行為,如勿擾模式,「6:00 前來電和通知將會靜音」這個通知,是只可在通知中心進行操作的。想要更改,就需要手動打開設置。


2.通知指示符

它可以是點,也可以是計數器,只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數人養成強迫癥的罪魁禍首。


3.信息標題

它主要是指該信息來自于誰或屬于什么子類型,比如用戶互動點贊消息,評論消息,系統消息等等。用戶可以通過標題來獲悉該信息類型,再通過內容摘要來判斷內容是否重要。


當然,這里的摘要如果過長,就需要省略處理,引導用戶進入消息源或消息中心。


4.推送時間

推送時間是一個看起來簡單,實際上也好像不是很復雜的邏輯。只要說明該通知的發送時間即可,但是需要注意的是時間段問題。比如幾分鐘前,幾小時前,幾天前,這里的邏輯是按照時間推進規則持續增加來告知用戶該消息的推送時間節點的。也就是過得越久,時間概念就越大。


5.通知圖標

上面講到消息類型,我們也經常會在各類產品中發現不同通知的類型會匯總在各自的類型下。包括用戶所接收到的信息,通常也會告知用戶該信息屬于什么類型。有時候,標題可能會更細,但是用戶通過圖標可以判斷該信息屬于什么類型,甚至都不需要仔細查看標題與內容。


但是,并不是所有產品的信息都可以通過圖標來判斷,有時候圖標只是一個大方向,如果手機鎖屏,相對于用戶來說,這條通知只是告訴用戶該信息是由什么產品推送,而并不能指向至該產品的什么類型的信息。所以在使用的過程中,同樣需要根據業務的場景,謹慎地選擇圖標。


6.閱讀指示器

它就像是上面提到的紅點,這里指的是進入 App 的消息中心之后,所顯示的內容。


7.操作行為

這里的操作行為分兩種,分別是 App 外與 App 內,它們之間的操作邏輯是不同的。iOS 系統通知的清除操作,只是在系統的通知中心將該信息清除,進入具體 App 后,這條消息還是會存在。而在 App 內刪除該條信息,則該信息才會真正消失。


所以從上面可以看到,通知推送,是有兩大類別的,分別是 App 外與 App 內,它們之間的邏輯關系與展示形式會有所差異,需要根據具體情況進行設計分析。


8.小結


對上面的內容進行總結,可以得到這樣一幅畫像:

大部分系統或產品的通知組成,都可以通過此圖概括,唯一不同的是,它們會隨著不同的業務而發生變化。


比如豆瓣的推送消息告知用戶近期有新的電影上映,那么通知來源要么是電影模塊的功能詳情頁,要么是通知中心的系統消息;而通知類型就是內容更新;詳情則根據具體內容來組合排列;最后送達至用戶。


而其中的差別就是,如果是通知中心推送的,用戶點擊之后則是進入通知中心列表。如果是具體功能推送的,那么用戶點擊進入的就是具體功能頁面。如下圖所示:

從這里可以看出,通知是有具體模式的。


一旦確定了通知的主要目標,以及想要解決的問題,包括它們如何對業務產生作用以及對用戶形成吸引力,就可以確定通知的具體樣式了。


在這一節里只要知道通知的組成部分與通知模式如何指引用戶進入 App 即可。后面我來帶大家理一遍邏輯,以及在設計通知時要注意哪些問題。


通知的使用方法


聊完上面的內容之后,我相信大家對通知的組成與使用模式已經有了全新的認識,但也僅此而已,我們還是不知道一個優秀的通知功能應該從哪些方面去提升用戶體驗。這里面所包含的不止是表象,還有內在的規則邏輯。所以從這一節開始,我們仔細來梳理一遍。


從我們平時使用到的,以及上文提到的,可以大概先梳理出幾類常見的通知類型。


1.用戶信息類通知


這種類型的通知有很多,比如微信消息發送,知乎私信,手機短信等等,它們主要由用戶主動生成發送至其他用戶被動接收,作用就是促進用戶與用戶之間的互動關系,以提升用戶使用產品的頻率與時長。


這種通知,可給予用戶操作也可不給予操作,不操作就是讀取,并回復;操作就是可對該用戶的信息進行屏蔽、已讀、刪除等設置。


這是最常見的通知類型,在多數社交產品與有社交特性的產品里都能看到。


說明


之所以給予用戶信息的操作行為,是因為用戶信息可分為感興趣的與不感興趣的,它主要取決于人。不感興趣的人,頻繁的發送信息,會影響用戶對產品的好感度,畢竟有很多用戶消息并不是用戶想要接收的,所以在社交產品里,用戶可刪除好友,或拉黑好友;在有社交屬性的產品里,用戶可拉黑賬戶,以達到不被騷擾的訴求。

如果沒有到達刪除好友的程度,也可對該好友的信息進行屏蔽,甚至對該好友信息做已讀而實際上未讀的處理;或者對重要信息做未讀而實際上已讀的處理。


當然,用戶還能對群消息做更復雜的設置。這就是產品對這類通知的一種優化方式。


2.系統推送類通知


我們經常會在手機上收到一種系統類通知,或者在 App 中也會收到類似的系統通知。大多是關于系統升級,密碼更新等。


這類通知多數是用戶被動接收,且對于系統與用戶來說是較為重要的。當然也有不重要的,比如 App 更新說明的通知,告知用戶新功能有什么變化,或系統更新了什么等等。


對于這類通知,用戶大多無法進行設置,因為它們比較強制,沒有可以商量的余地,類似于告知用戶:我們有新的消息,比較重要,你來看看,即使你不打算更新或執行也來看下。


說明


系統類通知,通常來說較為被動,要么強制用戶執行操作,要么就是提醒用戶系統近期做了更新,或者是一些并不重要的信息提示,比如勿擾模式。


強制類系統通知不能頻繁,否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產品需要對產品享有控制權,現在反而被產品控制了。這是不行的。


3.通用推送類通知


這類通知就是第一節中提到的那些,比如點贊/評論,內容更新等等,這類通知如果是忠實用戶,那么或許不會反感它的頻率,當然還是需要適當。但如果是普通用戶,那么造成的影響就是直接關閉該 App 的所有通知。


我們現在的很多人,之所以開始反感通知的主要原因,就是這類通知所造成的。內容不斷更新,隨著時間的推移,每天推送多條對于該用戶來說無用的通知。包括只適合一些符合條件的用戶參與的活動通知也推送給所有人,那么用戶就會逐漸對這類產品的通知失去興趣,造成無法彌補的損失。


即便像某團一樣,經常彈出開啟通知的彈框,也依然無法召喚回用戶。這就是很典型的下場。


說明


通用型通知,如果是業務很復雜的產品,就必須建立通知推送的功能模塊,給予用戶進行選擇接受哪類信息的權力。允許用戶進行相應的設置,如活動類推送可拒絕接收。


在很多產品中都已經置入這樣的推送模塊設置,如下圖。

這類內容就是針對于產品的具體業務進行細分。


比如興趣精選,私信消息等做好類別劃分。用戶可對自己感興趣的通知做選擇性的推送接收。


另外就是,在相同賬戶的不同設備之間,推送應該同步推送與被處理。不能這邊推送了,那邊沒推送,或者這邊處理了,那邊沒被處理。


4.智能推送類通知


不知道大家是否有印象,在使用如大眾點評等產品時,只要你切換了城市,產品就會推送通知告知用戶該城市有哪些值得游玩的景點與品嘗的美食。


雖然這類通知還算不上多少智能,但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知,因為用戶可能會想不起來通過哪類產品來查找附近美食。當這么一條通知出現的時候,正好解決了用戶的問題,反而提升了用戶對于產品的好感度。


現在很多產品的通知都逐漸智能化,不會像以前那樣,三更半夜發來一條無關緊要的通知。而出現這類問題的主要原因還是在于產品、設計、運營,在這方面沒有下過功夫,只將通知作為一種普通的工具來使用。導致用戶開始排斥通知,將其強制關閉。之后,就很難再讓用戶開啟了。同理心效應,當做這類功能的時候,可以回想一下自己是如何被其他產品打擾的。


隨著大數據的發展,我相信未來的通知系統會更加全面,且能做到千人千面的模式,不過在此之前,各位產品設計師,還需要對通知下一番功夫才是。


5.小結


我們還可以繼續舉例說明,但是基本大同小異,所以到這里為止,我再對上面的內容做一次總結,梳理出一個好的通知應該是如何設計的。


干擾最小化:通知本身具有強制性和干擾性。它的目的是把用戶的注意力吸引到產品上來,所以要認真思考發送通知的內容、時間、頻率;不要提醒用戶當前屏幕上已經處于展示狀態的內容;也不要推送與用戶無關的系統信息。


跨設備:當用戶讀過了某條信息,這條信息應該不再做展示。同理,用戶也應該能夠在其它更適合接收消息的設備上找到已讀信息。用戶通知應該在所有設備上進行同步。


允許設置:允許用戶在「設置」中禁止或調整通知的形式。如案例一,通過選擇推送內容,來影響接收推送的頻率。案例二,可選消息提醒的形式是紅點+數字,或僅是紅點。

時效性:良好的通知應盡可能實時推送。而不是等這件事情都過去很久了,才推送給用戶知道。


支持匯總:把同類型的通知合并為一條,并顯示信息未讀數量。也可以考慮一鍵展開通知,顯示信息詳情。


可操作性:把通知和操作結合在一起,讓用戶不需要打開首頁就能對特定通知進行常規操作。操作應該清晰明了,且僅在未重復默認操作時提供。同時操作應該是有意義、實時、和內容對應的,并且能讓用戶完成某個任務。如案例一,可以在不打開郵件的情況下,直接對通知進行管理、查看和清除。案例二中的操作針對的是未讀郵件,可便捷地在通知板面進行回復、刪除、標為已讀或垃圾郵件。

小結


對本篇文章的拓展總結:

1.通知具有召喚屬性,但是頻率過多就會變成打擾,所以要注意通知的頻率與內容重要性;

2.設計師或產品經理應該將通知的內容分類梳理出來,以便維護或新增必要需求可能需要用到的推送信息。

3.通知一般為兩種類型,一類是推送只讀型,一類是操作反饋型;設計師需根據不同類型的通知做好對應的設計,針對具體問題具體分析;

4.想要利用好「通知」,也需要對業務有詳細的了解,再代入本文所列舉的注意點,就可以設計出一個體驗更佳的通知模式。


通知規則不會脫離本篇文章的范圍,所以只要詳細研讀,必會有所收獲。


轉自:站酷-呆總丶

ui組件系列之文本框和表單設計

鶴鶴

當你在設計表單時,是否對文本框和表單的規則有疑惑?本文的一些簡單的規則將幫助你完成設計用戶希望完成的表單。

上圖是表單的發展歷程,由石刻上的表單到紙質表單再到電腦上輸入的表單。印刷式的表單已存在多年,我們可以從其設計中學到一些技巧。


一、文本框剖析

文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對話框中。文本字段組件設計應為交互提供明確的可見性,使字段在布局中好發現,填充且容易理解。



這些是基本文本字段的重要元素:


1.容器-可交互輸入文本的區域

2.輸入文本-輸入文本字段

3.標簽文本(標題)-告訴用戶給定表單字段中屬于什么信息

4.占位符文本-是所需信息的描述或示例,在用戶輸入文本后會被替換

5.幫助提示或驗證文本(可選) -提供其他上下文或驗證消息

6.頭部圖標(可選) -描述文本字段所需的輸入類型

7.尾部圖標(可選) —對輸入的文本的附加控制,例如清除,隱藏/顯示等


二、文本框類型

它們大多數基于基本文本框,為了更好地展示特定類型的信息而做的演變,例如輸入信用卡號的文本框。以下是我們創建的整個UI中最常用的輸入類型的一些示例:

三、使用恰當的輸入框類型來收集數據

為收集的數據提供正確的文本框類型,將幫助用戶以正確的格式輸入信息,并避免錯誤,從而使填寫過程盡可能簡單。

四、文本框需要根據狀態和用戶的交互來及時變化外觀

可以通過提供視覺上的變化來傳達文本框的狀態。輸入文本字段可以具有以下狀態之一:未激活,懸停,激活,禁用,校驗,報錯。大家在做表單設計時最好的做法就是遵循這些狀態的變化,不要挑戰已經形成的用戶思維模型。

五、選擇最佳的文本框樣式

通常,文本框的標題有三種常用的位置可選擇:頂部,左側對齊和右側對齊。采用哪種樣式將取決于表單的主要目標和表單的大小,組件庫以及要設計的平臺。它們各自具有一些優點和缺點。

我已經根據大型設計研究的研究結果進行了匯總,最開始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是,同一項研究表明,用戶更喜歡帶有圓角的輸入。

(1)標題左對齊

當用戶不熟悉所要填寫的內容時,這是一個不錯的選擇


優點:標題易于拓展;充分利用垂直空間

缺點:標題和相應的輸入內容之間的距離過長,而且不一致的距離會增加文本輸入的完成時間

(2)標題右對齊

與左對齊的標題相比,完成時間快將近兩倍


優點:文本的標題和輸入內容的位置更緊密,減少了了眼睛的運動次數,從而縮短了完成時間

缺點:難以快速掃描表單并了解所需的所有信息

(3)標題頂對齊

這是在大多數情況下最快的時間和最全面的選擇。在移動端上效果很好,因為它們不需要很多水平空間。


優點:能夠讓用戶單一眼球移動即可了解輸入標題和輸入文本,能夠更快的完成

缺點:需要更多垂直空間

六、文本框的長度應與預期的用戶輸入內容長度成比例

為表單中的所有文本框都使用相同的輸入長度會使它們在視覺展現上令人愉悅,但是卻很難完成填寫。

七、占位符文字不能替代標題

輸入信息后文本框內占位文本的消失,會對用戶的短期記憶產生壓力。沒有標題,用戶將無法在提交表單之前檢查他們提供的所有信息。如果您需要極簡的表單設計,則可以使用“Material design”浮動標題的方法。
表單內的占位符文本有時會使用戶感到困惑,最好在字段外使用提示文本。


八、幫助用戶填寫表單

  • 使用自動完成功能幫助解決部分查詢功能,在用戶的輸入框中,用戶可以按Enter或“右箭頭鍵”使用它。

    使用自動聯想值搜索相關的關鍵字和建議使用的內容列表。列表以下拉彈層形式顯示多個建議列表。

    預填充字段并使用智能默認值。通常,您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據最常見的方案進行分析,我們一般可以定義默認情況下應選擇的內容。

    提供上下文信息。為了用戶做出正確的決定或避免錯誤,用戶在進行轉帳時將需要一些其他信息,例如帳戶余額,如果能夠從上下文中獲取這些信息,就請及時給出。

    九、使用實時校驗

   “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性,而不是在用戶提交表單時一次性檢查全部輸入:

  • 驗證消息顯示在靠近輸入的區域,并一起顯示

  • 不要太過于激進的方式提示錯誤消息,應該告訴用戶如何解決問題,而不是責怪他們

  • 當字段在用戶完成輸入之前就被標記為無效時,請避免“提前驗證”

  • 考慮使用“正向校驗”,可以增加一種愉悅感和成就感

十、讓表單看起來更簡潔

(1)減少字段數

   它將消除視覺和認知負擔,并且看起來更簡單。

  • 不要將全名和日期之類的文本分成多個字段

  • 不要多次詢問相同的信息

  • 使用標簽和提示復制以盡可能地縮短它

(2)隱藏不相關的字段

  我們僅展示基本要點,通過逐步顯示信息的方式來幫助用戶管理信息的復雜性,在用戶需要的時候再展示出來。比如加個開關按鈕把不重要的信息隱藏。

(3)使用條件邏輯

使用條件邏輯能夠根據用戶的答案,自動顯示或隱藏某些字段,并可以在表單中t跳過頁面。這種方法不僅可以減少字段數,而且可以使填寫過程更具個性化和對話性。



(4)相關字段打組

簡化復雜表單的最簡單方法之一就是開始對相關字段進行分組。格式塔心理學中有多種分組原則,可以使項目感覺相關:接近度,相似度,連續性,閉合性和連通性。將數十個非結構化字段分組為幾個可管理的集合將顯著提高表單的可用性。

(5)將復雜的表單分為幾個簡單的步驟

有時即使刪除了所有不必要的內容,某些表單也會很龐大。將大型任務分解為一系列較小的任務看起來容易得多,并促使用戶將填寫過程進行到最后。

  • 顯示步驟條,以視覺方式傳達用戶的進度,這可以提高滿意度并激發用戶繼續填寫的動力

  • 不要過于細化表單,太多的步驟將無濟于事,只會惹惱用戶

  • 對關鍵信息進行匯總以減輕用戶的焦慮,最后需要進行復查

(6)避免使用多個列布局

一列布局為用戶創建了一條清晰的完成路徑。使用多列表單布局的后果包括:用戶跳過他們實際要輸入數據的字段;將數據輸入到錯誤的字段中;或者只是想暫停一下而可能導致放棄。


十一、讓用戶沉浸在表單填寫,盡量少的顯示表單外的功能

如果表單足夠大,可以分成多個步驟,則應該為它分配一個單獨的,清晰明確的空間。顯示常規導航或任何會破壞表單填寫過程的鏈接/按鈕,只會造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。

十二、顯示恰當的鍵盤類型

Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在促進不同類型的輸入。為了簡化數據輸入,在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型。注意鍵盤將出現的位置。為了避免不必要的頁面滾動,請將文本字段放在上方區域。


十三、停止荒謬的密碼創建設計

  • 允許用戶取消隱藏密碼,而不是要求他們輸入兩次密碼,這對于生成密碼的應用程序也將更有效

  • 始終顯示密碼要求,并顯示用戶在滿足填寫條件方面的進度。嘗試簡化對用戶的要求

  • 使用強度計量條以鼓勵用戶創建更強的密碼


    文章來源:站酷     作者:ZZiUP

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


輕量化設計總結

鶴鶴

「輕量化」是近兩年來設計圈一個比較火的話題,什么是輕量化?從字面意思上來看「輕量」的反義詞就是臃腫、拖沓,反映到產品設計中就是界面內容過載,操作步驟繁瑣。如果非要用一個字來定義,那就是“多”,內容多,步驟多。


我們需要清楚,“多”來自于用戶的主觀感受,我們無法給出一個具體的數據指標來判定到底是不是“多”。用戶會在什么時候覺得多呢?日常生活經驗告訴我,當對方覺得你沒用的時候,你就會顯得多余。如果這個界面中的每一個功能對于用戶來說都是高頻操作,那么用戶是不會嫌多的。所以「輕量化設計」的主要思路可以歸納為:在用戶不需要你的時候不要出來瞎得瑟。


場景


問題來了:用戶什么時候需要我?首先我們應該從功能層面入手,因為產品是一個個功能的組合體。頁面內容臃腫問題的源頭是功能過載,在這個問題上,很多設計師吐槽自己扮演的是一個背鍋俠的角色。其實我也不想在這個頁面里塞這么多東西,但是這些功能我們必須展示給用戶啊,要不然用戶都不知道還有這個功能。


要解決這個問題,我們需要引入「場景」的概念。什么是場景?我們可以將場景理解為「外部環境」。


外部環境影響用戶的感知,感知決定了用戶的行為。只有身處于特定的場景,用戶的行為才會被觸發。在有網場景下,用戶啟動網易云音樂,進入的是首頁。在無網場景下,用戶進入的是我的音樂。因為有網,用戶“聽新歌”行為的可能性更大,無網聽已經下載好的歌曲。


功能也是一樣,用戶需要這個功能,但并不是每一個場景都需要這個功能。有些比較冷門的功能,用戶只有在特定的場景才會想起使用,那么我們就可以只在那個特定的場景中展示該功能。


我們看一下兩款競品的歌曲播放界面,我們可以很明顯的發現,酷我音樂的界面更加簡潔明了。當然你可能會說,那是因為酷狗音樂給用戶提供了更多的功能。

undefined

其實并沒有,兩款產品提供的功能都是一樣多的。只是酷我音樂做了場景化區分,以K歌功能為例,酷我音樂的處理方案是:當用戶點擊查看歌詞的時候才會展示“K歌”的話筒圖標,因為當用戶查看歌詞的時候,提醒引導用戶去K歌更加合適。


undefined

這個方案的確可以簡化界面元素,但是也帶來了另一個問題:如果用戶不查看歌詞,那就不知道原來還有k歌功能,無法給K歌功能做到有效的引流。的確如此,沒有一個完美的設計方案,任何一個設計方案都無法做到可以兼顧各方的利益。設計師的作用就是盡可能去發現和解決界面中最主要的矛盾點,而不是所有的矛盾點。


我們再來看一個歌曲播放界面的例子,現在很多產品都提供了AI電臺功能,所謂AI電臺就是根據你的聽歌記錄,分析你的喜愛,據此來給播放你可能感興趣的歌曲。我們之前聽歌需要手動搜索相關信息,在搜索結果(歌曲、專輯、歌單等)里查找。AI電臺的出現大大節省了用戶的操作步驟,那么我們來思考一個問題:與常規的場景相比,在AI電臺里播放的歌曲,界面上我們應該做哪些改動?


undefined

AI電臺模式最大的區別就是隨機性。因為這歌是根據你的喜好隨機推薦的,你不知道會聽到這首歌,也不知道這首歌后面有哪些歌。這個就導致了播放模式這個功能很雞肋,蝦米音樂的AI電臺就沒有提供切換播放模式功能。


1 列表循環 :我都不知道列表里有哪些歌曲,怎么循環?


2 隨機播放 :現在不就是隨機播放嗎?


3 單曲循環:這是唯一一個用戶有需求的場景;


其實AI電臺推薦的歌曲也是有歌單的,用戶點擊播放列表圖標就可以看到。這里提供了切換歌曲模式的功能,讓用戶看到了播放列表才可以選擇歌曲模式。


undefined


入口


當我們確定了功能的最適用場景,我們接下來的任務就是如何合理的設計功能的入口。


1)入口分類


不同的層級的功能,在界面中的展示方式是不一樣的。這里我們可以分為三類:常態類、更多類和隱藏類。


比較重要的功能一般都在界面中有常態的入口,而優先級比較低的功能,我們會選擇使用臨時視圖來承載,入口放到“更多”類按鈕里,用戶需要點擊才能查看。


undefined

優先級的功能在界面中沒有實體的入口,需要用戶的手勢來觸發。例如,在抖音中,用戶長按視頻可以喚起三個功能:保存、收藏不敢興趣。這三個功能抖音做的如此隱蔽,就是希望用戶不去使用。


undefined

1 保存:為什么保存到手機看?來抖音看吧


2 收藏:既然喜歡這個視頻,為什么只收藏不轉發一下,讓更多人看到


3 不感興趣:emmmm


2)入口分類


哪怕是同一個功能,位于不同的場景,我們也要對入口樣式做出調整。例如,在音頻類產品中,為了方便用戶在不同的場景都可以快速的進入播放界面,會在界面底部加上播放條。


undefined

但是我們也可以發現上圖中企鵝FM播放條的空間利用率很低,有大面積的留白。那么到了二級頁面,我們可以嘗試修改播放條的樣式,減少對界面內容的遮擋。


undefined

類似的處理方式還有淘寶,當用戶在首頁下滑一屏左右,那么底部欄原首頁圖標變成了火箭,用戶點擊火箭可以直接返回至頂部,不用額外新增一個浮動按鈕作為入口。


undefined


總結


以上就是我個人對于「輕量化」設計的簡單思考和總結,如果您有不同的意見或者看法,歡迎留言或者加群討論。

轉自-站酷

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

不要讓我思考: 20 句可用性設計名言

高勁

編輯導讀:想要做好一個設計師,就要多研究優秀人士的作品,取長補短?,F在互聯網的發達,很容易就能在網上找到相關的學習資料。本文以史蒂夫·克魯格的名著作為引入,分享20句關于界面可用性設計的名言,希望對你有幫助。

設計,以及許多其他領域,都是建立在優秀專業人士的作品和發現之上的,每個想要成為某個領域專家的人經常尋求指導來學習如何把事情做好。專業導師的各種書籍和文章現在都可以在互聯網上免費閱讀,讓努力學習知識的人很方便的找到。

我們經常會分享來自數字設計領域最優秀專家的名言和睿智的想法。你會在邁克·蒙泰羅(Mike Monteiro)所著《設計是一項工作(Design Is a Job)》里找到有關設計的短暫洞察,奧倫·沃特爾(Aarron Walter)的《為情感而設計》(Design for Emotion)以及排版大師埃里克·斯皮克爾曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我們要分享的是史蒂夫·克魯格(Steve Krug)的名著《不要讓我思考(Don’t Make Me Think)》中的一組引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合時代發展,符合實際需要。史蒂夫·克魯格為界面可用性設定了一些基本原則,并與該領域的專業人士分享,這使得本書成為 UX 設計師推薦的最重要的資源之一。

可用性第一定律——“不要讓我思考”描述了關于網站可用性的要點、案例和見解。創造不需要用戶過多思考的界面設計,不僅可以解決問題,而且易于使用。這里有 20 句名言,反映了“不要讓我思考”的一些關鍵點。

1、如果某件事需要大量的時間投入——或者看起來會這樣——它就不太可能被使用。

2、讓每一頁或每一個屏幕都不言自明,就像商店里都有良好的照明:它會讓所有的商品看起來更好。訪問一個不需要我們思考的網站會讓人感覺毫不費勁,相反,為不相關的事情多花心思會浪費我們的精力、熱情、還有時間。

3、無用的客套話(“happy talk”)都是一種沾沾自喜的宣傳,你可以在蹩腳的小冊子里找到。與好的宣傳文案不同的是,它沒有傳達任何有用的信息,它一個勁的說我們有多棒,而不是描述是什么讓我們這樣棒的。指示說明必須被消滅。

4、可訪問性(Accessibility)非常重要,它不僅僅是正確的做法,而且是非常正確的做法。關于無障礙訪問,如果沒有引起足夠的重視,你就無法意識到,它能顯著的改善一些人的生活。僅僅通過把工作做得更好就能顯著改善人們的生活,這難道還不夠厲害嗎?

5、另一個讓人困惑的來源是那些看起來不太明顯的鏈接或者按鈕。作為一個用戶,我永遠不應該花哪怕一毫秒的時間來考慮這些東西是否可以點擊。

6、最近幾年里,讓產品更加易用成為幾乎所有人的責任?,F在,視覺設計人員和開發人員常常要做交互設計(決定用戶單擊、按下或滑動時下一步會發生什么)和信息體系結構(確定應該如何組織所有內容)之類的事情。

7、可用性(Usability)就是確保讓一個能力和經驗一般(甚至低于平均水平)的人,能夠想出如何使用并完成任務,而不必費事。相信我:事情就是這么簡單。

8、可用性是有關人們如何理解和使用事物,而與技術無關。

9、關于指示說明,你只需要知道一點就夠了:除非“蒙混過關”多次嘗試失敗,沒有人會去讀它們。

10、你越仔細觀察用戶,并傾聽他們明確表達他們的意圖、動機和思考過程,你就越會意識到,他們對網頁的個人反應是基于許多變量的。試圖用一維的“喜歡”或”不喜歡”來描述用戶是徒勞的,而且會適得其反。另一方面,好的設計會考慮到這種復雜性。

11、那些設計網站的人并不在乎讓事情變的明顯和容易,這會削弱我們對網站及其背后公司組織的信心。

12、然而在現實中,大多數時候我們不會選擇最佳選項,而是選擇了遇到的第一個合理的選項,即所謂的“滿意”(satisficing)策略。

13、大部分的網頁設計問題(至少是對重要的那些問題來說)都沒有一個簡單的“正確”答案。有效的答案是那些運作良好的、滿足需求的綜合設計,它們往往經過了仔細思考,良好的執行和測試。

14、刪掉每頁上一半的文字,然后把剩下的再刪掉一半。

15、設計師喜歡微妙的線索,因為微妙是復雜設計的特征之一。但網絡用戶通常都很匆忙,經常會錯過這些線索。

16、如果你在設計了很多不同的網站之后只發現一件事,那應該是:幾乎所有的設計理念——無論一開始多么糟糕——都可以通過足夠的努力,在合適的環境下變得可用。

17、你的主要職責應該是分享你所知道的,而不是告訴人們應該怎么做。

18、你的目標應該是完全刪除說明文字,讓每項內容不言自明,或者盡可能做到這一點。當說明文字絕對必要時,把它們減少到最少。

19、和遵循慣例去設計相比,設計師們面臨很大的誘惑去重新發明輪子。很大程度上是因為他們覺得自己被雇來是要做一些新的、不同的事情,而不是做原有的舊事情。更不用說,來自同事的贊揚、獎勵和高級職位很少是基于“最好地利用慣例”這樣的標準。雖然少數時候,在重新發明輪子上花的時間足以制造出新的革命性滾動設備,但通常情況下,這只是浪費時間而已。

20、如果你想要一個很棒的網站,一定要測試。因為你在這個網站上工作了好幾周,已經失去了新鮮感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是測試它。

 

文章來源:人人都是產品經理           作者:Alina Arhipova


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

如何產出一個對實際落地更有指導性的的設計分析

濤濤

設計分析是作為交互設計師必備的一項基礎能力,一套有效的分析思路可以幫助我們找準設計發力點,更效率的推導出合理的設計方案,它是一種思維能力,也是一種方法工具,但是在我們的實際項目中,常常會遇到這樣幾種場景:

  • 新手設計師或者第一次做活動的設計師,設計分析不知道要如何入手

  • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

  • 分析過程中發散了很多很好的點,但最后大多都落不了地

這些情況常常會導致設計分析流于形式,套用了很多方法、花了很多時間、輸出了很長的文檔,內容看上去似乎很豐富,但落地的方案卻平平無奇,甚至也會自我懷疑設計分析真的有用嗎?

總結下來,會出現這些場景的原因有兩點:首先是設計分析太泛,沒有聚焦到核心問題;其次是時間分配不合理,沒有抓到發力重點。那么結合我們目前的項目來看,怎樣做一個更有用的設計分析呢?

活動中常見的項目類型

根據活動產品化設計思路,可以把我們的日常項目分為兩類:迭代型項目以及探索型項目。

迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經比較固化的經典業務,或基礎的功能類業務;探索型項目則是一些全新的業務方向,例如下沉會場、直播會場等等,剛處于進入期或成長初期。

undefined

如何完成一個有效的設計分析

1. 迭代型項目

迭代型項目容易陷入的一個誤區是時間分配不合理,沒有抓到發力重點,尤其是對于很多新手設計師來說,往往大部分的精力花在重復之前已經做過的內容,比如花了很多時間重新去分析用戶、分析方向、分析行業趨勢等等,但是對于已經比較穩定的迭代型項目來說,這部分背景內容相對來說已經比較固化(除非有明顯的變化),這就可能會導致重復分析出來的結論跟之前的差別并不大,也很難帶來實際業務提升。

undefined

既然迭代型項目過往已有過經驗和策略的沉淀,也經歷過多輪的數據迭代,核心思路應該是先定義要解決什么問題、然后才是如何解決,這樣才能找準關鍵發力點。

要解決什么問題

首先要思考是不是真的有問題,沒有問題的項目也可以不用再花時間做分析,效率做即可,例如像全部會場,本身的業務模式就比較簡單,過往的效果也相對比較穩定,如果不考慮進行突破性的創新,通常是可以效率復用的,這種時候則不需要再去做分析,畢竟也要考慮投入產出比。

那么怎么定義要解決什么問題呢?有三個常用的思路:看數據、看用戶反饋、看運營策略。

第一,從數據分析中找到關鍵問題,例如根據618的項目數據復盤,我們發現預售會場、品牌會場的頁面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進行分析,從而推導出更有針對性的設計策略。

undefined

第二,根據用戶反饋來找到關建問題,例如過往的主會場,用戶調研一直都會反饋主推樓層太長而找不到感興趣的內容,那么可以圍繞“如何更好的進行需求匹配?”“如何提升屏效?”來思考和分析,解決實際存在的問題,才更有可能提升體驗和數據。

undefined

第三,結合運營策略,很多業務雖然已經相對穩定,但隨著每次大促戰略的變化,運營策略上也會有一些新的需求,那么就根據這些差異化的訴求去找到發力點。例如針對我的專屬會場,在原會場定位不變的情況下,在近兩次大促中運營側都提出需要由這個會場來承載平臺服務內容曝光的訴求,那么服務內容如何匹配“專屬”會場的用戶心智,則是這個會場可以重點解決的問題。

undefined

如何判斷真正有效的解決方案

在定義清楚核心要解決的問題后,就可以按照常用的設計方法進行方案的推導,在發散解決方案的過程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們設計分析有價值的關鍵,因此總結了兩個常用的技巧。

首先要理解業務邏輯,減少無用的策略發散,很多時候我們的方案很難推動落地的原因,是沒有考慮到業務的訴求,越能夠深入的了解業務,才能更好的解決業務側的顧慮,保證方案的可落地性。

其次是要跳出來從整體來看優先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節,有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關注到整體優先級,因此要學會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

2. 探索型項目

探索型的項目沒有過往的參考依據,相當于需要從零開始去探索如何做,對于設計分析的能力要求會更高,那么常常容易陷入兩種極端相反的誤區,要不就是容易被方法論套路,設計分析過泛但得不出實際有價值的結論,要不就是完全沒有頭緒,屬于想一步做一步的類型,分析的內容之間缺乏邏輯。

undefined

因此,探索型項目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過程一樣,需要先定義交互框架,縱再進行交互細節的打磨,才能夠保證設計效率及效果。

確定分析框架

確定分析框架的過程主要分為兩步,一是先想清楚要分析哪些內容,包括哪些環節是必要的,哪些是重點的,時間要怎么分配。例如當我們第一次做寵物品類活動時,需要對這個品類有深入的理解,因此我們在前期需要去分析養寵人群的特征、寵物行業的發展現狀、京東寵物貨品的優勢等內容,而如果我們做的是一次大促的綜合會場,其主要用戶群體如果跟常規站內主流群體并無差異時,則不需要再花費大量的時間單獨去分析用戶畫像,因此,需要結合項目情況先想清楚需要分析的內容、以及這些內容的必要性和優先級。

undefined

第二步是梳理清楚內容之間的邏輯關系,常見的邏輯結構有兩種,一是遞進式的推導(A→B→C),分析維度之間是先后關聯的,通過嚴謹的邏輯步步推導而來,例如先梳理用戶畫像、才能進行用戶行為痛點的分析、進而推導解決方案;另一種邏輯結構是進行綜合歸納(A+B→C),即通過幾個不同的維度綜合推導,例如經典的五導家分析方法,結合用戶目標以及業務目標綜合推導出設計目標。

undefined

在很多設計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應用。以下是根據我們日常項目梳理的一些常用分析框架。

undefined

縱向深挖如何得到有價值的策略

有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

首先,策略要足夠具體、有差異化,盡量避免提出過于籠統的結論。例如針對如何提升流量利用率比較泛的策略就是要進行流量精細化運營,這個大的方向沒有錯,但如果只到這一步是很難指導具體內容落地的,所以需要細化到流量的渠道有哪些、這些渠道有什么樣的特征、針對不同的渠道用戶可以用怎樣的內容吸引他們,才能夠更準確的判斷是否會存什么問題。

其次,策略最好能夠關聯驗證指標,可以參考UGD數據增長思路,在推導策略時要能預判它能帶來哪些數據指標的提升,以保證設計分析的結論是有理有據的。


文章來源:站酷    作者:大蔥設計


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

設計師如何構建認知體系

濤濤

文章來源:站酷    作者:兔子大吉


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

地圖基礎知識及通用設計原則

濤濤

Part 1. 地圖的發展

地圖作為記錄地形傳遞路線信息的載體,在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術的發展而變化,從石板、動物皮革,到絲綢、紙張。當互聯網走進千家萬戶,地圖也步入電子化時代。

相較于紙質地圖,電子地圖優勢顯著:更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖(后文簡稱地圖)的出現也影響著人們的出行方式,尤其當智能手機普及,我們可以隨時查詢地點、發起導航,再也不需要提前記下高速出口和轉向路口了。

Part 2. 地圖在滴滴的重要性

滴滴擁有網約車、代駕、騎行、公交、自駕導航等眾多業務,是一站式出行平臺。而地圖作為承載出行服務的重要載體,橫向支撐著各業務線的發展。以網約車業務為例,調研結果顯示絕大部分乘客都會關注并使用地圖。

隨著各業務線對體驗的要求不斷提升,單一的地圖模式已經不能滿足業務訴求及用戶需求,需要進一步細分場景、精細刻畫地圖樣式,于是地圖的設計也變得愈發重要。

滴滴出品!地圖基礎知識及通用設計原則

Part 3. 解構地圖

地圖承載的信息種類復雜、數量巨大,初期可能會找不到設計切入點。我們可以先了解下它的定義和實現方式,或許就能從中找到答案。

定義:地圖是依據一定的數學法則,采用地圖語言,經過制圖綜合來表示地球表面的圖形。

實現流程:

  • 采集真實世界的地點信息,經過編譯轉化成數據
  • 數據信息中包含了地點的坐標、分類、名稱等
  • 數據經過渲染形成可視化雛形地圖
  • 雛形地圖經過設計最終變成策略完整、視覺美觀的電子地圖。

滴滴出品!地圖基礎知識及通用設計原則

結合“從雛形到完整地圖”這一步流程的實現方式,進而可將地圖拆分為基礎層、策略層和感官層。幫助各職能角色找到對應切入點。

  • 基礎層,指的是地圖的數據和能力。數據大家已經有所了解了,能力指的是引擎渲染能力、定位能力、圖像識別能力等。有了數據及各類能力作為基礎,才能設計出信息精準、交互明確的地圖。
  • 策略層,則指的是如何使用這些基礎數據和能力。地圖數據量非常龐大,無法全部展示,需要結合不同的場景及用戶需求,有重點的呈現。
  • 感官層,便是我們給數據穿上的衣服,會根據品牌調性、對應場景訴求等去設計最終的配色、圖標等。

滴滴出品!地圖基礎知識及通用設計原則

解構地圖后,我們不難看出,感官層是設計側需要關注的重點層級。

Part 4. 地圖設計原則

1. 元素分類

面對如此復雜的地圖信息,為了梳理出清晰的思路,我們會對地圖元素進行分類:根據數據的類別和呈現狀態,可拆分為點、線、面三類元素。

  • 點元素:地名、POI*等。數量龐大,是城市規模的體現,尤其POI信息,它是地圖中顆粒度最細的位置信息。
  • 線元素:道路、地鐵線、水系線、鐵路線、航線、邊界線等。線元素呈現了道路的走向、區域的劃分等,描繪出了城市的樣貌。
  • 面元素:陸地、草地、湖泊海洋、AOI*。面元素以色塊形式出現,很大程度上決定了一張地圖的色調。

名詞解釋:POI, Point of Information的縮寫,即“信息點”。一個POI可以是一棟房子、一個商鋪。

名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區域狀的地理實體,如醫院、小區等。

滴滴出品!地圖基礎知識及通用設計原則

2. 核心設計原則

從定義可以看出,地圖是一種特殊的圖形語言,是以上所有元素的集合體。相比我們所了解的UI設計、運營設計,地圖有屬于自己的設計原則。以下為大家總結了一些核心的原則:

符合制圖學和公眾認知

地圖發展到現在已經成為了一門學科,我們會發現即使語言不通,拿到一張地圖時也能看懂,這是因為有制圖學和公眾認知在規范著地圖設計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知,大大降低了用戶的學習成本和記憶負擔,使地圖可以作為一種世界通用語言流通起來。

保證識別度

地圖屬于信息類工具,其上出現的元素均需清晰可識別,保證可讀性是最基本的設計原則。所以在設計時會限制顏色對比度、最小字號等,而具體規則會根據場景確定。

清晰有層次

地圖的層次清晰包含了兩個方面:信息主次清晰,視覺具有整體性。

信息主次清晰,地圖信息龐雜,沒有主次關系會影響用戶的讀圖效率。在設計時需要考慮元素本身的特點、重要性,可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關聯性,不同元素有差異性。同時,信息主次也會根據比例尺的變化有所調整。

視覺具有整體性,在滴滴的業務場景中,地圖通常作為最底層組件出現,上層還會有很多業務組件。因此在設計時需克制用色,既要保證地圖中各元素之間的區隔度,又要保證地圖整體與其他業務組件拉開視覺層級。這樣才能更好的突出當前業務模塊的重點,提升整體的使用效率和體驗。

細分地圖模式

地圖在各業務模塊中應用廣泛,用戶需求也不盡相同,設計時需要根據使用場景區分不同模式。以網約車場景為例,業務信息始終處于上層,地圖用來幫助用戶定位、快速發單。因此,網約車場景的地圖整體性強、色調偏冷、視覺層級后退,能更好的搭配網約車模塊的整體設計,保證用戶的操作效率。

滴滴出品!地圖基礎知識及通用設計原則

具有品牌特性

品牌調性一直是滴滴設計層面非常關注的原則,品牌基因貫穿了所有產品,始終具有獨特的視覺風格。遵循品牌的視覺語言,使地圖可以更好的融合到產品中,保證了設計的統一性。

文章來源:優設    作者:CDX創意設計中心


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


設計師要懂的原子設計(AtomicDesign)理念

高勁

“我們不設計頁面,我們設計構成元素的系統。”——Stephen Hay 

原子設計理論并不是什么高大上的規則。

隨著網頁設計的持續發展,我們認識到開發設計系統(design system)的重要性,它最早就是為了讓網頁設計師更容易理解網頁的構成,后來才延伸到UI設計當中。


簡單來說,當公司的業務產品逐漸擴大時,我們需要制定一套完整的設計系統,提升設計和開發的協作效率,統一所有設計師的輸出物。 開始設計系統的制定時,大部分設計師可能都會先去網上找到大廠現成的設計系統,當拿到他們的成品的時候,會把自己的產品進行拆解和借鑒,這的確能快速解決問題,但是如果不理解其中的組織規則和邏輯,只是借鑒他們現成的設計系統,只能了解個大概,知其然而不知其所以然。因此,原子設計理論的出現就是為了幫助我們去搭建設計系統,這套理論已經逐漸被國外一些大廠應用于創建統一和富有層次的設計系統。

原子是所有事物的基本構成物質。每一個化學元素都具有不同的性質,并且它們一旦被分解就會失去其意義。

分子是由兩個或兩個以上的原子通過化學鍵結合在一起的。這些原子的組合具有自己獨特的性質,并且相較于原子來說,更具實際意義和可操作性。
有機體是由分子有機地組合在一起的。這些相對復雜的結構可以從單細胞生物一直到像人類這樣難以置信的復雜生物體。 


 宇宙中的物質都可以被分解成為原子元素。

碰巧的是,我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。

△Josh Duck的“HTML元素周期表”

接下來和大家細聊一下什么是原子設計;原子設計到底好在哪里;為什么要有設計系統;以及該如何利用原子理論創建自己的項目組件庫。

原子設計(Atomic Design)理念最早是由國外網頁設計師Brad Frost提出的,他從化學元素周期表中得到啟發,發現原子結合在一起,可以形成分子,進一步形成組織,從科學的角度來講,在宇宙中的所有事物都是由一組有序的原子組成。

Brad將這個概念應用到界面設計中,仔細觀察后我們不難發現,界面其實就是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

 

通過原子設計,我們可以把界面看作是一個連貫的整體,同時也是一些元素的集合,每個元素都不盡相同,互相結合產生更多層次和結構,模塊之間相互統一。說到底,原子設計其實是一種設計方法論,它由原子、分子、組織、模塊和頁面共同協作,由此創作出統一和富有層次的設計系統。 

簡單來說:原子結合在一起,形成分子,進一步結合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。

原子設計是一種方法,由五個不同的階段一起工作,以更慎重和更具層次的方式創建界面設計系統。從而創造出更有效的用戶界面系統的一種設計方法。

它的五個不同階段是:

原子(Atoms):為頁面構成的基本元素,例如標簽、輸入框、文字、顏色等;
分子(Molecules):由原子構成的簡單UI元素,例如按鈕;
組織(Organisms):相對分子而言,較為復雜的構成物,由原子及分子所組成;
模板(Templates):以頁面為基礎的架構,將以上元素進行排版;
頁面(Pages):將實際內容(圖片、文章等)放置在特定模板內;

 

原子設計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面,讓我們更深入的了解每一個階段哦~

原子

如果原子是物質的基礎組成部分,那么我們用戶界面的“原子”就是那些構成我們用戶界面的基本構件了 。在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線等。 


在團隊開始新項目時,為了保證各個頁面具有統一的設計風格,我們會制定一套簡易的視覺規范,在關鍵的設計元素上,各個設計師達成一致,這樣就能很大程度保證不同頁面的風格統一,并在這個基礎上去探索更有創新意義的設計方案。

 


在模式庫中,原子一目了然地展示了所有的基本樣式,當你回來繼續開發和維護你的設計系統時,這是一份很有用的設計參考指南。

分子

分子是原子組合建立的元素,兩個原子即可組成一個分子。

在界面中,分子就像是一個由UI元素組成的相對簡單的組織。例如,搜索框里的文字和圖標共同打造一了個搜索表單分子。

 


 以按鈕為例,它的組成元素包含了文字、色塊、圖標和柵格。合并后,這些抽象的原子從毫無關聯到又一個共同的目的,圖標和文字互相配合傳達意義,顏色定義了按鈕的特性,柵格為按鈕定義了一個尺寸和規范。

 


將單個元素組裝為簡單的功能組是我們一直以來構建用戶界面的方式,可幫助UI設計人員和開發人員堅持單一職責原則,這種方式簡單且復用性高,可以保證界面具有良好的可用性。

以界面設計中的表單為例,表單是一個非常常見的設計元素,一個表單分子是由文字、圖標和線條原子組成。這些原子合并后,得到的是一個可以應用在任何信息展示或者功能入口的組合。

 

組織

組織是由分子或原子或其它有機體組成的相對復雜的UI部分 。這些組織組成了界面的不同部分。

通過結合分子和原子,我們可以構建更復雜和可擴展性的模塊,這個稱之為組織,其實也可以稱之為組件,這些組件組成了界面的不同部分。同樣以表單為例,一個表單我們可以通過數量的組合,以及間距的調整,元素的增減,在界面中表達不同的場景和含義。從建立分子到建立更精細的組件,這為設計師和開發人員提供了重要的內容構建思路。

 

組件在解放設計師生產力方面有著重要的作用,我們可以把界面中常見的組件進行分類整理,如搜索、表單、圖片和卡片等,這些常用組件基本能滿足日常的設計需求。以Aribnb為例,他們主要分為3類:卡片、表單和內容。每個標簽內容的設計形式盡量都保持統一,因此負責不同內容模塊的設計師只要選擇同一個組件就能完成頁面的設計。在短時間內就可以完成頁面超多的復雜項目,極大的提升了團隊的設計效率。

 

在網頁端最典型的例子就是網站導航,搜索表單,我們幾乎訪問的每個網站都會看到這些類型的組件。 

模板

原子,分子和組織的這種語言有助于我們有意識地構造設計系統的組件。但是,最終我們必須采用一個更適合描述我們最終產出的語言,這樣才好匯報給老板、客戶和同事,簡單來說就是說人話。

 

模版的本質就是線框圖,在這一步我們基本可以看到一個產品的形態。我們可以不斷調整組件和分子組合在一起的效果來嘗試不同的方案,找到一個相對合適的方案。模版的意義就在于可以專注于頁面的內容結構布局,而不是頁面的最終內容,此時模版內容是隨時可以調整的,嘗試不同的方案,在多個模版中進行對比,在這個階段改動和溝通保證了成本。因此,模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。

 

模板是頁面級別的對象,它將組件放置在布局中,并顯示設計的底層內容結構。在設計一個有效的設計系統時,必須在布局的環境中展示組件的外觀和功能,以證明這些部件組成了一個功能良好的整體。

 

模板的另一個重要特征是它們專注于頁面的底層內容結構,而不是頁面的最終內容。設計系統必須考慮內容的動態性質,因此,把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。

頁面

頁面是模板的具體實例,填充了真實的內容(圖片、文字等)后形成頁面,也就是常說的「視覺稿」,將占位符替換為有代表性的真是內容,使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的視覺方案。

 

頁面階段是原子設計中最具體的階段,由于一些眾所周知的原因這個階段非常重要。別忘了,這可是用戶在訪問你的界面時會實際看到和交互的內容。

除了演示用戶所看到的最終界面之外, 頁面對于測試底層設計系統的有效性是必不可少的 。在頁面階段,我們可以看到當將真實內容應用于設計系統時,所有這些模式如何運作。所有的一切看起來都很棒嗎?如果答案是否定的,那么我們可以回過頭去修改我們的分子、生物體和模板,以更好地滿足我們內容的需求。

 

頁面還提供了一個表達模板變量的地方,這對建立強大而可靠的設計系統至關重要。以下是模板變量的幾個例子:

用戶在其購物車中有一個商品,另一個用戶在其購物車中有十個商品。
網頁APP的儀表板通常顯示最近的活動,但是該部分對于首次使用的用戶是禁用的。
一篇文章標題可能是40個字符長,而另一篇文章標題可能是100個字符長 

在所有這些例子中,底層的模板是相同的,但用戶界面將會隨著內容的動態性質而改變。這些變化直接影響了底層分子,有機體和模板的構建方式。因此,創建解釋這些變量的頁面有助于我們建立更具彈性的設計系統。


 這就是原子設計!這五個不同的階段同時協同工作,以產生有效的用戶界面設計系統。


原子是最基礎的UI元素,并且是可以用作界面的元素構建塊;
分子是用于形成相對簡單的UI組件的原子集合;
組織是形成界面各個部分的相對復雜的部件;
模板將組件放置在布局中,并演示設計的底層內容結構;
頁面將真實內容應用于模板,設計出視覺稿,并最終成為開發落地的依據;

 

原子設計為制作設計系統提供了清晰的方法??蛻艉蛨F隊成員通過實際的設計流程與步驟,能更好的去理解設計系統的概念。原子設計使我們能夠從抽象的設計中過渡到具體的設計中來,因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。


通過模塊化的設計系統調動組件,可以使我們開發新的產品時,從開始就可以對產品進行嚴格的把控與一定程度上的控制,進而規避了事后風險。開發之前不確定好系統模塊化,毫無邏輯的去開發,開發到一半發現功能與需求對不上等問題逐漸產生,會導致產品的延期、人員成本的浪費、資金成本的增加,產品的迭代率的下降、進而影響市場先機與市場占有率。 

原子化設計與原來的樣式庫設計思路不一樣,原子化設計從抽象到具象,從元素到組件,讓設計師從底層開始思考,對整個設計會有更清晰的理解。同時也能讓設計更加統一,在新增組件的時候更謹慎。

原子設計的原理可以保證任何一個設計組件的構成與開發構建組件一一對應。同時應用原子設計的設計軟件(e.g., Sketch, Figma)可以給新設計師足夠的自由滿足需求變通,并且可以保證同一個設計組件的更新會覆蓋到任何一個使用這個組件的設計中。 

原子設計為我們提供了一些關鍵的見解,幫助我們創建更有效、更深思熟慮的UI設計系統。

那么、 


如果產品規模小只需要1,2個設計師,大概率是前期不需要大費周章搞一個需要開發配合的設計系統??梢灾焕肧ketch或者Figma做一個像貼紙一樣的設計組件庫。但是功能多了怎么辦,公司來新人了,當新設計師產出后就會發現與原設計師設計的風格不一樣,慢慢發現整體設計風格不統一了,只靠一個簡單的組件庫很難能滿足新功能需求,新功能貼紙上沒有設計或者設計需要變通,又或者是新設計師忙著交工忘記檢查自己新組件和已有組件的異同。

 

這時候就會需要一個設計師領頭去重新整理設計系統,走查發現同一個正文所用的十幾個不同字號,又或者是十幾個透明度不同的灰黑色字體,所有組件跟現有上線產品對比整理好后一并交給開發,開發再一一整理代碼庫。

設計系統(Design Systems)對于很多年輕設計師可能十個新名詞,但是設計規范和組件等我們應該還是有一定認知的。在設計的過程中,我們會被其影響。在我們日常所使用的App產品中,如Apple、Google、Airbnb、Uber、滴滴等,他們的產品體驗非常流暢,用戶使用產品時能夠地滿足需求,在其良好的體驗背后都有著一套強大的設計系統做支撐。


為什么需要設計系統

 

1、團隊協作,體驗一致。以滴滴為例,雖然只是一個簡單的打車應用,但是其旗下的業務卻很多,快出、出租車、順風車等,每個業務都由不同的團隊和設計師負責??梢韵胂笕绻麤]有設計系統,任由各模塊設計師自由發揮,風格各異,出來的結果可想而知。而有了設計系統的幫助,就會感覺界面風格非常統一,感覺是出自同一個設計師之手,可見其設計系統的功勞不小。

 


2、系統的管理多樣性。在設計過程中,我們會發現過程中,我們會發現每個業務的形態都是基于不同的場景,因為場景的多樣性,在表現上就會催生出不同的樣式。如果每個業務都用一種樣式表達,久而久之當業務增長過快時,我們現有的設計模式就會難以滿足。Airbnb的設計方式就是非常值得參考的一個案例,從最開始是提供民宿,到后來新增的餐館服務,你會發現房源和餐館都用了同一套圖文信息結構,只是在內容的細節上有一些不同。這樣可以降低設計的難度。設計師不用為每個場景思考一個設計模式而煩惱。同時,用戶在瀏覽不同場景的內同時,在相互切換中也不會產生為違和感,一切都是很自然的操作。

 

 

3、幫助產品成長,避免一次性設計。互聯網產品的成長模式是一種漸進式迭代,在產品初期的主要訴求是快速上線,等到產品上線獲取一定的用戶,證明它可以活下去時再逐步完善,增加更多的功能。每一次的迭代都是站在我們之前的思考之上,每一次的優化都會讓我們的設計更進一步,這是我們期望達到的結果。

 


以Uber為例,新版本繼承了黑色按鈕的設計,并和地圖進行了結合,地圖的配色和舊版本相比也變得生動了,這種改變并不是一蹴而就,而是建立在原有版本之上。

一致性(Consistency):由于分解界面成單一元素,不論在哪一個頁面,UI元素的互動性是相同的,例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同,在視覺上更為和諧。


效率(Efficiency):由于建立了組件庫,一旦要更改某一個元素,可以馬上施行、應用。


跨部門的共通語言(Collaboration):不僅方便設計師思考頁面的和諧性,也可以讓工程師、測試檢驗清楚頁面的邏輯架構及變化,減少不必要的來回溝通

在此,順便淺談下設計系統。

通常,設計系統包含的內容由設計原則、設計語言和組件庫,這是一個整體的概念。

 

設計原則

設計原則是一個產品的核心設計理念,設計的本質就是解決問題,在制定設計原則時要建立在這個中心思想之上。這些問題也許是一個業務形態,例如打車的場景,也許是一個設計形式,如表單。設計形式又很多,我們應該如何選擇呢?相對合理的方法就是建立一個規則,所有的問題和形式都想這個規則靠攏,減少不確定性,這就是設計原則的出發點。因此我們可以理解為,設計原則就是一系列的規則,是我們設計過程中要遵循的中心思想。

例如:蘋果把審美作為第一要素存在于設計原則中,它的產品往往也是品味的代名詞,看看它的設計原則就知道了:

審美的完整性

一致性

直接操作

即使的反饋

隱喻

用戶可控

 

△ 官網:https://developer.apple.com/design/ 

再來看看Material Design,Google對其定義是一個完整統一的系統,結合了理論、資源和工具的數字體驗產品,相比而言它的設計原則就是更加獨特,這是它的設計原則:

材料是一種隱喻

大膽/圖形/強調/

運動賦予意義

靈活的基礎

跨平臺 

△ 官網:https://material.io/design

由此可以看出,和iOS相比,Material Design的設計原則更加的抽象,因為他擁有一個獨特的設計世界觀,用還原的方法和物理方法呈現出它的本質,通過抽象的視覺卡片傳遞出設計的目的和原則。

設計語言

 在建立設計原則后,下一步就是制定一套設計語言規范,設計規范是設計系統的表現層,面向的對象是團隊設計師和開發者,他能幫助設計師的設計輸出保持風格統一。同樣也能幫助開發者高度還原設計。非常有利于設計師和開發者的協作。這套規范包含的有:字體、顏色、圖標和柵格。 

組件化設計

組件化設計主要作用有兩點,一是保證多人協作效率,組件化設計可以快速完成一個簡單頁面的設計,提升設計效率;二是保持產品體驗的統一性。同時,組件化設計環節在設計系統中是一個相對重要的工作,需要有一個全局觀,要有較強的設計水平和溝通協作能力,這樣,組件化的落地才會得到很好的推進。

 

在多屏時代,我們時時刻刻都在設計產品界面,需適配多系統,其中很重要的一點是如何在多系統之間保持體驗一致性,很多人想到的就是規范,要想做一套嚴謹邏輯好,靈活的設計規范,那么原子設計可以幫助我們來很好的實現它,它在構建設計系統中算是比較科學的一種方法,國外很多設計團隊都在使用這樣的設計方法。比如以下這幾個團隊: 

1、Airbnb

Airbnb設計副總裁Alex Schleifer在IXDC2017國際體驗設計大會上分享了這一創新React Sketch app 管理設計系統, 這是為Airbnb的設計系統而設計的,其實就是個實時更新的代碼數據庫,可以實時查詢sketch數據、代碼,也可以下載圖標、設計模塊,所有工程師、設計師都可以免費下載。

△ 官網:https://airbnb.design/events/when-we-use-systems/

2、Frames

Frames 使用了精致的組件和先進技術,并結合 Sketch 構建了強大的 Web 設計系統,同樣能滿足修改原子,全局同步更新的功能,支持響應式布局。提供了近百個網頁模板,可以非常迅速地完成效果圖制作。

△ 官網:http://framesforsketch.com

3、Nested Symbols

這是一套免費的設計系統,它將按鈕、輸入框、下拉菜單、通知等控件,都制作成了嵌套符號,方便自定義和編輯。

△ 官網:https://www.janlosert.com/ 

原子設計理論最大的價值,就是為設計體系/組件庫的構建提供思路和方法,如果你不滿足于市場上現有的設計系統,我們還可以自己創建。因此我們首先要為產品設計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展,必須能在所有地方奏效!


接下來就以 Sketch Library 功能來實現組件庫的創建。

第一步:定義顏色(color)

將顏色添加 Main、Text、Status 等一級分類,例如:Color/Status;再添加二級分類,例如:Color/Status/Success 等,命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后,將每個顏色轉換成 Symbol,便可統一調用。

 


第二步:定義字體(font)

根據設計規范,將不同字號的文字樣式羅列出來,例如:Title 1、Body、Body2 等,按照「樣式名稱/顏色/對齊方式」的層級結構,將文字賦予 Text Style,整理出所有的字體樣式。

第三步:定義圖標(icon)

將圖標放置在 24*24px 大小畫板內,從定義好的顏色系統中選擇合適的 Symbol,這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸(size)大小,并把調整尺寸(Resizing) 設為上下左右同時吸附,以確保圖標在使用時可以等比縮放。

 

第四步:加入其他元素(Elements)

 

根據以上對原子的定義和命名方式,依次完成對其他原子、分子和組織的定義,例如:按鈕、表單、空狀態等,整個過程都是通過 Symbol 的不斷嵌套,最終實現組件庫的創建。

 

第五步:加入組件庫

 

使用快捷鍵「cmd+, 」打開 Preferences 面板,選擇「Libraries」(組件庫)標簽,點擊「Add Library」(添加組件庫)按鈕添加剛才的 Sketch 文件,完成后就可以從其他的 Sketch 文件中,對此庫里的元素進行調用了。

 

 

寫在最后,原子設計是一套具有科學嚴謹的創建設計系統的方法論,是一個構建UI系統的心理模型。

 


原子設計使我們可以將我們的界面UI細分為原子元素,并通過這些元素組合在一起形成最終的界面。

原子作為整個理論最基礎的元素,當我們改變其中的原子時,整個體系都會發生變化。原子的設計概念和sketch中的“符號”有異曲同工之妙,當我們改變其中一個元素時,其他所有包含這個元素的頁面都會發生變化,可以保證整個系統的一致性和層次感。原子設計為界面元素提供了應用規則和組織原理,這套方法論對于設計系統建立、團隊協作、產品迭代都具有非常重要的指導意義。

經常有同學問ios設計規范,安卓設計規范在哪看這類問題,最后,來推薦一些大平臺的設計網站,上文出現過的下面就不重復了。我們耳熟能詳的優秀設計都是來自于這些世界互聯網公司,說真的,審美這東西還真是人家說了算~


反正看看又不要錢,都去康康唄~

 

Google Design

谷歌設計中心,它非常全面的展示了谷歌的設計工作和概念。包括Material Design在內的所有關于設計、體驗、產品等互聯網領域的探索。 

△ 網址:https://design.google/

Fluent Design

微軟基于Windows10的設計語言,包括人機界面布局、控件、樣式及資源下載。

 

 

△ 網址:https://www.microsoft.com/design/fluent/#/

 

IBM Design Language

IBM設計語言是偉大設計的代名詞,他將人們的需求轉化成精心打造的產品。在這里可以學習IBM設計團隊一用戶為中心設計的新思維方式。

 


△ 網址:https://www.ibm.com/design/

 

Facebook Design

臉書設計官網,在國內,我們常常看到臉書的設計文章被翻成中文為中國設計師所學習

 

 

△ 網址:https://facebook.design/

 

Uber Design

作為全球第一家即時打車應用,優步其超前的設計理念和優秀的用戶體驗成為同類產品競相模仿的對象。

 

△ 網址:https://www.uber.deign.com/


Ant Design

螞蟻金服設計平臺是阿里旗下子公司,基于螞蟻金服生態系統的跨設計與開發的體驗解決方案。

 

△ 網址:https://design.alipay.com/


參考資料

《原子設計》官網

Airbnb 設計規范

Apple 設計規范

Material Design設計規范

Google及其他

文章來源:tob.design

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

組件化設計思維

高勁

組件化設計思維,能夠提升設計團隊的生產力,讓設計師專注于設計上的創意,同時讓設計師完成更多產品需求和提升團隊的溝通效率
 


 

 

寫在前面 


組件化設計的流程,經過實際工作的鍛煉和思考,具體可以拆分為 3 個方面:

 

1. 明確組件化設計的內容。

2. 場景設計走查。

3. 組件化設計驗證效果。

 


 


一. 組件化設計的案例(界面展示篇)


  

  


 


 


 小結:

組件化設計,需要設計師要有一個整體性的設計思維,要有很強的設計能力和良好的溝通協作能力,同時設計師要深入理解業務,這樣組件化設計才能很好的在團隊內落地推行。

組件化設計的優點有很多,能夠提升設計師的輸出效率,讓設計師更專注于設計上的創意思考,提升溝通效率。

二. 原子設計方法論

 

 

 

原子設計方法論是由國外設計師 Brad Frost 提出的,他從化學元素周期表中得到啟發,發現原子結合在一起,可以形成分子,然后形成組織。

 

Brad 把原子設計的方法論應用到界面設計中,用心觀察會發現,界面是由一些基本的元素組成,顏色、文字、圖標等都是一個個原子。

 

原子設計方法論,是由原子、分子、組織、模版和頁面共同協作,可以幫助我們創造出一套符合公司產品的設計系統。

 

 


 

 

原子設計方法論是為了幫助我們去建立設計系統,目前逐漸被國內外的一些大公司,應用于創建統一的公司產品設計系統。

 

接下來,我們以金融產品為例 ,對原子設計方法論進行拆解,深入思考原子、分子、組件、模塊和頁面在界面設計中的定義是什么,以及對應的元素是什么,元素之間又是如何組合的。

 

 

原子

 

用戶界面設計中的原子,是構成界面的基本元素。是一個單獨的元素,如圖標、標題、色彩等以及原子之間組合形成的新的元素組合。

 


 

 

我們開展一個項目時,為了保證各個頁面保持統一的設計風格,我們會制定一套視覺規范,定義的內容包括:字體、顏色、柵格和圖標,這些就是界面中最基礎的原子。在關鍵的設計元素上,保證各個設計師達成一致,這樣就能很大程度的保證不同頁面的設計風格統一,并在這個基礎上去探索更有價值和創意的設計方案。

 

 

 

 

分子

 

兩個原子即可組成一個分子,以按鈕為例:包含了文字、色塊、柵格。

文字傳達含義,顏色定義了按鈕的特性,柵格為按鈕定義了一個尺寸和規范。

 

 


 

 

把單獨的元素做一個簡單的組合,是我們做界面設計的一種方法,組合的方式簡單且可復用性很好,作為開發者可以根據規則進行編寫代碼,提升產品的迭代效率和產品的一致性。

 

 

界面設計中的表單為例,表單是一個非常常見的設計元素,一個表單分子由分割線、文案、Icon和分割線等原子組成。原子組合之后,可以得到是一個可以應用在功能模塊的組合。

 


 

 

 

組織

 

我們把分子和原子做組合,就可以創建復雜的、可擴展性的模塊,然后變成一個組織。

 

 

組件在提升設計師設計效率方面有著很重要的意義,設計師可以把界面中常用的組件模塊進行分類整理,比如:圖片、卡片、輸入框等,可以解決設計師日常的設計需求。

 

 

以金融產品為例,基本分為 3 類 :內容、表單、卡片化的設計。

每個卡片化的內容設計盡量保持統一性,這樣方便負責不同模塊內容的設計師復用同一個組件,就可以完成不同頁面的設計,提升項目的設計效率。

 


 

 

 

模板

 

模版一般應用在設計系統的交互階段,保證原型階段的多方案的展示;模版內容,后面可以優化,這樣可以降低設計的成本。模版的價值可以讓設計師,更專注于頁面的結構化設計排版和對頁面布局的思考。

 


那模版的原理是什么呢?

就是產品的原型圖,就是組織和分子的組合,會先形成一個完整的頁面框架,作為一個初步的設計方案,作為團隊項目的前期溝通所用。

 


以教育和金融界面為例,如下圖:

 


 

 

 


 

界面

 

界面設計是把占位符內容替換成產品設計需要的文案,在模板的組合上進行完善,會形成界面的設計方案。

 


界面設計是模板的具體的展示設計,是真實內容的設計方案。

 


通過圖標和文字的組合,清晰的展示用戶所需要的場景,加上內容,就會變成一套完整的界面設計方案。

 


如下圖所示:

 


 

 

 

以金融產品的場景設計為例,有了實際的內容后,我們可以發現通過組合組件,就能很好的呈現界面內容。

 


如下圖所示:

 


 

 


小結:

原子設計方法論為界面元素提供了應用規則和組織整理,原子設計方法論在建立設計系統、團隊協作、產品迭代優化等方面,都有很好的價值和意義。

 

 

 

 

三. 組件化設計的流程 ?

 


 

 

設計規范和 Ui kit 是我們管理一個或多個App統一性和設計效率的工具,同時探索如何更有效的提升設計效率。像 滴滴等Ant Design 設計系統,他們的產品體驗非常好,用戶使用產品時能夠有效的滿足其需求,良好的用戶體驗背后都有著一套好的產品設計系統在運作。

 


如下圖,國外的金融產品運用組件規范化后的界面設計展示 :

 


 

 

系統性的組件化設計思維的好處是 :

 

1. 產品設計迭代優化時,版本和版本之間的差異性就可以得到很好的解決。

2. 界面設計之間的設計風格和設計樣式就會統一。

3. 界面設計的效率和質量會穩定輸出。

 


在我們所經常使用的 App 產品中,如 蘋果、Airbnb、自如、Ant Design 等,用戶體驗都非常好,用戶使用產品時能夠快速的解決需求,優質的用戶體驗背后都有著一套強大的專業設計系統所幫助。

 

 

 

 

思考:我們為什么需要組件化設計 ?

 


一. 統一產品設計體驗

 

1. 以京東金融為例,在京東金融最近更新的版本中,我們看到財富界面和生活界面,同樣的模塊可以復用,對于復用性高的內容,應該提煉為通用組件,提高設計效率。

 


 

 

2. 如上圖所示,對于會員專區或者熱門活動是金融類產品中最為常見的產品形式,在京東金融的首頁出現,布局往往是左右結構,或者上下結構;因為這類產品具有較強的引導屬性,所以會把右側的運營的插畫設計相對突出,以吸引用戶的注意力。會員專區的卡片化設計,具有較強的復用性,可以列為通用組件,這樣就可以保證兩個產品界面的卡片化的設計風格和樣式上的一致性原則。

 

 

 

二. 提高團隊協作效率

 

1. 面對相同的設計需求時,可直接調用相關組件,節省重復性的設計工作,提升溝通效率。

2. 借助組件化設計,可以快速開展工作,達到復用的價值。

3. 通過設計語言可以完成一個界面設計,在下面案例中,主要的元素由文字、柵格線、Icon 等組成界面結構,確定好排版布局和圖標的設計風格后,完成產品的界面設計。

 


 

 

三. 降低開發成本

1. 在實際工作中,如果每次制作一個新頁面都設計不同的組件,開發就要寫新代碼,增加開發時間成本。

2. 如果我們常用的模塊作成組件庫,開發遇到相同的組件時,可直接調用組件,復用相關代碼,這樣可以降低開發成本。


 


  

組件化設計流程,

經過實際工作的鍛煉和思考,具體可以拆分為 3 個方面:


一. 明確組件化設計的內容

我們需要整體思考,明確可以復用的的內容、組件,以熱銷理財場景為例,金融產品都會需要用戶進行選擇理財產品,可定義為理財產品的卡片化設計組件,適合組件化設計的模塊。產品已有組件的優化,設計師要具體分析,分析組件體驗現狀,發現問題然后針對性解決問題。


使用產品的場景設計、交互體驗、設計風格三方面都要思考,推出更好的產品設計的解決方案。以京東金融的財富和首頁的界面設計為例,應用的都是卡片化設計的理財模塊。在開發新項目的時候,同樣可以調用同一個理財產品的模塊化組件,不僅能保證產品上體驗的一致性,也能降低團隊的設計成本。如下圖所示:

 

 

二. 場景設計走查

 1. 全面體驗走查線上的移動端產品設計,對用戶的交互行為鏈路有一個清晰的理解,思考當前線上的產品體驗。

2. 線上產品功能的迭代一般業務方都會有一個周期性安排,因此在走查時要及時和業務方溝通,在這個基礎上再進行組件化的方案設計。

設計師使用金融產品,在設計的時候要考慮到每一個環節。

我們先來看下京東金融的案例,這兩個閃屏運營彈窗除了場景不一樣以外,其他元素都是高度統一的,組件化設計的優勢在于,只需要改變組件的部分元素就能適配各種場景。如下圖所示:

 


 

三. 組件化設計驗證效果(如下圖)

 


 

 

組件化的設計方案完成對接開發上線后,我們需要從兩個方面來驗證組件優化后的效果:

1. 組件化設計是否可以滿足各業務方的需求和場景化的設計。

2. 通過定性數據追蹤功能是否能促進業務的關鍵的設計指標的提升,這些數據可以是轉化率等數據指標,用戶的反饋也是一個很好的輔助驗證方法。

 

四 如何建立組件化設計系統 ?

 


 

 

每個團隊的體量和業務訴求不一樣,個性化的組件化設計系統包含有設計原則、設計語言和組件庫,這是一個爭議的概念。

建立設計系統的原因:

1. 建立設計系統,可以方便團隊協作,保證體驗上的一致性。

2. 設計過程中,發現每個業務的形態,以產品的不同場景為出發點,使用一套設計系統,會提升用戶體驗。

3. 幫助產品的迭代和優化,同時提升產品和用戶的體驗好感度。

 

 


 1 設計原則(設計理念、品牌指導)


設計的本質是解決問題,制定設計原則時要建立在這個設計中心思想上。

 


蘋果的設計系統:

 

把審美作為第一要素存在于設計原則中。

1. 創意審美的重要性。 

2. 隱喻的價值。 

3. 易用性原則。 

4. 及時的反饋。

  

安卓的設計系統: 

1. 跨平臺的設計適配原則。 

2. 材料的設計價值思考。 

3. 圖形、強調、大膽的設計語言。

4. 動效的服務設計價值。

 

 

 

2 設計語言(色彩、字體、柵格、圖標)

色彩的視覺語言規范,我們需要定義產品的基礎色板和中性色板,基本色板包含了產品的主題色和輔助色,生成每個顏色的亮色和暗色的衍生色。中性色板包含黑白灰,這類顏色在界面設計中使用,能讓頁面內容具有良好的層次關系,提升閱讀的效率和用戶體驗。

 

字體規范是界面設計中的構成之一,用戶通過文字來理解和達成目標,完整的字體系統能有效的提高用戶的體驗和理解效率。字體的規范定義需要從三個方面出發:字重、灰度色、字階。


界面設計的排版布局一般使用的 8 柵格法,它能適配不同尺寸的屏幕分辨率,界面元素大小和間距都是8 倍數為基準。

圖標設計,隱喻,保持圖標之間一致的設計風格和表現形式。系統圖標為例子:以1@x圖為例子,常見的尺寸有: 16px、24px、32px、48px等。

 


 

 

 

 

3 阿里系團隊,制作的 Kitchen 組件化設計系統 很好 :(如下圖)

 

 

 


 

 


 


 



 


 


 


 


 


 

 

 

 

五.  Banner 組件化設計、B 端組件化設計等平面組件化設計的案例如下:

 

 

 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

總結 :

佐藤寫過一本書[佐藤可士和的超整理術],里面講述了他自己是如何通過整理自己的思路、對話、工作室、隨身物品等設計來讓工作變得并且最終對自我更加深入的了解 。


生活和工作離不開“整理術”,優秀的設計應該要從“ 整理和總結 ”開始,比如:組件化的設計思維,可以看做是一種 “設計的整理術” 。

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



日歷

鏈接

個人資料

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

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
亚洲精品一区二区久| 亚洲自拍另类欧美丝袜| ...中文天堂在线一区| 亚洲精品动漫| 欧美成年人视频网站| 亚洲人成在线观看网站高清| 国产精品视频一区二区三区四蜜臂| 在线观看国产精品91| 5g影院天天爽成人免费下载| 亚洲国产精品久久久久秋霞影院| 国产三级一区二区| 2018日韩中文字幕| 91伦理视频在线观看| 国产福利一区二区三区| 国产精品美女久久福利网站| 国产成人免费| 久久久91精品国产一区二区三区| 日日夜夜精品网站| 久草在线资源福利站| 国产高清精品久久久久| 成人综合婷婷国产精品久久免费| 免费观看一级特黄欧美大片| 91丨porny丨在线| 日韩视频免费在线观看| 欧洲一区二区av| 91精品国产麻豆国产在线观看| 国产精品电影院| 黄色精品一区| 成人三级小说| 久久久精品欧美丰满| 国产精品视频专区| 欧美精品久久一区二区| 91麻豆精品国产91久久久| 高清视频在线观看一区| 欧美极度另类性三渗透| 欧美24videosex性欧美| 久久久国产精品视频| 亚洲欧洲日本国产| 亚洲日本三级| 午夜精品在线视频| 久久国产视频网站| 亚洲精品永久www嫩草| 国产一区二区免费电影| 国内精品伊人久久| 亚洲mv在线观看| 成人黄色图片网站| 日本电影亚洲天堂一区| 日韩美一区二区三区| 国产精品18久久久久久首页狼| 国产精品99精品久久免费| 久草在线成人| 国产一区二区在线观看视频| 一本色道久久88综合日韩精品| 日本一区二区精品| 亚洲精品成人av| 91青青国产在线观看精品| 日韩欧美美女一区二区三区| 国产91亚洲精品一区二区三区| 91精品婷婷色在线观看| 欧美尤物巨大精品爽| 正在播放日韩欧美一页| 欧美理伦片在线播放| 精品欧美国产一区二区三区不卡| 精品一区二区三区免费| 欧美另类一区二区三区| 日韩欧美ww| www视频在线观看| 欧美日韩视频| 亚洲成人精品一区二区| 欧美激情一区二区三区高清视频| 亚洲理论电影| 国产精品人成在线观看免费| 在线精品视频视频中文字幕| 欧美国产精品劲爆| 日韩视频免费观看高清完整版在线观看| 欧美在线日韩| caoporn视频在线| 日韩午夜电影av| 国产成人精品av在线| 日韩精品中文字幕第1页| 成人在线观看视频网站| 中文字幕最新精品| 成人美女在线观看| 91精品导航| 亚洲一区二区视频| 欧美大学生性色视频| 精品999日本久久久影院| 日韩最新中文字幕电影免费看| 欧美综合77777色婷婷| 水野朝阳av一区二区三区| 狠狠色丁香久久婷婷综合_中| 国产成人一区二区三区影院| 精品精品国产三级a∨在线| 懂色av一区二区三区免费看| 粉嫩91精品久久久久久久99蜜桃| 中国字幕a在线看韩国电影| 国产999在线| 国产精品chinese在线观看| 欧美视频一区二| 国产精品97| 国产亚洲电影| 五月天久久777| 蜜桃传媒麻豆第一区在线观看| 日韩高清不卡一区二区三区| 日产国产高清一区二区三区| 成人影院中文字幕| 毛片在线导航| 欧美ab在线视频| 欧美精品aⅴ在线视频| 精品久久久久国产| av成人国产| 久热精品视频| 免费久久一级欧美特大黄| 亚洲国产高清在线观看| 亚洲精品一区二区三区精华液| 天堂8中文在线最新版在线| 91一区二区三区在线| 婷婷久久综合| 精品综合久久88少妇激情| 日韩中文字幕视频在线| 欧美人xxxxx| 亚洲国产97在线精品一区| 成人无号精品一区二区三区| 亚洲男人天堂古典| 日韩精品专区在线影院重磅| 国产大片在线免费观看| 欧美写真视频网站| 日韩美女一区二区三区四区| 欧美一级大胆视频| 亚洲人成77777在线观看网| 久久99精品久久久久久三级| 尤物九九久久国产精品的特点| 亚洲伦理网站| 亚洲欧洲成人av每日更新| 欧美精品日韩www.p站| 五月天中文字幕一区二区| 亚洲美女自拍视频| 国产成人精品一区二区三区| 日韩天天综合| 久久er99精品| 国产一区在线不卡| 国产伦精品一区二区三区在线观看| 欧美日韩国产网站| 亚洲综合日韩| 国产成人精品一区二三区在线观看| 国产精品狼人久久影院观看方式| 美女看a上一区| 国产精品欧美一区喷水| 91不卡在线观看| 天堂av在线| 综合激情网...| 美女露胸视频在线观看| 免费观看成人www动漫视频| 久久91亚洲人成电影网站| 一本大道久久精品懂色aⅴ| 久久综合网络一区二区| 欧美日韩国产一区二区在线观看| 国产欧美一区二区三区四区| 亚洲第一在线| 午夜精品成人在线视频| 91欧美日韩| 国产电影精品久久禁18| 婷婷国产精品| 一本一道久久综合狠狠老精东影业|