實用的管理方法
抽屜式管理法是一種通俗形象的管理術語,在現代管理中也叫做職務分析。抽屜式管理的主要含義是在每個管理人員的辦公桌的抽屜里,都有一個明確的職務工作規范。它包括兩個方面的含義:
- 每個人所從事的職、責、權、利等四個方面進行明確的規定,做到四者統一;
- 明確每個人所從事的管理和主要專業業務,分工協作關系,橫向縱向聯合事宜,以及上下左右的對口單位等,達到理順企業管理關聯的目的。
抽屜式管理是近幾年世界上最為流行的管理方法。
他的主要內容包括兩個方面:
- 業務部門的職務分析,即職能權限范圍。業務部門的職責權限范圍分析,應根據企業的總體目標、生產經營指標,以及專業對口的要求和協作關系進行層層的分析、逐級落實、明確規定;
- 管理人員的職務分析,即職務說明或職務規范;
管理人員的能力分析要根據管理層次的不同劃分來進行,它的關鍵是處理好集權與分權的關系。例如一家設計公司,美術指導要對設計總監負責,資深設計師要對美術指導負責,設計師要對資深設計師負責,設計助理要對設計師負責,實習生要對設計助理負責。
企業在施行抽屜式管理方法時,首先要組織一個由各個部門結成的職務分析小組。并對職務分析小組進行短期培訓,以掌握抽屜式管理的概念和內涵。其次,企業應圍繞企業的總體目標、生產經營指標、根據業務對口,編制業務職責權限范圍。
企業應分層進行管理人員分析,按職、責、權、利四者統一,制定管理人員職務說明或職務規范。最后,企業需要制定必要的考核、獎懲機制,與職務分析法配套執行。
流行的管理方法
在一些商業企業中,不同程度的存在著職責分不清,分工不明確,權利與責任相分離等問題,造成辦事效率低,拖拉等狀況,它們一般都表現在:
- 各部門分工不明確,一些工作上的事情誰都不管,有些事情又都想插手,造成互相扯皮,嚴重影響了實際工作效率;
- 企業內部橫向聯系比較差,協調能力弱,使執行人員只能聽四方指示,八方匯報,大大的延長了工作流程,極大的影響了實際工作效率與人員浪費;
- 企業用人多少缺乏一個客觀標準,容易受魅力偏見的影響,強壯的和漂亮的應聘者更受歡迎;對于設計行業而言作品造假,作品集過度包裝引起的能力與職位不匹配的問題,沒有一個較為標準的審查機制,都屬于個人的主觀因素。
企業要進行策略管理,就必須明確企業內部各個崗位的主要職責以及各職務之間的分工與協作關系,它能大大的提高企業戰略管理的科學性、系統性和有效性。
抽屜式管理在人力資源管理中一般用于職務分析。隨著社會經濟的發展,抽屜式管理的公司也越來越普遍,人們認為抽屜式管理是21世紀初現代化管理發展的新趨勢。
當前一些經濟發達國家的大中型企業都非常重視抽屜式管理和職位分類,并且都在抽屜式管理的基礎上,不同程度的建立了職位分類制度。絕大部分世界500強企業都在實施抽屜式管理,這一工具在福特經理們的心目中,具有非常重要的地位,幾乎每一個經理人都在管理下級之中應用了這一工具。
抽屜式管理的步驟
第一步 - 建立一個由各部門組成的職務分析小組
考評小組的組成人員包括:
- 企業領導者:可以保障部門權責設定與企業整體目標一致,保障權威性與決策的有效性。
- 人力資源管理領導者:抽屜式管理模式的主管者,有利于人力資源管理精準性的提升。
- 各部門角領導者和員工代表:促進決策的民主性和科學性。
第二步 - 正確處理企業內部的集權和分權關系
要考慮與正確劃分,在哪些領域或事項上集權,在哪些工作上分權,部門權責考評小組要以整體績效為基準。
第三步 - 圍繞企業的總體目標,層層分解、逐級落實職責權限范圍
層層分解與逐級落實是“抽屜式”管理模式的核心環節,或者說是管理落實與職權細化的關鍵性步驟。整體目標指的是企業戰略總目標,實現企業經濟效益、提升管理績效與職權分解、落實是目標與手段的關系。
第四步 - 編寫職務說明書,制定出每個職務工作的要求準則
職務說明書包括兩部分,即對部門領導者和員工的職務都進行規范化說明。其次制定員工職務說明書,通過書面化的形式將員工工作相關內容進行明確規定。哪個員工在哪個環節上出了問題,只要拿出放在抽屜內的職務說明書即可進行查詢。
第五步 - 制定考核與獎懲制度,與職務分析法配套執行
績效考核與獎懲制度是抽屜式管理模式的保障性措施,也是提升管理有效性的配套手段。制定與權、責相配套的獎懲、晉升制度。以職務說明書為依據,通過績效考核反饋給予認真履職者獎勵,給予玩忽職守者相應的懲罰。
總結:其實抽屜式管理法就是管理層的一種管理手段,在抽屜里放一些對于員工的職務職責的約束規則,在心理上給員工施壓,進而使之完善所做的工作;在規則上也同樣施壓,一旦員工的工作不飽和,又或沒有完善部分工作,就可以直接拿規則說事兒,企業也挺雞賊的。
對于員工而言還是要不斷完善自身能力,自己沒有問題別人也挑不出問題,其次要注意溝通協作的問題,把自己工作做好的同時,如果有精力和能力也幫助同事提升能力和幫助完善部分工作,對自己負責,對公司負責,同事和公司才會對你負責,更看重你。
文章來源:站酷 作者:羅耀_系列
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
人類一切創造性活動和造物活動都可以稱為設計,這是從廣義角度去理解設計的定義。從狹義角度理解設計的定義,設計就是構想和解決問題的過程。應以人為本,通過系統化的方法滿足消費者的市場需求,進而產生功能價值與審美價值。
除了廣義與狹義的設計定義,處在不同時期不同的人站在的角度和立場均不同,產生的觀點是各抒己見,各不相同。在國內考研只用采用其中一種定義就可以了,但知識是要去學習和理解的,這里我研讀了近100本書籍,把所有關于設計的定義都整理出來供大家學習與參考。
設計的定義
彼得·勞倫斯(美國設計學會創始人):設計是一種手段,通過這種手段可以提高生活質量,并能有效的滿足人類的需求
王受之教授:設計是把計劃、規劃、設想、解決問題的方式,通過視覺化的形式傳達出來的過程
《大不列顛百科詞典》(1786年 / 工業革命前):設計指的是立體、色彩、結構、輪廓、線條、形狀、比例、動態和審美方面的協調
《大不列顛百科詞典》(1976年 / 工業革命后):設計常指擬定計劃的過程,又特指記在心中或者制作成草圖的具體計劃
6:19 STUDIO - slava balbek / Nata Kurylenko
《簡明不列顛百科全書》(1985年 / 中美編譯):Design包含兩個層面,第一個層面指“心理上的計劃”,即計劃的思考與擬定計劃的過程;第二個層面指“藝術計劃”,即把計劃中的想法制成草圖的具體計劃。
《韋伯斯特大辭典》(名詞方面):針對某一目的在腦中形成的規劃;根據對象預先所作出的模型;文學、戲劇作品的輪廓;音樂作品的框架;視覺藝術作品的線條、細節、外觀等方面的相互關系
《韋伯斯特大辭典》(動詞方面):頭腦中的想象與計劃;策劃;創造功能;為了達到目的而進行的創造、規劃和計算;用商標、符號表達;對物象的描繪;零部件的形狀與配置
《牛津英文詞典》(1588年):設計是由人所設想一種計劃,或是為了實現某物而做的綱要
6:19 STUDIO - slava balbek / Nata Kurylenko
《授予博士碩士學位和培養研究生的學科專業簡介》(1999年):設計是一門多學科交叉的、實用性的藝術科學,其內涵是按照文化藝術與科學技術相結合的規律,創造人類生活的物質產品和精神產品的一門科學
柳冠中教授《工業設計學概論》:設計應該被認為是一種方法論,應提高‘一切人為事物’的角度來認識
李硯祖教授:設計是人類改變原有事物,使其變化、增益、更新、發展的創造性活動,設計是構想和解決問題的過程,它涉及人類一切有目的的價值創造活動
尹定邦教授:設計其實就是人類把自己的意志加在自然界之上,用以創造人類文明的一種廣泛的活動,設計是一種文明
6:19 STUDIO - slava balbek / Nata Kurylenko
我國《高級漢語大詞典》:按照任務的目的和要求,預先設定好工作方案和計劃,繪制出為解決這個問題而設計的圖案
我國綜合字典《辭海》:設計指“按照任務的目的和要求,預先定出工作方案和計劃,繪出圖樣,為解決這個問題而專門設計的圖案”
赫伯特·西蒙在《人工科學》書中的一段話:凡是以現存情形改變成向往情形,為目標而構思行動方案的人都是在搞設計
6:19 STUDIO - slava balbek / Nata Kurylenko
阿切爾:設計是圍繞目標的問題求解的活動
路甬祥:設計是在一定的約束條件下,最合理的滿足社會的需求
佩齊:設計是從客觀現實向未來可能富有想象力的跨越
6:19 STUDIO - slava balbek / Nata Kurylenko
???/strong>:設計是獲得足夠把握前,對未來產品盡可能多地模仿
喬尼斯:設計是表達一種精粹信念的活動
里斯維克:設計是從無到有的創造,創造新的、有用的事物
考研知識
國內的知識大多數采用國內教育工作者對設計的定義,例如我們在網上查關于設計的定義,一般都會出現相同的搜索結果,也就是《現代漢語詞典》對設計的定義,即“在正式做某件工作之前,根據一定目的的要求,預先制定方法、圖樣等。
6:19 STUDIO - slava balbek / Nata Kurylenko
另外考研的知識點還有設計的核心內容知識,包括以下三個階段;
第一階段 計劃,構思的形成
第二階段 將計劃、構思、設想、解決問題的方式利用視覺化的傳達方式表現出來,如圖紙、制作效果圖、模型等
第三階段 將設計的方案實施完成
附加知識
以上指的設計的定義是不包含工程設計的,工程設計主要解決人造物(機械、設備、交通工具、建筑等等)中的物與物之間的關系,包括產品的內部功能、結構、傳動原理、組裝條件等。
工程設計主要是研究和實施建筑、城市、景觀設計與工業產品(建筑屬于工業)、造型設計、功能性設計、結構設計、可靠性設計、生產工藝設計、生產系統集成設計等的工程技術領域,工程設計更注重產品的實施與落地。
6:19 STUDIO - slava balbek / Nata Kurylenko
工業設計就是對工業產品的使用方式、人機關系、外觀造型等做設計和定義的過程。他將產品的功能通過有型的方式創造性的體現,使得工業產品和人的適當的、高效的,甚至有情感的交流得以實現。是一種產品與人溝通的語言,是工業產品和人之間的重要紐帶,是用戶體驗的決定性組成部分。
文章中提到的設計是解決物與物關系的同時,更側重于解決物與人的關系問題,考慮產品對人的生理、心理的作用。因此設計是包含藝術審美同時又有科學技術的人文科學、社會科學相結合的藝術。
文章來源:站酷 作者:羅耀_系列
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這 80 個問答將分為 7 篇,每天更新一篇:
資料主要來源于:
問: 微信的頁面設計很少改,那微信的設計師們每天在做什么呢?很閑嗎?
陸樹燊答: 張小龍評審微信的功能有一個習慣:不看原型圖,不看設計稿,也不看 Demo,要體驗前后臺代碼開發好后的產品。這就意味著:如果一個功能在給到用戶之前有過 N 個方案,則微信設計師已經設計了 N 個方案,前后端開發人員已經開發過 N 個版本的代碼。給張小龍體驗,然后 100 個需求能砍掉 70 個。其中 30 個再優化 N 次,才真正發布給用戶使用。
問: 對做微信的設計師有什么特別的要求嗎?
張小龍答: 在廣研(微信事業群前身)里面我們禁止使用競爭對手的產品,特別是 UI 設計師。因為大家知道,一旦你用了競爭對手的產品,你一定會受它的影響。你會覺得“哦,那樣做是最好的”,你會擺脫不了它的影子。之前我們也經常發生這樣的情況,UI 設計師一旦用了競爭對手的產品以后,設計里面就會不自覺地帶有對方的影子。所以后來我們干脆規定不允許使用競爭對手的產品。這個問題對我們公司來說其實蠻嚴重的,有很多時候可能我們覺得只是借鑒一下,但是一旦借鑒就會受到影響。所以最直接的方法就是禁止使用。希望大家所在的團隊也可以嘗試使用這個方法。這個方法不會讓大家損失任何東西。
但我們要了解競爭對手怎么辦?我們可以讓產品經理去體驗競品,讓產品經理總結哪些體驗是挺好的,UI 設計師知道這些體驗是很好的,但是 UI 設計師要自己想辦法去實現好的體驗,而不是被對手所牽制和影響。
問: 對于微信來說,最關注的體驗是什么?
張小龍答: 操作的響應速度永遠是第一體驗。我們在做郵箱時思考:對于一個好產品來說,可能需要滿足幾個要求,比如“切入要準”“功能設計得要好”。但我們把速度這項單獨列出來,就是“速度一定要快”,這個速度是指系統響應的速度。
我們回顧 QQ 郵箱能做起來,有兩點是最重要的:第一是簡單;第二是速度快。簡單和速度快,合起來是「簡捷」,簡單快捷?!负唵魏汀翱旖荨笔怯脩趔w驗里面 最重要的兩個關鍵詞。
在微信 4.0 的時候,點擊進入一個會話群的響應速度是挺慢的,我們做了很多的改進來保證進入速度得到提高。而在微信的朋友圈里,時間線的流暢度也非常重要,我們的開發在這里做了很多次的重構才保證了流暢的體驗感,保證我們速度能超越所有有時間線的產品。雖然為了提升這里的速度,開發的代價很大,但是這樣的代價是值得的。
問: 微信 UI 設計最看重哪方面?
張小龍答:UI 里面最重要的是條理清晰。有時我們會誤認為 UI 就是怎么把用戶界面表現得更絢麗一些,但是所有的視覺表現都不如條理清晰重要。
舉個例子。微信的語音輸入條經過了很多進化,現在用的是最下面的式樣。
最下面的式樣具有美感,字體也很清晰,「加好友」按鈕在右邊也很順手。這都是經過了很多變遷的。前兩個設計,在語音和文字切換的時候,還需要通過菜單來完成。后來一個 UI 設計師朋友提出意見,覺得這個地方使用不方便,每次切換都要用菜單多點一下。但是語音文字的切換是最常用的,應該放在左邊固定。我覺得他說得很有道理,我們就在下一個版本里面修改了。
所以 UI 做得絢麗并不是最重要的。微信里面用的東西都很樸實,你不會看到花花綠綠的東西,能用系統控件的就用系統控件,而且盡可能保持一致的式樣,包括一種字體、一種控件、一種背景,所有的東西最好只使用一種,不要增加兩種或者更多種。
我們也一直鼓勵每個界面只有一個主題。學習過攝影的同事都知道,一張照片里面只有一個主題。所以我們不會做兩分式的設計,并且每個界面都會突出這個主題,把別的主題都虛化掉,或者把它放到一邊去。每個對話框都有一個明顯的默認按鈕。比如每個對話框右上角都有一個完成按鈕,并且是藍色的。我們還用了文字來規定必須這樣做。因為我們要讓用戶進到一個對話框后立即可以找到哪里可以完成,所以按鈕一定要很顯眼。
這是一個反面例子:
這個界面右上角有一個按鈕,底下有兩個按鈕,會讓人覺得很迷惑。很多用戶跟我們說,以前他是壓縮發圖,但是現在有兩個按鈕,他就會點原圖發送了。然后就忘記去點完成了,造成了一定的迷惑。這是一個不好的例子,是我們需要優化的地方。
問: 為什么微信的主題色是綠色?
張小龍答: 最初版的微信主色調是藍色,后來換成了綠色。其實我們現在有點后悔用綠色,因為在很多安卓手機上,綠色的偏色很嚴重,看起來就是黃綠黃綠的。
剛開始是藍色的,因為第一個版本是比較匆忙的,當時用的是系統的顏色。后來我們有一個版本就覺得應該調整一下顏色,就換成了綠色了。然而,這個時候微信的產品形態已經基本定型了,用戶數也非常龐大,這時再去調整品牌顏色是不太可能了。其實我們現在很糾結,但現在改起來就對形象有影響了。
問: 為什么拼多多喜歡挖微信的產品經理?
答: 微信產品經理通過微信觀察到了全中國網民的使用習慣,拼多多挖走微信的產品經理,因此才能設計出更符合在微信環境內傳播的接地氣方案。
問: 為什么微信只有 4 個 Tab?能把朋友圈做成第 5 個 Tab 嗎?
張小龍答: 源起 Tony (騰訊前 CTO 張志東),他經常向微信團隊提一些需求要加東西,我說沒地方放了,他就說沒關系,你們只有 4 個 Tab,還可以加一個。我說不能這樣。過幾天 Tony 又有一個需求,我說沒地方放了,他又說,可以加一個 Tab。我想這樣的需求反復幾次,最后會沒完沒了。然后我就跟 Tony 定一個君子協議,兩年之內,微信只有 4 個 Tab,不允許再有第五個,因為 4 個最簡單了,一旦變成 5 個就變復雜了,不好了,對整個產品會有破壞性的打擊,然后 Tony 也認同了,最終變成一個協議就確定下來了。這樣就很好啊,我們在做朋友圈的時候,也沒有把它放成第五個 Tab。然后 Tony 說這個朋友圈的入口是不是太深了。我們說,已定過協議了,所以不能放出來,我們自己不能破壞這個協議。當然“朋友圈”能不能放在第五個 Tab 上,還有別的原因。它總是有好處有壞處的,至少我們現在能保證兩年之內只有 4 個 Tab,但一切也不是絕對的。如果有一個非常大的誘惑,說不定還是會加第五個 Tab 的。
問: 微信里是怎么引導用戶設置頭像的?
張小龍答: 在我們最早的微信版本里面,用戶自己說的話是不帶自己頭像的,后面才把自己的頭像展現出來,當用戶看到自己的頭像沒有設置的時候,很快就會去設置頭像了。可見這樣的設計比經由別的環節去引導用戶設置頭像要自然很多。因為這是用戶自發的,而不是被“引導”的。
問: 為什么微信里很少出現新手引導 Tips?
張小龍答: 我們在討論其他產品的設計的時候,常常會想,怎么才能不打擾到用戶,特別是我們想把新功能體現給用戶的時候?,F在很常見的是用 Tips 去提示新功能,看似體貼,實則讓人煩躁,用戶會覺得為什么要把這些提示強加到我當前的操作里面,感覺被打擾了。
需要文字解釋的功能不是好體驗。做 UI 的同事盡量不需要通過文字的解釋就把這個功能做好,最好也不要用 Tips 這樣的東西。剛才微博的同事還跟我聊到,做微博的時候,有新功能了需要通過彈 Tips 來告訴用戶。我問為什么要這樣做呢,他說怕用戶不知道。但其實用戶不知道就不知道吧,又不會損失什么。為什么所有東西都要用戶知道呢?所以產品里面最好能立一個規定,能不用就最好不要用。但是微信也還沒做到完全不用。因為微信還有一些地方沒處理到位,所以偶爾也會用到 Tips。但是自己要知道一點:每一次都是因為做得不好才用 Tips。
問: 為什么 QQ 的頭像是圓的?微信的頭像是方的?
QQ 設計師答:
微信設計師答: 因為照片本來是方的,方頭像更符合用戶習慣。
問: 微信的啟動畫面是一個小人站在地球還是月球?為什么是站在月球上看地球而不是在火星上看地球?
張小龍答: 其實第一個版本是在地球上看月球,但是后來就變成在月球上看地球,有了突破性的變化。但是這個變化并不重要。有些人甚至做了一些調研:用戶看到這個畫面到底有什么感覺?然后把調研結果分享給我,發現用戶各種感覺都有,很不一樣。然后問他,我們到底是怎么想的。我回答:能讓用戶有不同的感覺就對了。如果思路太統一就變成烏合之眾和愚昧了。所以這樣是最好的。
但是如果我們把微信的 LOGO 放在那里閃啊閃的,那就沒意思了,沒有任何想象的空間了。這個畫面也讓我們看到人類的孤獨感(這個小人都離開地球了,感到孤獨了)。而孤獨是永恒的主題。
問: 為什么微信沒有“系統管理員”這種官方賬號?
張小龍答: 大概在兩三年(這里指 2009 年)以前,我突發奇想,為什么我們給 QQ 郵箱用戶的通知信都是“系統管理員”作為發信方,為什么不是我們自己的美女產品經理作為發信方,這不是顯得更加人性化一些嗎?從那個時候開始,我們就再也不用“系統管理員”這個賬號來給用戶發信了。用戶收到的每一封來自“系統管理員”的郵件,都被替換為一個真實的產品經理。如圖中案例所示,會看到真實的產品經理的落款,有她的頭像和名字。
問: 為什么微信 3.0 版本的啟動頁面上放出了邁克爾·杰克遜的圖,寫了一句話:“你說我是錯的,那你最好證明你是對的?!埃?
張小龍答: 之前的微信版本被批評得挺多的,特別是被業界的評論家批評。所以我想了這個辦法回應一下。剛好在那段時間里,我在上班下班的路上,MJ 的音樂聽得很多。也覺得他的音樂跟我們的產品有某種關聯性,因此覺得非常需要去感謝一下 MJ。直到有一天這種感覺越來越強烈,就做了這個設計。為了能做出這個效果,我還特地請同事們到他的車里去聽 MJ 的音樂,覺得這樣效果會好一點,讓他們能找到做這個頁面的感覺。通過這個設計我們向外界所有的評論家表達:如果你說我是錯的,最好證明你是對的。
問: 為什么微信 4.2 的啟動畫面寫著「是時候放下手機,和朋友面對面了」?
張小龍答: 拿一個停留時長衡量一個 App,這個跟我對互聯網的初心的認知是背離的。每個人一天只有 24 個小時?;ヂ摼W人的使命不應該是讓所有人除了吃喝拉撒,把時間都花在看手機上面。一個用戶每天的時間是有限的,這是次要的。最主要的是,技術的使命應該是幫助人類提高效率。比如作為一個好的溝通工具,一定要高效。
用戶其實并不會按照你的內容多少來決定它的時間分配,但我覺得這是很合理的。 如果我們非要停留時間更長的話,我們當然有很多辦法來做到這一點。但是這只會讓用戶覺得不爽,因為他的社交效率降低了。如果非要把他半個小時能完成的事情延續到一個小時的話,只能代表效率降低。微信永遠都不會把用戶停留時長作為一個目標。
問: 微信 7.0 UI 改版那么多用戶不滿,為什么不改回去?
張小龍答: 其實任何一個大的改版都會帶來用戶的不滿,因為人習慣于自己熟悉的界面,覺得是最好的。我們沒辦法讓 10 億人來投票決定什么是好的,也投不出來。那怎么才能通過改變尋求設計的優化,讓它變得更好呢?這個決策必須遵循好的設計原則。
就像微信 7.0 版本的時候我們內部使用了很長時間,我自己一直在兩個版本不停的切換,當我用了一段時間,我不愿意切換到舊的版本去。也許用戶一下子不能接受,但是我相信他們適應以后也會接受。重要的是我們必須要用我們的產品不停的適應時代,而不是因為害怕用戶的抱怨就不去改變它。
尤其是 UI 上,我們永遠不可能讓所有的人滿意。但是,我們比如讓產品越來越美,符合甚至引導當前用戶的審美,而不是落伍于時代。
問: 微信 7.0 版本啟動頁是一朵花,包括你寫的看見之類的話,靈感是來自王陽明嗎?
張小龍答: 跟王陽明的書有一定關系。當時寫的是,「因你看見,所以存在」。王陽明的書里是說,一朵花長在山里的石頭縫,你不看它,它就不在,你看它,它就在那里。在 7.0 版本,我們想表達的是說,看見的力量。如果按照王陽明的心學,心的力量是很大的。同理到社交上,如果你看不見這個朋友,這個朋友十年沒見了,他其實不是你的朋友了。當你看見他,他才是你的朋友。王陽明的書還可以跟量子力學結合。我們微信 7.0 那句話,「因你看見,所以存在」,完全符合量子力學的角度。因為一個粒子,當你觀察它的時候,它才存在。你不觀察它,它就是一道波。
問: 微信 8.0 的啟動頁是怎么設計的?
張小龍答: 做產品其實是個很枯燥,很理性的過程,無法把個人情緒和情感帶入。唯一有機會帶入的地方就是啟動頁,你可以有一些情緒的發泄。微信 8.0 的啟動頁,有個故事我跟同事們說過,有次我在開一個很正經的會,中間我開小差了,拿了當時的一張紙,在上面寫了現在開屏頁的這幾句話。我覺得可以代表這次更新的每一個功能,剛好連起來了,而且我也覺得特別簡潔,沒有任何修飾和形容詞。我自己覺得挺好的。我看見你,代表了通過視頻號看到另一個身份的你。笑臉,代表了你的狀態。煙花,是代表新的表情。一首歌代表了新的音樂播放。你看見了你,其實代表直播,通過你的眼來看到你眼前的世界。
問: 為什么張小龍說「好的產品應該是用完即走」?
張小龍答: 我發現大家對于這個詞有特別多的一些誤解。大家都會說,因為大家都離不開微信,所以才會說“用完即走”,去年對這點可能沒有解釋得特別清楚,我其實只說了上半句話,用完即走,但其實還有下半句話,走了還會回來。
用完即走的本質是任何一個工具都是幫助用戶完成一個任務,越高的效率越好。 當我們完成一個任務以后,我們當然希望用戶能做別的事情,而不是一定耗在一個工具里。
比如說用微信,我們當然希望微信能給用戶帶來更多的幫助,但并不意味著我們希望用戶一直低效率地在微信里處理事情,如果他一天信息的處理要用兩個小時,那我們應該幫助用戶盡可能在兩個小時之內處理完,而不是說一定要把兩個小時的任務變成三個小時,讓他在微信里花費更多的時間,我認為如果那樣就不是一個用完即走的概念。
所以用完即走和用戶再回來,其實并不矛盾,相反只有當一個用戶在一個工具里用得很愉悅,用得很高效,他才會下一次回過頭來使用這個工具。我們現在說的小程序也是這樣的,小程序應該是幫助用戶盡可能在短的時間里面完成一個任務,并且離開這個小程序,這樣的話他才會有很好的體驗,下一次他會繼續回來用這樣一個小程序。
問: 微信一直倡導用完即走,但 8.0 版本怎么給人感覺用完不走了?比如視頻號加了更多推薦內容,似乎增加了用戶的停留時長
張小龍答: 推薦的東西,如果把它定義為是娛樂時段的話,那么它是在這里娛樂消費的。目標是消耗時間的。在這一個板塊,并不是說非要他立即就走。用完即走并不是說用戶必須使用的時間越短越好。就像一個 120 分鐘的劇,不是說為了讓你用完即走,我用技術讓你 60 分鐘看完,這樣就不合理了。
問: 微信的「悠閑」表情怎么戒煙了?
答: 很早之前,QQ 和新浪微博就撤除了吸煙表情。據悉這是北京控煙協會活動的結果,控煙協會認為這些軟件在日常生活中使用頻率非常高,每一次發送都會產生潛移默化的影響,有誘導青少年吸煙的傾向。
問: 為什么微信對用戶稱呼統一都是“你”而不是“您”?
張小龍答: 我們并不需要用一個很尊敬的態度稱呼用戶,而是應該當朋友一樣稱呼,所以應該是一種很平等的關系,這個寫進我們的產品條約里面去了。
問: 微信是工具還是平臺?
張小龍答: 在我們對公司的一次培訓里面,有個同事問我微信的戰略是什么?我當時只說了一句話,我說微信只是一個工具,我們應當想如何做好這個工具。在同事們的心目中,微信并不僅僅是一個工具,大家認為微信是一個平臺。但我認為微信是一個工具,這是一個非常宏大的目標,我并不認為一個工具是一個很低層面的東西,事實上人類從原始人進化智能人類的過程,就是因為人會制造工具,我們所用的絕大部分的產品本質上來說都是工具,但是工具有好壞之分,能夠做一個非常好的工具其實難度是非常大的,但是如果說我們要做一個平臺,我會不知道我們要做什么?一個好的工具應該有一個很強的屬性,就是提高效率,用完即走。
問: 為什么微信的設計很克制?
張小龍答: 克制這個詞從來沒有在我的腦袋里面出現過,如果說做一些事情我們要求自己很克制的話,那是一種什么樣行為?那是一種自我壓制的行為,但是我并不認為我們在做這樣的決定時我們要自我壓制,或者說自己切割掉我們很多想要做的事情,那不是一個很好的狀態。
相反的,我們在做很多很多決定的時候,反而要去判斷什么樣的東西是最合理的,合理性才是這里面要考慮的一個最重要的因素,我們會舍棄掉很多很多本來想要做,后來發現做不好的東西,這種舍棄并不是因為說我們很克制,所以我們少做一點,而是說我們發現有很多事情做不好,或者說有很多決定它一開頭是錯的,或者說很多的想法,最后驗證可能是行不通的,那我們如果硬要去做這些事情是不合理的,我們會把它舍棄掉,而不是說我們要克制。
問: 為什么微信 8.0 浮窗從懸浮改成了左上角?
張小龍答: 我其實一直很不喜歡浮窗。因為它就像狗皮膏藥。這也是 PC 時代大部分網頁瀏覽的體驗都不好的一個原因。
為了解決一篇文章要很久才看完,而中途要不斷處理微信消息的需要,我們有了浮窗功能。但它并不完美。很多時候,一篇文章,一個長視頻,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁瑣的。
現在,微信提供了一個尚未看完的內容的列表,方便可以隨時找回這些內容繼續看完。尤其是對于長視頻,更加需要隨時可以切走,然后又能快速找到。直播也一樣需要。
問: 為什么微信安卓版不采用 Android Design 設計風格?
Kantzou 答: 我每次在「知乎」上吐槽 Android Design 的時候,總是會有人在下面說,“哎呦,原來「微信」的安卓版做那么 Low 是嫌 Android Design 做的不好啊。”這種評論,我都不會回復。
我講一下為什么差呢,舉個例子:我給我爸買了個安卓手機,給他用?!肝⑿拧乖谀莻€時候,Tab 欄是在頂部的,然后我告訴他,“哎,左右滑動是可以切換的。”
我觀察他用,我會發現:4.7 寸屏,他往上按的時候,他不會去滑的,因為他看到那里有個字,他就會去按,因為他沒有學習到那個程度。Android Design 的問題在于太超前,我這么說,那些喜歡 Android Design 的人心里會不會更舒服一點?
為什么喬布斯那么牛 B?是因為他知道,觸摸屏出來以后,人的自然反應就是「press」,而不是「滑」?!富乖诂F今這個階段還不夠自然。Android Design 在這個問題上解決的不好,因為絕大多數的大眾不像我們,我們是已經充分學習了的。我相信很多大眾,比方說不是我們這個專業的學生,你去讓他們用一下 Android Design,我相信大多數人都是點,很費勁的點,Android Design 為什么會做成這樣?他覺得啊:大屏一定要做的讓人方便,所以操作是滑動,這樣不用讓他點擊,就不會讓他覺得那么累。所以我為什么覺得谷歌是一個除了個別 App 設計的不錯,其他 App 設計的都很爛的公司。谷歌設計的真的不好,我說的設計的不好,不是皮毛上面,所以你不要跟我糾結這些細節,我說的是他的邏輯不對,谷歌是一個太工程師思維的公司。
Android Design 有個「應用抽屜」,我跟我爸說,“我給你裝微信了”。
他問,“在哪里???”我說,“點那個地方?!薄芭丁彼f,“知道了?!毕麓斡謫?,“微信在哪里???”我跟他說,“點那個地方。”三次還是不知道,為什么?因為 Android Design 在給他二維的導航,因為你要在桌面上面滑動,如果桌面上面滑動沒有,你還要給他一個「應用抽屜」,在一個新的地方左右滑動,簡直 Unbelievable,但是對于安卓的技術思維的人來講,這個很合情合理啊。
問: 微信「設置」里為什么會有個「插件」?
張小龍答: 給用戶選擇權。為了保持微信的簡單,在微信里面,除了核心功能,大部分的功能都做成插件的形式。這個方向很早就定下來了。這讓我們就算加了很多東西,也沒有把微信變得復雜。
陸樹燊答: 微信團隊的基因里原來就有實驗室文化的,這個要從微信的歷史說起。
微信團隊在做微信之前做的是 QQ 郵箱。QQ 郵箱里面有一個功能叫“郵箱體驗室”,用戶在這里開通一些新奇的功能。QQ 郵箱正是靠一次次的實驗,嘗試各種功能,才從一個爛到沒人用的雞肋郵箱,慢慢變成雄踞行業第一位置的七星級郵箱。
而微信從創始之初,就一直在繼承 QQ 郵箱的「遺產」,從郵箱的 QQ 對話功能到微信的「QQ 離線消息」,從郵箱「漂流瓶」到微信「漂流瓶」,從「附件收藏」到「微信收藏」,從郵箱的「閱讀空間」和「郵件訂閱」到微信的公眾號……
同樣的,微信也繼承郵箱的體驗室,有了「第一個實驗室」,那時的名字叫「插件」。所謂插件,就是把功能選擇的權限給到用戶,用戶覺得喜歡和需要,就「安裝」插件,覺得不需要,就「卸載」插件。而開發團隊屆可以通過看用戶安裝和卸載的情況來決定插件的去留。
于是,有的插件試著試著就變成不可插拔的功能了,比如朋友圈,現在已經不能卸載了;有的插件試著試著就不見了,比如微博閱讀。
后來,大概在 13 年,微信 5.0 發布前后,微信插件改叫「功能」,深埋在微信的設置選項里面。因為隨著微信用戶量的增長,用戶習慣的改變,早期的那些插件功能已經被證明不需要了,但又有個別老用戶在用,不好刪除,就把它們的入口深埋起來。比如語音記事本、QQ 離線助手、QQ 郵箱提醒、群發助手。
這個修改,某種程度上意味著,微信的第一個實驗室時代結束了。這一輪實驗,基本伴隨著微信團隊在移動互聯網的探索和成長。實驗之后,微信也奠定了它的行業地位,所謂的「移動互聯網船票」。
問: 微信為什么重視產品設計而很少提到運營?
張小龍答: 對于一個產品,我們更應該偏向產品本身還是運營?這是一個老生常談的問題。這里也沒有絕對的衡量標準,只是看各家的特長和偏好了。而且對于不同的產品,也會有不同的偏重點。
而我的觀點是做一勞永逸的事情是最好的。很多開發的同事知道,在開發上我們到底是要做「類型」還是做一個一個「實例」?如果我們不是把各種訂閱內容抽象為一個訂閱平臺的話,可能就會做了很多很多的「實例」出來,產品變得非常復雜。比如微信的「漂流瓶」和郵箱的「漂流瓶」到底有什么不同?除了微信的「漂流瓶」可以發語音,在產品結構上的不同在哪里呢?郵箱里面的「漂流瓶」有不同種類,比如「同城瓶」「交友瓶」,它更偏運營一些;而微信里面的「漂流瓶」就只有一種。因此我們發現,在郵箱里面這樣做,我們會因為用戶的需求類型增加,需要不斷地增加內容才能滿足用戶,可以想象這么運營下去,會把大家都累死。所以我們更加傾向直接做到最本質的東西,至于它能滿足用戶什么需求,那是用戶自己的行為。我們做一個「類型」,而用戶自己來產生「實例」就可以了,也就是說,我們用「類型」的思路,把所有「實例」都做了。
我們按此方法做完很多特性以后,發現已經沒有改進的空間了,也不需要去改進了,一改進可能就不對了。因為一改進就可能變成去把它「具體化」,一旦開始「具體化」以后,就需要不斷地「具體化」,就沒有可以想象的空間了。
文章來源:優設 作者:龍爪槐守望者
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Dashboard在B端設計的工作中是一個繞不開的話題,在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。
Dashboard的中文直譯是儀表盤,最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序,用作稱為“widget”的小型應用程序之運行基礎。
2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達,對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是:為用戶提供全局概覽,讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據,功能和控件。
Dashboard設計案例
以下是Dashboard常見4點設計不是很好的案例,現在帶大家一個個看下怎么才是更為合理。
案例一:右邊Dashboard上的信息做了層級的區分,相對左邊更加直觀。
案例二:左邊Dashboard顏色偏熒光色,色彩語言相對右邊不適合長期工作使用。
案例三:設計方案時沒有采用格柵格化解決適配對不齊等等問題
案例四:dashboard模塊之間間距沒有呼吸感。
B端設計中,設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出:“業務整體狀況如何?有哪些關鍵指標?各指標的運行情況分別如何?哪些指標出現異常?需要用戶做些什么?”。由此可知,B端Dashboard產品中大多數都以看為主,輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時,可以用戰略概覽場景提供快速入口。
1.監控操作:
使用戶可以一目了然地檢查其狀態,提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。
2.分析處理:
通過數據圖表,配合控件進行不同維度的數據分析。以數據為中心,并顯示盡可能多的相關數據視圖。
數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度,更好分析決策。
綜合性Dashboard,既有提供數據全局概覽可視化,同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求
3.戰略概覽:
在復雜的業務中,可以呈現業務分散的重點信息,用戶可以通過提供入口快速跳轉至相關模塊。
B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后,我們再來了解下用戶場景。例如:用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能:充值。并且需要給到相應充值數據概覽:賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮,可以做到幫助設計師更清晰設計dashboard布局以及設計自查。
因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。
信息處理
當弄清楚需要呈現信息內容后,需要進一步對信息做處理。從用戶的角度,舉個例子在FMS財務系統記賬中,財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求,準確且高效。具體可以從以下四個維度來做進一步處理:覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個,確定核心指標的聯系及優先級。
合理的信息結構能夠幫助用戶高效閱讀,理解內容。如何將信息碎片有邏輯地組合在一起,合理呈現和布局,選擇使用什么結構視內容而定。
舉個例子:
對于管理者的角色來說使用Dashboard的訴求是:及時把控業務情況
信息處理內容:
1.掌握重要業務數據:經營數據,訂單數據,客戶數據;
2.了解員工工作進度;
3.處理急需解決的工作任務。
對于執行者的角色來說使用Dashboard的訴求是:高效完成工作任務
信息處理內容:
1.急需解決的工作任務:待發貨訂單,待退款,待跟進客戶
2.了解自己的工作進度
3.經常使用的功能:發布商品,添加客戶,開單
4.查看重要通知公告:公司發布的公告
Dashboard表現結構常見兩種類型:卡片型、流程型。
卡片型
最常見就是卡片型。即將有相關聯的內容進行分組呈現,讓Dashboard內容歸類而不雜亂無章。
流程型
內容相互之間具有一定的邏輯關系,如地理位置關系、數字包含關系、對象父子關系等,這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。
國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。
1.全局導航
在B端Dashboard中,全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。
1.1平臺LOGO
一般這里都會放LOGO,對于一些壁壘標準化B端服務,這里通常是給好標準規則,后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務,那么就可以直接定制設計。
1.2功能入口導航
就是菜單導航,在B端Dashboard一般都是在側邊。建議最多不要超過9個,遵循7±2原則。盡量將同類型歸類,好好利用下二級分類。另外入口不要太深,用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。
在國內B端產品中,最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統
優點:
拓展性,一級導航的數目可以展示更多;
層級清晰,一二三級導航都可以流暢展示;
操作效率高,用戶在操作和瀏覽中可以快速定位和切換當前位置。
缺點:
視覺動線左右折回,比頂部導航更易疲勞,
內容區的排版空間更小,需要考慮適配問題。
在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式?;旌夏J骄褪菍⒐δ苋肟诜譃轫敳颗c側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。
優點:
層級拓展性強,可達四、五級導航。
缺點:
操作難度上升、視覺動線更復雜。
還有一種模式:頂部模式,這種模式在國外產品中較多,在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式,在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航:saleforces、hubspot、zoho。
優點:
沉浸感比側邊以及混合都要強,幾乎不會對于用戶的閱讀行為有干擾,因為Web也有頂部瀏覽器菜單。
缺點:
一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式
1.3快捷功能導航
一般包含:消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角
在B端Dashboard中,數據概覽通常都是選取最關注的數據指標來展示,而不是全部數據;選取最關注的時間段,而非全部時間段。
構成:數據名稱+數字
這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點,甚至可以采用特殊的數字字體,例如DIN系列,來加強對比。
待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間,避免遺漏任務。
構成:待辦事項名稱+數字+可點擊跳轉的鏈接
待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點,數據必須是要能夠點擊的,因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來,平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。
用戶高頻操作快捷入口,點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣,需要仔細反復斟酌是否是用戶需要的高頻功能。
用戶當前最關心的任務,常用進度條或者時間軸的形式表示。
平臺用來觸達企業的信息,一般有產品更新動態,學習培訓,客服,廣告推送,活動消息(這個一般比較常出現在平臺類的b端產品中)
卡片式數據圖表可以拆分成圖表+輔助兩種組成部分
7.1圖表
B端設計師需要準確通過圖表來表達出用戶需要的維度信息。
7.1.1折線圖
隨時間(連續內容)而變化的連續數據,適合表現趨勢。Y 軸刻度值選擇要合理,以數據波動要最大化的顯示
7.1.2面積圖
面積圖和折線圖比較類似,針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個,有2個數據類型時,注意調整面積區域的透明度以及色系保持統一
7.1.3柱狀圖
通常用來統計累積疊加數據,數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值,單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素,不夠嚴謹,太活潑。最多使用兩種顏色,一種默認,一種hover或tap,保持界面統一性
7.1.4扇形圖
有共同的上一級層級作為統計總合,數據之間平級且有占比。數據必須是正整數,至少兩個以上數據,且用不同顏色表示
7.1.5環形圖
與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗,控制好留白呼吸感
以上是常用的圖形圖表,絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習
EChart:
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2輔助元素
卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成:標題、軸、提示信息、標簽、氣泡信息、功能(篩選、導出、保存)。當然在實際設計中,會根據場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達成目標,在最少的時間內獲取更多的信息。
7.2.1標題
標題是區分卡片信息,迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復,簡潔概括。
7.2.2軸
軸上最重要的內容就是單位,將每個數據在同一軸上都是維持同種基準。便于進行數據測量。
7.2.2.1軸的細節
現在知道了軸由哪幾部分構成,那么接著了解細節
軸線
軸線細節一般只考慮是否顯示,在有網格線的情況下,可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏,突出視覺重點,減少不必要的線條。
軸刻度
軸刻度是軸線上的間距不宜過密,確保信息可讀性以及呼吸感,根據 7±2 法則,在可見的卡片內盡量保持這個規則,可以利用抽樣顯示的手段來優化軸標簽重疊的問題,這種一般是在連續性內容上可以使用。若軸上單位信息確實過多,雖然是連續性內容例如展示30天單位,由于本身卡片信息不是過于最重要層級,設計在相對狹小空間尺寸中,那么建議考慮在軸線上安排滾動條,并將重看單位放置前位。設計特別注意點,將滾動條設計作為輔助元素不宜搶視覺。
網格線
網格線是用來輔助圖表數據直觀對比的,增加數據更快速的閱讀性。舉個例子:數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。
7.2.3提示信息
以對照的方式來理解可視化對象的項目歸類信息,總結圖形形狀和文本組成內容。
7.2.4標簽
在圖表中,標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。
7.2.5氣泡信息
當標簽默認不顯示,氣泡信息一般是鼠標tap或者hover時,顯示該位置的數據。在簡潔的頁面中,也能讓用戶直觀看到信息對應數據結果
7.2.6功能
這個模塊涉及的內容偏多,在表單頁面更常出現,以后有機會可以單獨說。一般常用功能如篩選、導出、保存??梢宰層脩艨刂坪陀押玫捏w驗
確定B端產品的設計風格
首先tob的產品dashboard說到底還是給使用用戶所使用,也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息,還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感,而是突出一種安全,高效,具有客戶親和力的商業產品特性。那么關鍵詞:服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。
色彩
常說色彩是一種情緒版,在Dashboard設計中,色彩也是映射關鍵詞的非常重要一個環節
字體
B端產品一般都是以數據為主要信息源,針對一些關鍵信息指標時,可以采用特殊的數字字體。由于本身數字字體包內存不大,所以也方便調用。例如DIN系列等等
設計稿尺寸
本篇內容都是針對pc端內容,具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計,但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同,C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶,哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。
設計原則
上面的內容更多是闡述每個部分的內容,實際工作中設計Dashboard時不一定按照那個順序進行,因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景,確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后,再開始考慮Dashboard設計執行。
同時在設計執行上也要特別注意幾個點:
1.突出核心指標(7個左右)
2.信息層級區分
3.減少用戶選擇,盡可能默認給到用戶需要的數據維度
4.界面簡潔嚴謹
5.避免過多顏色與不統一
6.數據維度正確圖表選擇
設計的注意事項以及建議
1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建,以便與研發團隊一起為業務助力。更好更快的發展。
2.在tob的dashboard設計中,設計師要特別注意數據表現的落地效果
3.當dashboard只在設計層面改版,并且改版內容過大時,推薦保留舊版入口,提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計,以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章:《B端必看的引導設計(一)》
4.允許用戶定制和共享dashboard,雖然不適用于所有的B端產品,如果類似于團隊協作中多種角色共用一套的dashboard平臺,可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求,并且能夠增加dashboard的使用率
5.dashboard關鍵信息數據盡量設計在一屏以內,作為數據可視化,內容快速瀏覽獲知全局,并且完成任務是比較重要的。
6. 突出統計數據的變化并對異常情況作出反應
7.數字設置不一定要設置為右對齊,但是單位是金額,那么要將金額設置為右對齊,為了使用用戶識別方便,快速比較。
8.設計完Dashboard一定要自查一遍,是否真的符合工作人員的使用場景。有沒有理解不準確的地方。
為什么b端設計師要懂得Dashboard,在很多b端業務場景中,有個特點,設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關緊要的指標,這就是失去了Dashboard存在的意義。另一方面在b端產品中,Dashboard往往是以首頁的形式出現的,是非常重要的。
文章來源:站酷 作者:一九互七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當我們設計師輸出了精美的設計稿,然后附帶了一個流暢的手勢動畫,交付給開發的時候,也期待著開發大佬搞出和自己預期一樣體驗流暢。但是等到實際體驗的時候,卻發現有一種說不出的鬧心。
“這個感覺不好按...”
“劃起來咋這么費勁呢?”
“怎么感覺動畫怪怪的?!?
當你正準備和開發一通友好探討的時候,這個時候開發向你發起了一系列靈魂拷問:
“你這個左滑的手勢,劃多少才算觸發?劃多快才算觸發?如果劃了一半劃回去算不算觸發?如果我先點擊后滑動算不算觸發?松手之后的動畫是多快的速度?什么速度曲線?要不要回彈效果?回彈阻尼系數是多少?”
這個時候你發現,自己提出的設計需求根本太天真了。
剛才的問題真實原因是,在做很多手勢識別或者一些我們看起來日常的效果,其實是蘊含了很多復雜邏輯的。
這些復雜邏輯原本被封裝在操作系統內,在系統內時可以隨時調用。但是一旦脫離了操作系統,那手勢的處理邏輯就會比較簡陋,導致最終的體驗不佳。
那這個時候也許你會想問,我們怎么會脫離操作系統呢?我們的手機不都是iOS和Android的嗎?不都是操作系統嗎?其實這里指的操作系統,是指操作系統的原生組件。這類組件只有在原生開發中才能被調用。
如今,很多App都使用前端語言來開發內部頁面(HTML/CSS/JS)。隨著Web混合開發,Flutter等跨端技術棧的出現,越來越多的團隊開始擁抱這樣的跨平臺技術棧。在節約了開發成本的同時,隨之而來的就是,在日常開發過程中,離純原生組件越來越遙遠。
在這樣的背景下,研發團隊的體驗設計師需要自己來研究用戶行為,手勢、組件和動效,實現原生組件類似的復雜邏輯,才能最大程度的接近甚至超越原生組件的體驗。
其實使用各個技術框架,也是有內置一些接口的。例如一些事件監聽器 / 動效曲線等。這也是騰訊文檔之前一直在使用的,但是會遇到一些問題??偨Y下來,主要有以下幾個問題:
無法精確操作:用戶的操作和操作反饋被自己的手指擋住,無法完成精確操作。
手勢識別誤觸:同一熱區支持了多個手勢,可是用戶的實操時的手勢動作又沒那么標準,導致用戶誤觸其他手勢。
手勢觸發費力:滑動費勁,需要滑動很長距離才能觸發預期的動作。
動畫不流暢:各個技術框架自帶的動畫曲線和插值器,良莠不齊,體驗不統一且不夠流暢。
對于原生組件,我們習以為常的系統控件和手勢設計,里面蘊含的智慧遠比我想象的更多。
舉個簡單的例子:iOS系統的首頁,它可以支持橫豎各個方向的滑動,并且在觸發一個方向的手勢之后,就無法再觸發其他手勢了。
但是其實有個問題,手指和平時演示的不太一樣。
就是手指貼合上屏幕的時候,手指與屏幕的貼合面,并不是均勻向四周擴散的,而是向下的擴散更大一些。對于觸摸中心點,在觸摸的過程中,就會有向下的一個偏移。
如果直接識別,這個偏移直接被識別為向下滑動,那就會無法觸發左右滑動的手勢。
例如在iOS內的手勢識別,有一個專門的接口來做識別:PanGestureRecognizer,這個接口會在10px內先判定手指移動的方向和距離,再對具體觸發的手勢來做定義。例如下圖,雖然剛開始手指位置有些許下移,但是最終還是可以左滑判定成功。
所以你會發現,如果在iOS桌面上輕微的向左右滑動(10pt內),桌面是不會有任何響應的。就是因為在10pt內,系統還無法確認手勢的方向。
另外,系統還自帶了很多手勢反饋操作,包括回彈效果,甩出效果。里面的小邏輯設計需要非常精準。并且對于滑動的手勢還帶了回彈效果,看起來非常爽。
騰訊文檔是基于Web / Flutter的應用,并且接管了很多原生系統的能力,包括排版能力、光標選區能力,拖動能力等。因此,很多基于Native開發能很簡單解決的問題,在Web下就要重新打磨一套我們日常習以為常卻邏輯復雜的組件。
由于騰訊文檔是基于Web的的應用,接管了很多原生系統的能力,所以不能使用系統的Gesture Recognizer,也不能使用系統的選區光標能力。
如果是簡單的使用前端的操作監聽器,那會要求用戶使用極其標準的手勢操作才能觸發,否則就會觸發失敗。因此需要設計更精準且適應性的規則,來包容用戶不那么標準的實操手勢。需要幫助用戶在粗糙的實操手勢下,猜測用戶原圖,并精準完成的操作。
可能你以為手勢操作并不常用,其實并不是的。
一個單擊,一個雙擊,其實本質上都是手勢。
不過,很多人可能會認為,按說這些操作都有原生的監聽器,不需要再去定義。但是其實如果不做一些進階定義,就會出現操作不靈敏的問題。例如下面這個問題。
在很多安卓手機上,或者是我們自己的騰訊文檔里,時常遇到一個問題:就是原本以為雙擊文本區域可以選中文字,可是卻發現這個雙擊成了一個玄學事件。雙擊有時生效而有時不生效。
理想的雙擊大概是這樣的,是需要2次有效的Tap事件:
這個Bug讓我們來定位一下。讓我們還原一下事情的經過:
哦!原來是因為雙擊的其中一稍微偏移了一下,拖動到了光標,導致系統判定是一次Tap一次Drag的行為,這樣就沒有辦法觸發雙擊行為了。
解決方法也很簡單。把10px偏移距離內的滑動行為都判定為點擊行為就可以了。從這里看,我們其實需要做的是,規范“點擊”這個手勢的定義。
因為原來的系統自帶定義,容易造成誤操作,而且手指貼上屏幕的時候,都會產生輕微位移,或者一不小心滑動了頁面,或者不小心拖動了光標,導致手勢識別的不靈敏。
原定義:“點擊并在500ms內在原處松手”。
需重新定義為:“點擊并在在500ms內,在10px以內處松手”。
另外,文檔移動端也定義了一系列更進階的手勢的操作,在這樣對手勢的進階定義后,操作可以被更精準和智能的判斷。這些定義被寫在了設計規范中,包括了單擊 / 雙擊 / 長按 / 拖拽
騰訊文檔的整個文本編輯區域都是使用Canvas實現的,由前端自主控制渲染。因此,選區光標就無法直接使用系統能力,需要設計師來設計一套選區光標,并且支持系統的各種選區光標的手勢。
由于騰訊文檔的光標選區是非?;A基礎的編輯組件。這個組件在一般的產品中,都是直接復用的系統組件,但是在騰訊文檔中,就需要重新去考慮光標組件。
首先有個需求,光標是可以在文本中快速拖動的。
經常會遇到拖動。無論是光標拖動,還是長按選中,我們都希望能清楚的看到光標的位置,所以我們在用戶拖動光標和選區的時候,使被拖動的組件放大1.5倍,使用戶可以看到拖動效果。
這就夠了嗎?不夠的。
如果用戶想要精準的控制光標,首先要讓用戶完整的看到光標。用戶在拖動光標的時候,手指經常會不自覺的向下移動。這是為了讓自己看清光標,這個時候,我們不應該把這個移動當做是把光標向下移動一行,光標本身不應該跟隨向下,應該只在同一行,并且只響應左右移動。
但是當我向下拖更多距離的時候,光標就應該一直保持在手的上方,以確保用戶可以精確操作。
同樣,我們定義了長按后可以拖動選擇的手勢。在拖動的過程中,允許用戶向下偏移一定的區域,來看清選區的具體邊界位置。
手機端的光標選區,一個我們日常習以為常的光標,里面竟然有那么多小細節在里面,才能讓光標變得好用。
當一個滑動手勢被觸發時,我應該如何判斷這個手勢已經被觸發了呢?這個判斷并非簡單的橫劃豎劃,而是針對的不同的場景,去做特殊的處理的。
案例1:向下滑動手勢
例如說,一個非常簡單的手勢,半屏向下滑動關閉。我們通常來說我們的日常體驗,會是一個對距離的判斷,當手指拖動容器超過一定的距離,然后松手,就可以觸發手勢。
但是僅僅判斷距離是不夠的。因為手勢是對現實世界的映射。很多時候用戶希望滑動很短的距離,把東西“甩”出去。
如果僅僅判斷距離,那就很難“甩”出去。這時候就還需要判定用戶手指在離屏時的速度了。最后能達成一個比較輕松就能觸發手勢的結果。
案例2:左右切換相機
這是騰訊文檔的文檔掃描頁面。上半屏是大面積的取景畫面,底部是文檔類型的選擇。
因為取景頁面可以點擊對焦和測光,因此輕微的滑動不應該導致整個取景頁面或者底部Tab的滑動,應當是當整個頁面檢測到一個比較大的滑動動作之后,才自動移動切換。
但是如果需要離手才能觸發,如果用戶劃動的速度比較慢,整個體驗也會隨之變得過于拖沓。所以這里還加了一條邏輯:當手指滑動速度的加速度急劇減小時,不用松手也可以觸發手勢。這樣的體驗感會覺得流暢很多。
在騰訊文檔中,點擊、滑動、懸浮、長按等手勢操作貫穿用戶的使用過程,動畫效果是所有交互操作的視覺反饋,也許它沒有那么的「高逼格」,但它卻是這臺精密儀器運轉不可缺少的“潤滑劑”,流暢愉悅的動效能夠讓體驗更美好。
但是由于騰訊文檔起初是基于web混合開發,后面又加入了Flutter框架,這就導致多個平臺、框架的動效邏輯混在一起,在這個背景下,設計師們就需要從多方面重新梳理并定義動畫的基礎規則。
自然流暢是騰訊文檔內所有動效運行的基礎原則。
由于騰訊文檔是基于Web、flutter等多框架混合開發的應用,動畫曲線又都是基于各自框架自帶的貝塞爾曲線(cubic-bezier),這就經常導致一些同類型的手勢操作,最后所呈現的動畫效果卻相差很多。并且原生的動畫曲線,在實際使用上并沒有達到很好的效果,只是能夠比沒有動畫要強上一些。因此,確定一套統一、自然并且適合騰訊文檔的動畫曲線,是設計師優先要解決的問題。
為此我們根據動畫使用的場景,定義了四種標準曲線。同時輸出給開發同學,作為標準可調用的曲線。
緩動曲線應用的場景最為廣泛,也是騰訊文檔的默認曲線。相對于傳統web端或者flutter框架內的默認曲線,騰訊文檔的緩動曲線開始時會比較迅速,這樣能給用戶及時反饋、高效運行的感受;在運動快結束的階段,為了避免快速反饋帶來急躁的負面感受,曲線會更加平緩,進而使正在運動的元素吸引用戶的注意力,并讓用戶能夠有一定的思考時間,保證動畫的合理性。
即減速曲線。運動元素在開始階段時位移變化會很大,但是后面會越來越小。緩出曲線前期快速運動,不需要過多讓用戶留意,在結束的時候逐漸減慢速度,讓用戶關注到其新的狀態,用戶就可以提前切入到定位尋找的階段,等動畫停止后就可以立即進行操作。這種類型的曲線通常是用在元素進入界面時使用。
彈性曲線是一種基于阻尼彈性振蕩的原理實現的復雜曲線,阻尼比決定了曲線具體動畫感受,根絕阻尼比的不同,彈性曲線可以分為三種,分別是欠阻尼運動、臨界阻尼運動及過阻尼運動。在騰訊文檔中,通常只會使用到欠阻尼運動及臨界阻尼運動。
彈性曲線卻并不適合在所有的使用場景中,因為這種運動一般情況會需要相對多一些的時間來完成整個運動過程,讓整個過程變得過于拖沓。同時過于活潑的彈性動畫也會過分的吸引用戶注意力,打斷主進程的操作,影響效率。
時長是元素移動所需的時間,在創建自然流暢的動畫中起著重要作用。如果動畫太慢,會使用戶感到卡頓和厭煩;但是如果速度太快,就會給人緊張急迫的感覺。因此動畫的持續時間應該給與用戶充分的反應時間,同時又不用過久等待為標準。
在移動端上,我們設定動畫的持續時間在300-400ms。而在web端上,我們設定動畫的持續時間在200-300ms內。具體的運動時長視具體動畫而定,時長并不一成不變。
曲線是動效的靈魂,有時候你覺得平凡的動畫,或許只需要簡單地撥動那條運動曲線,就可以讓這個動畫瞬間變得充滿靈氣。盡管曲線可以解決大部分動效問題,但在動畫的實際落地中,還是有一些問題,是它無法解決的。這就會涉及到動畫更底層的渲染及邏輯。比如說在web端,前端動畫卡頓與否其實是和動畫本身實現性能有關系的,瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒有在web端增加太多動畫的原因,過多的動畫效果其實意味著需要更多的性能資源傾斜到動畫上。
在動畫上除了希望提供自然流暢的積極體驗,我們也希望繼續深入,“讓工具褪去冷冰的外殼,走進與智能隔空對話的新世界”。讓體驗更有情感,讓用戶更愉悅。
在待辦事項上,優化前每當用戶點擊完成一項事項時,完成動畫僅僅是機械的從未完成向完成圖標的替換,反饋效果非常“高效”的完成了它的任務,但是這樣就足夠了么?不一定,當一項事項被列為待辦時,就證明這件事對于用戶來說是重要的。在現實中,當重要的事情完成時,我們都是歡欣的,就像心里在放煙花,完成待辦時候的動畫理應如此,讓用戶在完成的那一刻體驗到“煙花”的綻放。
但是總有一些產品,或者是通用性的考慮,或者是一些歷史原因,或者是一些成本考量,走上了非原生開發的路,這樣的產品在未經打磨的情況下直接一把梭搞出來,的確會顯得卡頓,或者難用。
這其中不僅需要工程師一點一滴的性能優化,這也對體驗設計師對細節的把控提出了更高的要求。只有對用戶的行為處處關照,才能無限接近最極致的體驗。
文章來源:站酷 作者:騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
招行估計是考慮到沒有配置現任經理的詳情,又不想浪費標題右側的空間,才作此設計。
其他相關:這部分包含的基金公司、基金檔案、交易規則屬于并列關系,理應出現的分割線卻沒有體現,雖不影響投資者使用但反映出UI組件規范缺乏一定邏輯性。
交易規則:在購買時間點缺少了T日(交易日)收盤時間(15:00前)提示和周歷提示。頁面空間是富余的,完全可以將信息曝光提高投資者的時間感知度,而不是跳轉二級頁面才能了解詳情。
功能模塊十分豐富,cover了關于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經理介紹等內容,間接的包含了問答、討論、資訊、公告等內容。
在產品的廣度與深度方面,天天基金選擇了把廣度拉寬,將很多二級內容拍平,嵌入到一級頁面中,可以說非常適合經驗型投資者,但隨之而來的劣勢也十分明顯 - 頁面過長。
非常直觀,天天的基金頁面長度是招行(或螞蟻)的兩倍不止。
有了上面招行基金詳情頁的大致結構做支撐,這里就不把天天基金的頁面逐個模塊拆解分析了,我們挑一些有意思的來說。
基金概況:跟隨漲跌變化的紅/綠頁頭,這是天天最具標志性的設計之一,個人對此保留意見,這么大面積綠色在過去的一周,實在是令人焦慮。
凈值行情/歷史數據:天天基金在凈值模塊單列出了“單位凈值”和“累計凈值”的走勢圖,還直接標明了不同時段區間內的最高最低值。(“累計凈值”是基金自成立之日起至今的凈值表現,“單位凈值”是基金運作期間扣除分紅和份額拆分影響之后的凈值表現。)
聽說這是區分老基民和新人小白最直接的一道坎,當然作為一個UX設計師,我也就摻這一句,畢竟資格還遠遠夠不上老基民。
非常貼心的一點是,天天在這添加了定投該產品的收益可視化。根據歷史收益率回測和不同定投算法,進行一段時間內的收益率估算。與此類似設計的產品還有漲樂財富通。
特色數據:這也是經驗投資者非常重視的三個指標。波動率反映收益率波動的程度,越小越好;夏普比率指基金每承受一點風險能夠獲得多少超額收益,越高越好;最大回撤指基金凈值從最高到最低的降幅,越小越好。
基金持倉:這又是一個老基民的福利專區。上面分析過招行基金持倉tab的優勢,而天天直接把帶有重倉股盤中行情的持倉列表、資產/行業分布餅圖直接嵌入到一級頁面里,雖然默認只顯示前五只重倉股,但對于了解相關板塊行情也很有幫助。
這一模塊的二級頁面也支持投資者切換時間去觀察基金經理每一季度的調倉風格。其實我個人更傾向于直接把十大重倉股行情全都放進來,默認折疊需要時展開。畢竟調倉不是個高頻動作,我不會需要頻繁地跳進二級頁面去觀察調倉。
基金經理:作為后臺烹飪的cook,這塊的簡介過于“簡潔”了。其實次一級的經理詳情頁里有非常詳實的背景概述和任期間業績回報評估,完全可以精選一些標簽化的內容在一級模塊里完善包裝。
社交化:然后比較有意思的就是“社區”概念。天天基金上每只基金都分別有兩個“bar”,一個問答吧一個貼吧,貼吧包含了問答吧。
這里能體現出天天對于細分場景的重視。貼吧里的話題天南海北,吐槽的、圍觀的、提問的、表態的、發小作文的、曬收益/虧損的,啥都有。
天天的產品經理還是為提問用戶單獨開辟了一片凈土,讓內容的傳播與觸達更加高效。
回到UI層面,天天基金頁面的文本內容在邏輯結構上比較復雜,但視覺上沒有將不同層級的對比度拉開,導致文本信息過于平均,不利于重點信息的快速檢索。
財富號視頻:視頻可以展開和收起。產品還給它配置了觀看人次,側面為該基金公司和旗下基金產品做熱度營銷。
基金概況:除了基金相關的基本信息以外,模塊內展示了晨星評級和關注人氣。既有客觀權威評估體系,也有用戶層的氛圍烘托,通過兩層信任力建設占領用戶心智。
信任力背書:“支付寶金選”是由支付寶理財智庫、中國證券報聯合推出的一套理財產品評估體系,背后有一些專家KOL背書。能夠篩選出部分歷史業績表現優異、基金經理業績突出的產品。
相比于前幾個信任力的營造,這一點的重要性和優先級遠遠勝出。因此在視覺層面也用黑金配色體現出權威性和尊享感。
能夠很明顯地察覺到互金平臺和金融機構在產品包裝上的玩法不同:互金平臺傾向于權威背書和人氣營銷,金融機構傾向于指標構建和數據展示。
行情/數據:這一模塊增加了一個可以手動關閉的tag,是關于“風險回報比率”的描述,一個聽上去類似“夏普比率”的指標。優勢在于螞蟻直接量化轉譯了指標的結果——“好于同類98%基金”,省去了投資者分析指標的過程。
基金經理介紹:關于這部分,雖然在基金經理介紹的二級詳情頁里,天天基金比螞蟻財富要詳實得多,但一級模塊里螞蟻的人物包裝還是更到位。“金牛獎得主”和學歷/從業背景簡述能直觀地提高產品在用戶側的信任力。
持倉行情:這可以說是該頁面視覺創新的重頭戲。螞蟻財富由于相關個股數據缺失,并不能像招行和天天基金那樣橫向比對每個季度基金經理的調倉動作,對于經驗投資者研判這只基金來說,少了一個觀察維度。
而視覺層面的創新則顯得十分取巧,原本枯燥的個股行情列表被轉譯為可視化的矩陣,矩形的大小和底色能直接映射該股票的持倉占比和實時行情。并且橫向滑動的組件也支持在不跳轉的情況下完整顯示10只重倉股。
對于持有或長期關注這只基金的用戶而言,除非你要分析調倉,否則是不需要頻繁進入二級頁面查看持倉明細的。
以及細致到小數點后兩位的持倉占比,意義也不大,了解大致的配比關系即可。螞蟻這個可視化組件在帶來新穎視覺觀感的同時,也解決了這一問題。
對于產品而言,信息架構往往是最容易有爭議的部分。而金融產品的信息深度和業務復雜度尤為明顯,與之俱來的必然是各平臺在架構策略上百花齊放。
文章來源:站酷 作者:loven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
運動對數字產品的用戶體驗產生了深遠的影響,但是,如果界面元素沒有表現出基本的運動設計原理,則可用性會受到損害。在用戶界面的上下文中,動作不僅僅是視覺裝飾。它是一種強大的力量,可增強產品參與度并擴展設計交流的范圍。
我們的世界是運動之一。即使在靜止的瞬間,葉子也會發抖,肺部也會擴張。在數字產品設計領域,運動似乎是第二自然,這是對日常工作的擴展,可以毫不費力地加以利用。
從理論上講,使UI元素移動很容易。在預定路徑上定義點,然后軟件對間隙進行補間。實際上,它不是那樣工作的。工具和技術是必不可少的,但它們是從原理中獲取力量的。如果要提高數字產品的可用性,就必須以適用于無數用例的不變行為規則為基礎。
運動設計的起源
運動設計與UX的結合相對較新,但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運動的基本定律。它們使繪制的角色能夠移動和表情,但不能充分滿足現代用戶界面對交互運動的需求。
當代設計師試圖彌合這一差距。更具說明性的示例之一是動畫設計的十項原則,這是迪士尼動畫專家Jorge R. Canedo Estrada的改編作品。
在建立運動中用戶體驗的原則時,可以從以下幾點入手
A. 從UI動畫中區分運動設計
B. 闡明運動如何幫助可用性
C. 解開核心運動行為的內部運作方式
運動不僅僅是裝飾
動作設計不是UI動畫的代名詞。這一點很關鍵,因為UI動畫幾乎總是被當作一種經過深思熟慮的外觀,而與UX沒有任何關系(除了增加魅力)。動作不是裝飾,而是行為,行為只能幫助或阻礙用戶體驗。
兩種互動類型:實時與非實時
運動設計涉及兩個基本交互:實時和非實時。
當用戶在屏幕上操作UI元素時,實時交互可提供即時反饋。換句話說,動作行為會立即響應用戶輸入。
用戶輸入后會發生非實時交互,這意味著用戶必須短暫暫停并觀察所產生的運動行為,然后才能繼續。
實時交互:運動行為會立即響應用戶輸入。
非實時交互:交互后,用戶必須短暫等待并觀察動作行為。
運動支持可用性
運動設計必須以四種不同的方式支持可用性。
A. 期望:當用戶與UI元素交互時,他們期望看到哪些運動行為?運動是否符合預期或引起混亂?
B. 連續性:交互是否在整個用戶體驗中產生一致的運動行為?
C. 敘述:交互及其觸發的動作行為是否與滿足用戶意圖的事件的邏輯進程相關聯?
D. 關系: UI元素的空間,美學和層次屬性如何相互關聯并影響用戶的決策?運動如何影響存在的各種元素關系?
數字產品的12種運動設計原理
1.緩和
緩和模仿現實對象隨時間加速和減速的方式。它適用于所有顯示運動的UI元素。
放松的反面是線性運動。顯示線性運動的UI元素立即從固定速度變為全速,從全速變為固定。這種行為在物理世界中不存在,并且對于用戶而言似乎停滯不前。
UI卡和相應的椅子移動很快,但是由于緩和,它們可以平穩且受控地停下來。
2.偏移和延遲
當多個UI元素同時且快速移動時,用戶傾向于將它們組合在一起,而忽略了每個元素可能具有其自身功能的可能性。
偏移和延遲會在同時移動的UI元素之間創建層次結構,并傳達它們是相關的但又不同的信息。元素的時序,速度和間距不是完全同步,而是交錯排列,從而產生微妙的“一個接一個”的效果。
當用戶在屏幕之間漫游時,偏移和延遲表明存在多個交互選項。
這個加密貨幣應用程序一次引入了多個UI元素。它們的到來有些交錯,以通知用戶這些元素是相關的,但又是截然不同的。
3.父子元素關聯
父子元素關聯將一個UI元素的屬性鏈接到其他UI元素的屬性。當父元素中的屬性更改時,子元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。
例如,父元素的位置可以綁定到子元素的比例。當父元素移動時,子元素的大小會增加或減小。
父子元素關聯會在UI元素之間創建關系,建立層次結構,并允許多個元素立即與用戶進行通信。因此,關聯在實時交互中使用時影響最大。
藍色滑塊的位置控制背景遮罩的不透明度,燈泡周圍的發光效果的散布以及光強度標度的數值。
4.轉型
當一個UI元素變成另一個UI元素時,將發生轉換。例如,下載按鈕將轉換為進度條,該進度條將轉換為完成圖標。
從UX的角度來看,轉換是一種向用戶顯示其相對于目標的狀態(系統狀態的可見性)的有效方法。當UI元素之間的進度鏈接到帶有開始和結束的過程(例如,下載文件)時,這特別有用。
轉換表示下載的開始,中間和完成。
5.數據變化
在數字界面中,數據表示(數字,基于文本或圖形的表示)豐富,出現在從銀行應用程序到個人日歷到電子商務站點的產品中。由于這些表示形式與實際存在的數據集相關聯,因此它們可能會發生變化。
值的變化傳達了數據表示的動態性質,并告知用戶數據是交互式的,并且可能會受到一定程度的影響。當沒有動靜地引入值時,用戶參與數據的意愿降低。
動態引入值以向用戶顯示他們有能力影響數據。
6.遮罩
遮罩是UI元素各部分的戰略性揭示和隱藏。通過更改元素外圍的形狀和比例,遮罩會發出信號,表示實用性發生了變化,同時允許元素本身保持可識別性。因此,理想的選擇是諸如照片和插圖之類的詳細視覺效果。
從可用性的角度來看,設計人員可以實施屏蔽以向用戶顯示他們正在通過一系列交互進行中。
遮罩用于從圖像捕獲到上傳到在線店面中的過渡。
7.疊加
在2D空間中,沒有深度,UI元素只能沿X軸或Y軸移動。疊加會在UI的2D空間中產生前景色/背景色的錯覺。通過模擬深度,覆蓋可以根據用戶需要隱藏和顯示元素。
使用重疊時,信息層次結構是一個重要的考慮因素。例如,用戶在做筆記應用程序中應該首先看到的是他們的筆記列表。然后,可以使用滑動來公開每個消息的輔助選項,例如刪除或存檔。
重疊式運動可讓用戶快速歸檔或刪除此記事應用中的條目。
8.克隆
克隆是一種運動行為,其中一個UI元素拆分為其他元素。這是突出顯示重要信息或交互選項的聰明方法。
當UI元素在界面中實現時,它們需要一個清晰的起點來鏈接到屏幕上已經存在的元素。如果元素只是無處不在而突然爆發或消失,則用戶將缺乏進行自信交互所需要的上下文。
用戶可以放心地單擊彩色圓圈,因為它們顯然源自“添加注釋”圖標。
9.模糊
想象磨砂玻璃門。它需要交互才能打開,但是可以(在某種程度上)辨別另一端正在等待什么。
它為用戶提供了一個界面,該界面要求進行交互,同時顯示要跟隨的屏幕提示。導航菜單,密碼屏幕和文件夾/文件窗口是常見的示例。
模糊處理為用戶提供了重要的互動方式,同時讓他們保持產品敘事的方向。
10.視差
當兩個(或多個)UI元素同時移動但速度不同時,將顯示視差。在此,目的是建立層次結構。
A. 交互式元素移動速度更快,并顯示在前景中。
B. 非交互式元素的移動速度變慢并退回到背景。
視差引導用戶使用交互式UI元素,同時允許非交互式元素保留在屏幕上并保持設計統一性。
使用視差時,最重要的交互式元素移動最快,而非交互式元素移動較慢并退回到背景。
11.維度
維度使UI元素似乎具有多個交互方面,就像物理世界中的對象一樣。通過使元素看起來像是可折疊的,可翻轉的,浮動的或具有逼真的深度屬性而實現的。
作為一種敘事設備,維度意味著UI元素的不同側面被鏈接在一起,并實現了無縫的屏幕過渡。
維度意味著2D UI元素具有多個交互方面,就像物理世界中的對象一樣。
12.變焦
滾動和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細節。
A. 滾動:滾動視角發生在用戶的角度更接近(或遠離)UI元素時。想象一下,一個拿著照相機的人走到一朵花前要近距離拍攝。
B. 縮放:使用縮放時,用戶的視點和UI元素保持固定,但是該元素在用戶屏幕內的大小增加(或減小)?,F在,假設該人保持姿勢并使用相機的變焦功能使花朵顯得更大。
滾動:用戶的視點似乎越來越接近背景圖像。
縮放:用戶的視角不會更接近圖像。而是圖像的比例會增加。
運動就是溝通
互動體驗的需求運動在其所有的輕快和微妙的形式。當堅持運動設計原則時,即使最基本的UI元素也成為人類交流的復雜媒介。當這些原理被忽略時,運動就體現了自然界所沒有的特征。
運動設計與數字產品UX之間的關系正在迅速成熟。原則上的運動方法可以防止過度依賴趨勢,工具和技術的短暫使用。更好的是,它跨越了2D屏幕上元素的抽象運動與3D世界中運動感知之間的鴻溝。
文章來源:站酷 作者:DuiaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表單已經存在了很長一段時間,自誕生以來極大地簡化了起草申訴和各種法律訴狀的任務。隨著信息與處理技術的進步,收集數據的手段也在不斷發展,而印刷表單已存在多年,我們可以從其設計中學到一些技巧。
用戶可以在文本欄內輸入信息,它們通常以表單和對話框的形式出現。文本字段組件的設計應為交互提供清晰的功能支持,使字段在布局中易識別、易填充和可訪問。
以下是組成文本欄的關鍵要素:
容器:可交互的輸入區域;
輸入框:在文本欄中輸入文字;
提示:告訴用戶給出的表單字段是什么信息;
占位符:是所需信息的描述或示例,用戶輸入正確信息內容后被替換;
幫助程序或驗證文本(可選):單獨出現或以驗證消息的形式出現;
頭部圖標(可選):描述文本字段的輸入類型;
尾部圖標(可選):輸入文本的附加控件,例如清除,隱藏/顯示等。
它們大多數都是相對基礎的文本字段類型,被修改成了處理特定類型的信息,例如信用卡號。以下是我創建的UI中最常用的一些輸入類型示例:
為收集的數據提供幫助規避錯誤,讓用戶可以正確的輸入信息,從而使過程簡單高效。
文本欄的狀態可以通過視覺提示來實現,輸入信息時的狀態有以下幾種:未激活、懸停、禁用、激活,驗證、錯誤。所有狀態應清楚地被區分開,并在整個表單和應用中保持一致,簡潔明了,不要誤導用戶。
通常標簽定位有三種:頂部、左側和右側對齊。最適合的樣式將取決于表單的大小、主要目標、組件庫和要為其設計的平臺,但它們都有各自優點和缺點。
谷歌的“材料設計”指南中,普遍使用的下劃線輸入并不是最佳選擇。有趣的是,在一項研究結果中發現用戶更喜歡帶圓角的輸入框。
當用戶不熟悉所請求的數據時,這是一個不錯的選擇。
優點:易于標簽伸縮,充分利用垂直空間;
缺點:標簽與對應的文本欄,距離過元,增加用戶閱讀的時間成本。
與左對齊標簽相比,完成時間快了將近兩倍。
優點:標簽和輸入欄靠近,限制了眼睛移動的次數,從而縮短了完成時間;
缺點:難以快速瀏覽表單并理解所需的所有信息。
在移動設備上效果很好,因為它們不需要太多的水平空間。
優點:用戶可以快讀瀏覽輸入標簽和輸入文本;
缺點:需要更多垂直空間。
表單中的所有文本欄,若設置相同長度確實會顯得非常美觀,但實際在操作上,卻很難完成。
占位符文本消失會給用戶制造緊張感,而去掉標簽,用戶則無法在提交表單前檢查他們提供的信息。如果在設計時需要極簡的表單,可以使用“材料設計”的浮動標簽法。表單內的占位符文本還會使用戶感到困惑,最好在字段外使用提示文本。
使用自動完成功能,填寫時會幫助填寫及查詢。一般在輸入時可以看到,對查詢內容按Enter或右箭頭鍵就完成了填寫;
使用Auto-Suggest搜索關關鍵字和短語時,下拉列表會顯示多個建議;
預填充字段會經常使用智能默認值,比如通過IP或地理位置,就能檢測獲取到用戶所在的國家和城市,或是根據常見的場景,自己定義默認情況下的內容。需要注意的是,電子商務是一個例外,請勿預先設置與購買相關的任何偏好,比如尺寸或顏色;
還有一種應用情境,自動完成功能可以幫助用戶做出正確決定或避免錯誤,比如用戶轉帳時看到賬戶余額等,請一定要提供該信息。
指的是用戶輸入信息后,可以實時檢查輸入內容的有效性,而不是等用戶提交表單時一次性檢查。正確應用,降低信息出錯率:
在輸入內容的文字欄下方顯示驗證消息;
不要突然蹦出嚴重警告,填寫的消息錯誤時,應告訴用戶如何解決,而非責怪。
消除視覺及認知負擔,使界面看起來更加簡潔。
不要將全名和日期之類的文本分成多個字段;
不要多次詢問相同的信息。
逐步公開,提供必要提示即可,幫助用戶管理復雜信息。
根據用戶回答,條件邏輯允許在表單中自動顯示、隱藏字段和跳過頁面。這種方法不僅可以減少字段數,而且可以使填寫過程更像對話,也更具個性化。
簡化表單的最有效方法,其中之一則是為相關字段進行分組。格式塔心理學里有許多種分組原則,使項目有關聯性:接近性、相似性,連續性、閉合性和連通性。在界面中,如果將數十個非結構化字段分組為幾個可管理的集合,將顯著提高表單的可用性。
一欄布局能為用戶創建一個清晰的完成路徑;使用多列表單布局,會導致用戶跳過實際需要輸入的字段,將數據填寫到其他位置,這會迫使用戶停止甚至放棄填寫。
有時,即使刪除了所有不必要的內容后,某些表單還是很龐大。將大型任務分解為一系列的小任務反倒容易得多,也能激勵用戶堅持到最后。
顯示步驟,直觀地告訴用戶實際進度,這能提高用戶滿意度并激勵他們繼續前進;
不要細化表單,太多的步驟非常啰嗦,只會惹惱用戶;
對關鍵信息進行總結以減輕用戶焦慮,在最后設置復查步驟,幫助用戶檢查。
如果表單足夠大,可以分成多個步驟,那么就應該有一個單獨的、重點明確的界面來專門處理它。在導航中用其他鏈接會破壞正常流程,導致邏輯混亂,而且在小型彈出窗口中也不建議使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在方便不同類型的輸入。為了簡化數據輸入,在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型,同時也要注意鍵盤出現的位置。將文本字段放在上方區域,避免滾動展示。
允許密碼取消隱藏來代替多次密碼輸入,這對于生成密碼的應用程序也更有效;
隨時顯示密碼要求,并顯示用戶滿足了哪些條件,方便查看進度;
使用強度表鼓勵用戶創建更強更安全的密碼。
文章來源:站酷 作者:UX辭典
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
排版將文字從單純的文本轉換為巧妙的交流方式。字體和類型設計可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統的永恒變化到全新的技術。
字體在現代文化和商業中的突出地位受到包豪斯藝術運動的影響。赫伯特·拜耳(Herbert Bayer)是包豪斯(Bauhaus)的學生,并通過采用還原性極簡主義的原則在版式設計上留下了杰出的印記。
數字圖形媒體和設計師本身的爆炸式增長催生了各種各樣令人驚奇的想法和進化。有些想法只是一時的流行,而另一些則是可以保留的趨勢。我們重點介紹了2021年最流行的字體趨勢。
1. 襯線字體
襯線字體當然是永恒的–因此,當以新的現代方式使用它們時,它們會重新出現在趨勢圖上。通過將細長和粗體元素并置,我們看到古典襯線字體作為一種持續的趨勢重新回到設計中。尤其是受到美容和DTC品牌的推崇,該款式具有柔和的美感,可以在許多行業中使用。
我們的示例顯示了帶有泥土色的苗條襯線字體的優雅搭配,從而柔和了整體氛圍。
Neubel本身是一家字體鑄造廠,使用柔和而優雅的顏色托盤并將文本覆蓋在對比鮮明的藝術品上,以大膽地表達自己的觀點。
設計公司Autumn展示了視覺層次結構的強大功能以及自信的版式和簡單的形狀。
2.輪廓字體
輪廓字體在2020年出現了很多的創意,我們希望在2021年會看到更多。透明字體在與粗體,填充字體并排顯示時,更加強大。
我們的示例表明,輪廓傾向于在網頁設計中占據中心位置。Heetch在相同顏色的純色襯線字體上方使用藍紫色輪廓字體,以表現出對比效果。
Aldo在“走進愛情”廣告系列中使用了當年Pantone顏色的陰影。廣告系列以自信和表達為中心,明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發光的絕佳選擇。日本設計師Ukyo Masuda憑借中性灰色調色板為該群體錦上添花,盡管如此,它還是通過創意的輪廓字體而栩栩如生。
3.進化的野獸派
如果您希望營造視覺張力并擺脫標準網頁設計的束縛,那么野獸派字體與現代野獸派元素相結合就可以完成工作。野獸派字體的清晰,原始,略顯復古的設計經過了現代化改造,成為我們所謂的“進化的野獸派”。在經過改進的版本中,苛刻的元素被軟化并與各種調色板和形狀結合在一起。
我們的示例顯示了進化的野獸派的不同變體和組合。內森·泰勒(Nathan Taylor)使用了大量實驗元素和互動性。整個設計是野獸派的,不僅僅是字體。這是對更加野蠻的野蠻主義的一個很好的展示,但是現代的元素使這種感覺更加精致和進化。
4.文本與其他元素的分層
通過有意地分層排列文本和圖像,可以使得整個頁面更有空間感。這種組合使焦點很清楚。它允許用戶在滾動之前暫停一秒鐘并全部接收信息。
這些示例是最有趣的。登錄Mammut貝加爾湖頁面后,您即會感受到電影般的震撼力。圖像的運動和貝加爾湖文字與人類交織在一起,使您感覺自己像是體驗的一部分。
德國品牌代理公司MJND的層次結構要簡單得多,但是層次感仍然很突出。對于那些使用文本和圖像的人來說,這種設計更容易上手。
Owlsome Studio使字體更加突出,并在其后面分層顯示較小的正方形圖像。這是其他兩個示例的替代方案,但是由于它打破了網絡的現狀,因此可能以自己的方式產生影響。
5.文字圖像融合
比文本分層更進一步的是文本與圖像相互融合,而兩者是密不可分的。這給圖像帶來真正的優質感,并引起您的注意。它們不再是文本和圖像層的組合,而是變成一個整體。
我們喜歡這種格式允許的創意表達,并提供無盡的組合。Satellite414使用透明的輪廓文字,這些文字實際上成為照片的一部分。它是動態,現代和新鮮的。
Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合,將它們合并在一起,從而使用戶注意到它們。
6.新迷幻效果
全新迷幻氛圍是對時髦色彩的復古回歸,融合了現代感。它借鑒了過去的迷幻設計。
從1960年代到1970年代的劇烈社會動蕩帶來了新藝術和設計的變革。迷幻的影響在那個時代就很明顯了,今天我們看到了一種新的潮流。韋斯·威爾遜(Wes Wilson)是那個時代的重要設計師,他創造了一種新字體,成為該地區的象征-著名的迷幻設計。
Victor Moscoso為他的印刷沉重設計帶來了鮮艷的色彩,這些色彩影響了示例中所見的現代霓虹色調色板。
宙斯·瓊斯(Zeus Jones)是我們所看到的趨勢的完美典范–光譜中各種鮮艷的色彩,以夢幻般的方式與斜體字體結合在一起,并為流動的漸變帶來了清晰的通信效果。
查理·勒·麥格南(Charlie Le Maignan)為我們提供了一種有趣的復古字體,可在頁面上擴展和折疊。此外,在Showreel部分,我們看到了一段令人迷惑的文字彩虹,讓人聯想起1970年代的專輯和那些酸酸的歌曲。
圣馬丁代理公司在令人眼花scene亂的場景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡單性與無窮復雜的色彩并置。
7.粗體現代襯線字體
到2021年,這并不是一個全新的概念,現代的襯線字體處理技術隨著新外觀的發展而不斷變化。
一個新的變化是,我們看到粗體襯線字體完全占據了屏幕。在許多情況下,文本是整體設計,而粗體的現代襯線字體則可解決問題。
樣條線使用黑底紅字表示強烈的陳述,并使用完全大寫的文字來增強效果。對于試圖喚起技能,信心和權威的公司,這種組合效果很好。
Orto保持簡單,但將宏偉提升到另一個層次。超大,明亮的字體只會迫使您注意并進一步深入。
8.賽博朋克風格
也許最分裂的想法之一是計算機朋克和汽具美學。計算機,視頻游戲和1980年代流行美學的模糊組合以某種怪異,令人著迷的組合在一起。
80年代是數字游戲和新的計算機浪潮的開始。賽博朋克和汽具設計是80年代復古設計的變體。隨著計算機和AI的發展,我們可能會看到印刷術和美學的新融合。
Next Big Thing Academy顯然具有對未來的關注。雖然這里的字體選擇不是什么極端的選擇,但總體上符合復古主義的未來美學。
浮標也不使用任何大膽創新的字體,但是圖像與字體的整體配對符合這種趨勢。
文章來源:站酷 作者:DuiaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
排版將文字從單純的文本轉換為巧妙的交流方式。字體和類型設計可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統的永恒變化到全新的技術。
字體在現代文化和商業中的突出地位受到包豪斯藝術運動的影響。赫伯特·拜耳(Herbert Bayer)是包豪斯(Bauhaus)的學生,并通過采用還原性極簡主義的原則在版式設計上留下了杰出的印記。
數字圖形媒體和設計師本身的爆炸式增長催生了各種各樣令人驚奇的想法和進化。有些想法只是一時的流行,而另一些則是可以保留的趨勢。我們重點介紹了2021年最流行的字體趨勢。
1. 襯線字體
襯線字體當然是永恒的–因此,當以新的現代方式使用它們時,它們會重新出現在趨勢圖上。通過將細長和粗體元素并置,我們看到古典襯線字體作為一種持續的趨勢重新回到設計中。尤其是受到美容和DTC品牌的推崇,該款式具有柔和的美感,可以在許多行業中使用。
我們的示例顯示了帶有泥土色的苗條襯線字體的優雅搭配,從而柔和了整體氛圍。
Neubel本身是一家字體鑄造廠,使用柔和而優雅的顏色托盤并將文本覆蓋在對比鮮明的藝術品上,以大膽地表達自己的觀點。
設計公司Autumn展示了視覺層次結構的強大功能以及自信的版式和簡單的形狀。
2.輪廓字體
輪廓字體在2020年出現了很多的創意,我們希望在2021年會看到更多。透明字體在與粗體,填充字體并排顯示時,更加強大。
我們的示例表明,輪廓傾向于在網頁設計中占據中心位置。Heetch在相同顏色的純色襯線字體上方使用藍紫色輪廓字體,以表現出對比效果。
Aldo在“走進愛情”廣告系列中使用了當年Pantone顏色的陰影。廣告系列以自信和表達為中心,明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發光的絕佳選擇。日本設計師Ukyo Masuda憑借中性灰色調色板為該群體錦上添花,盡管如此,它還是通過創意的輪廓字體而栩栩如生。
3.進化的野獸派
如果您希望營造視覺張力并擺脫標準網頁設計的束縛,那么野獸派字體與現代野獸派元素相結合就可以完成工作。野獸派字體的清晰,原始,略顯復古的設計經過了現代化改造,成為我們所謂的“進化的野獸派”。在經過改進的版本中,苛刻的元素被軟化并與各種調色板和形狀結合在一起。
我們的示例顯示了進化的野獸派的不同變體和組合。內森·泰勒(Nathan Taylor)使用了大量實驗元素和互動性。整個設計是野獸派的,不僅僅是字體。這是對更加野蠻的野蠻主義的一個很好的展示,但是現代的元素使這種感覺更加精致和進化。
4.文本與其他元素的分層
通過有意地分層排列文本和圖像,可以使得整個頁面更有空間感。這種組合使焦點很清楚。它允許用戶在滾動之前暫停一秒鐘并全部接收信息。
這些示例是最有趣的。登錄Mammut貝加爾湖頁面后,您即會感受到電影般的震撼力。圖像的運動和貝加爾湖文字與人類交織在一起,使您感覺自己像是體驗的一部分。
德國品牌代理公司MJND的層次結構要簡單得多,但是層次感仍然很突出。對于那些使用文本和圖像的人來說,這種設計更容易上手。
Owlsome Studio使字體更加突出,并在其后面分層顯示較小的正方形圖像。這是其他兩個示例的替代方案,但是由于它打破了網絡的現狀,因此可能以自己的方式產生影響。
5.文字圖像融合
比文本分層更進一步的是文本與圖像相互融合,而兩者是密不可分的。這給圖像帶來真正的優質感,并引起您的注意。它們不再是文本和圖像層的組合,而是變成一個整體。
我們喜歡這種格式允許的創意表達,并提供無盡的組合。Satellite414使用透明的輪廓文字,這些文字實際上成為照片的一部分。它是動態,現代和新鮮的。
Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合,將它們合并在一起,從而使用戶注意到它們。
6.新迷幻效果
全新迷幻氛圍是對時髦色彩的復古回歸,融合了現代感。它借鑒了過去的迷幻設計。
從1960年代到1970年代的劇烈社會動蕩帶來了新藝術和設計的變革。迷幻的影響在那個時代就很明顯了,今天我們看到了一種新的潮流。韋斯·威爾遜(Wes Wilson)是那個時代的重要設計師,他創造了一種新字體,成為該地區的象征-著名的迷幻設計。
Victor Moscoso為他的印刷沉重設計帶來了鮮艷的色彩,這些色彩影響了示例中所見的現代霓虹色調色板。
宙斯·瓊斯(Zeus Jones)是我們所看到的趨勢的完美典范–光譜中各種鮮艷的色彩,以夢幻般的方式與斜體字體結合在一起,并為流動的漸變帶來了清晰的通信效果。
查理·勒·麥格南(Charlie Le Maignan)為我們提供了一種有趣的復古字體,可在頁面上擴展和折疊。此外,在Showreel部分,我們看到了一段令人迷惑的文字彩虹,讓人聯想起1970年代的專輯和那些酸酸的歌曲。
圣馬丁代理公司在令人眼花scene亂的場景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡單性與無窮復雜的色彩并置。
7.粗體現代襯線字體
到2021年,這并不是一個全新的概念,現代的襯線字體處理技術隨著新外觀的發展而不斷變化。
一個新的變化是,我們看到粗體襯線字體完全占據了屏幕。在許多情況下,文本是整體設計,而粗體的現代襯線字體則可解決問題。
樣條線使用黑底紅字表示強烈的陳述,并使用完全大寫的文字來增強效果。對于試圖喚起技能,信心和權威的公司,這種組合效果很好。
Orto保持簡單,但將宏偉提升到另一個層次。超大,明亮的字體只會迫使您注意并進一步深入。
8.賽博朋克風格
也許最分裂的想法之一是計算機朋克和汽具美學。計算機,視頻游戲和1980年代流行美學的模糊組合以某種怪異,令人著迷的組合在一起。
80年代是數字游戲和新的計算機浪潮的開始。賽博朋克和汽具設計是80年代復古設計的變體。隨著計算機和AI的發展,我們可能會看到印刷術和美學的新融合。
Next Big Thing Academy顯然具有對未來的關注。雖然這里的字體選擇不是什么極端的選擇,但總體上符合復古主義的未來美學。
浮標也不使用任何大膽創新的字體,但是圖像與字體的整體配對符合這種趨勢。
文章來源:站酷 作者:Ballen成名
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn