














42個設計思維中的一個知識點~
設計思維 - 激活空間
1.激活空間 - 概念
激活空間的意義在于元素與空間的搭配,能讓頁面產生靈動性和活力;另外激活空間還有一個影響比較難理解;?當主元素占用版面的主導位置,其他空間過大就會造成觀眾視線的停頓與停滯;?這樣就會導致主體與次客體不會產生一定的關聯性;?這時就需要“激活空間”來使兩個元素有一定的聯結;
2.空間的概念
在我們理解“激活空間”的概念之前,先來理解一下“空間”的概念。因為平面是一個二維的空間,是二維零曲率廣延的一種面,因此我們在定義空間時不需要考慮三維的“第個三維度(一個方向的向量)”帶來的影響,我們只要定義空間中的最小單位與空間的相對關系,和定義空間的邊際就可以了。如下圖所示,平面二維空間中x軸與y軸無限大,那空間也會隨之變大。而三維空間中z軸的不斷擴大,空間就會隨之變大。
只有在有邊際的空間中置入一個要素,即使這個要素是最小要素,空間也能被界定。例如一個正方塊(一個要素),被放置到一個參照的方框中,這時小的空間就會被界定。如下圖所示,二維平面和三維中坐標軸的范圍就是界定后的空間,而坐標軸中具體的一個單位就相當于平面中的單一要素。當把要素放入一個有邊際的空間中,這個空間就會被界定。
到這里我們只需要了解當我們定義空間中最小的單位,空間也就被界定下來了,理解這個概念就行了。這里的空間中最小的單位指的就是“元素”,而元素被設置好后空間就被界定了下來,這里元素的位置影響著空間,元素激活了部分空間,即激活空間。這了不理解也沒有關系,我用簡單的圖來進行繪制,大家就能理解激活空間的概念了。
3.激活空間 - 理解部分
當我們在一個空間中置入一個元素(一個圓),這時我們就會發現這個元素占了一整個空間。這里如果不好理解就用生活中的例子舉例,例如大家都站在自己家的臥室里,并且站在中心點也就是正中間,那這時候給人的感覺就是你占用的一整個臥室的感覺,也就是說整個臥室的空間就被你(視覺元素等于一個圓)所占據了。
接下來大家仔細看啊,如果當我移動一個元素(一個圓)的位置,大家感覺一下平面會有什么樣的變化。是不是感覺上面有元素,但下面的空間有些空啊。這是因為只元素只激活了上面的空間,而下面就成了空白的空間。
接下來我再把平面中的這個元素,向左移動一些位置,大家注意看會有什么樣的變化。是不是會發現,左面這一小塊的空間被激活了,而右面和下面的一大塊是空白的空間。
這時當我再分裂出一個相同的元素,并把這個元素向右移動,這時我們觀察后會發現,上面一整塊的空間都被激活了,而下面的一整塊還是空白空間。并且兩個元素之間產生了一定的關聯性,它們看上去更像一個整體了。
接下來我再分裂出一個元素,并且把它的位置移動到最下方,這時我們觀察就會發現下面的空間被這個元素激活了,但是中級的部分還是處于空白的,也就是空白空間。如下圖這個狀態呢,我其實可以延伸出另一個設計思維,那就是“把留白當做一種視覺元素”,但今天就不講這么多了。這時我們再觀察,三個元素所占的位置,是不是剛好能填滿一個版面啊,那也就是說他們三個整合到一起,又占據了整個平面。
4.激活空間 - 實際案例1
如果講到這理論講的就差不多了,像細節部分大家通過類似的想法腦補一下就行了,接下來我們講一下激活空間的設計思維如何應用到我們的實際設計當中。我們先來看一個設計作品,如下圖所示,大家通過自己的思考,想一下這個作品哪里有問題?
這個作品的問題在于,藍色標出的部分的視覺重量明顯要比紅色部分大,而且紅色部分之間空白空間占的面積太大了,這樣兩個紅色元素之間就缺少了一定的關聯性,整體也會顯得十分不協調,那要如何解決這個問題呢?
當我們把紅色區域之間的空白空間,用其他元素把它激活,把這里的空間激活,那上下之間就能產生一定的關聯。并且用一個有顏色的元素,這里的左右的視覺重量也達到了一定的平衡。
5.激活空間 - 實際案例2
再講一個案例,咱們看一下第二個案例,我們直接看作品看看它都有啥問題?直接這么一瞅是不是標題的位置不太合適,似乎位置太高了,而下面的冰山看上去很不舒服,不知道哪里有問題,有沒有這種感覺?
這個作品的問題在于冰山這塊的視覺重量偏左,而且冰山的物理重量并不重,再加上企鵝在上面就會造成物理重量上的不平衡,從自然角度來看也不是很和諧;另外標題與冰山之間的留白太大了,這樣就造成了視覺停滯,沒有元素可看了,也沒有辦法引導視線了,也會造成觀眾對作品整體的影響與理解上的差異。
我們要怎么解決這個問題呢,冰山的物理重量不平衡,我們給右側畫一個企鵝,讓它把右面的區域的空間激活,那整體的物理重量相對就平衡了;另外標題與下面元素的距離,可以通過設置新元素-太陽的方式,來使上下之間具有關聯性。
6.激活空間 - 實際案例3
再講一個案例,咱們看一下第三個案例。我們直接看作品看看它都有啥問題?看這個作品總感覺太碎片化了,整體性差沒有統一感,而且也不規整并很混沌,元素之間的關聯性也不強,有沒有這種感覺?
這個作品最主要的原因就是留白產生的負形會對作品產生缺乏整體性的影響。因為這些空間看上去是開放的,沒有約束的,零散的且沒有統一感的,這時我們需要通過增加元素,利用激活空間的方法來布置它們,這樣這些元素就具有了統一性,整體性也就會更強。
這樣的整體感就強了一些有沒有~
轉自:站酷-羅耀_UI
講一個老東家的故事。
一次產品迭代會上,老板在臺上講到打算重構C端產品框架,想重整標簽欄的標簽設定??稍谥v到這一部分的時候卡殼了,遲遲說不出“標簽欄”這個控件名,氣氛有那么一丁點尷尬。這時在座的一名產品經理慷慨解囊地說道:底部導航欄!會議得以繼續。
嗯,不全錯,這么說也算能理解。控件在界面底部,能引導用戶切換頁面。但如果標簽欄把導航欄的名字占了...那原本的導航欄應該叫什么呢?頂部標題欄?那導航欄里的內容控件又應該叫什么?左上角或者右上角的按鈕?
接地氣的名稱讓我們一聽就懂,直到有一天你打算跳槽,你拿著自己的作品到下家面試,設計總監幾個術語啪啪把你問的不知所云。這些“死控件”、“死欄目”在頁面上不可或缺,在設計每一個頁面時你以為你對它們早已了如指掌,偏偏在關鍵時刻,它們卻六親不認了。(說多了都是淚,我曾經面試也吃過專業名詞的虧,以后有機會再娓娓道來。)
“我又不走形式主義,為什么一定要說專用名詞裝x呢?接地氣的名稱不是挺好嗎,溝通?!薄芎唵蔚牡览?,如果名詞和概念都混淆不清,有沒有花功夫在UI設計領域進行深度專研也就一目了然了,還何以談論如何將它們運用自如呢?——“你連迪麗熱媽和古力娜扎都沒分清,你敢說你知道什么是真皮沙發?”
于是我的經歷,讓我產生了一個想法。是時候做一些知識內容沉淀與分享了,不能讓更多的人走我踩過的坑。第一期我們便來講一講導航欄。
-
導航欄 Navigation Bar,也簡稱為Navbar。一定會有不少剛入門的UI新人,在諸多的Bar控件中,難以區分它所指代的區域。
在iOS上,導航欄是指顯示在應用程序頂部,位于狀態欄下方的容器區域,層級應高于當前頁面內容。
在安卓上,Google公司在Material Design中也賦予了它同樣的定義,但是卻給了它另一個名稱,頂部應用欄( Top App Bar)。
iOS與安卓的規范與命名區別
請務必要記?。簩Ш綑谑怯糜跇嫾?strong style="outline:0px;margin:0px;padding:0px;">當前屏幕的內容,闡述當前屏幕的狀態,并且起到連接父子級頁面層次結構的作用?!曰氐介_頭的小故事,為什么標簽欄不能叫做底部導航,因為標簽欄是構架了多個屏幕之間平級頁面的內容切換。和“導航”的定義沒有半毛錢關系。
_
一個基本的導航欄容器一般承載的信息可能會有:標題;導航按鈕;內容控件按鈕;其他控件(比如搜索欄、分頁標簽或分頁控件等);千萬別忘了還有分割線。
時間倒退回2017年以前,這時候的移動端規范下的導航欄還是循規蹈矩的,樣式單一。但隨著iPhone X等一系列全面屏手機相繼問世后,移動設備在屏幕高度上有了進一步的擴展,界面設計在一屏內的發揮空間也隨之增加。iOS11發布后,大標題導航欄設計風格興起,隨后被引入平臺規范。
于是現在iOS與Material Design在導航欄上也都定義了兩種導航欄標題規范:常規標題與大標題。
常規標題是指在高度為88px(iOS@2x下)的導航容器中,居中放置一個當前頁面的標題。標題字號一般為34px-38px(34px為iOS標準規范,但實際項目中可以在盡量在不小于34px標準的情況下根據設計需求確定)。
常規導航不同標題字號的案例及視覺效果
大標題是將導航欄欄高增加到192px(iOS@2x),保留高度為88px的導航容器來承載內容控件按鈕,將標題下墜居左。iOS的標準規范定義大標題的字號為68px。但由于英文有大小寫區分,在視覺上有一定的層次表現,而中文因為缺少一定的層次結構,并且相同字號的中文視覺大小大于英文,所以大多數時候我們在進行大標題設計時,會適當縮小,一般為56px-64px居多。
大標題不同標題字號的案例及視覺效果
大標題導航欄的優點毋庸置疑,頁面留白更多,呼吸感更強,大氣現代、逼格更高,因為頁面標題巨大,能夠幫助用戶快速確認當前所處位置;采用統一的大標題,讓頁面布局風格快速統一。但缺點也顯而易見,因為增加了導航欄的高度,導致屏幕利用率降低,一些通過廣告變現或更加注重一屏內內容呈現的應用便中和了常規導航與大標題導航的優缺點,進行了風格改進。
改進的大標題案例
那我們如何在常規標題和大標題之間抉擇呢,這可不單單是設計風格的問題,還受產品定位與功能的影響。蘋果的設計師在Apple Music中實驗并驗證了一條結論——在內容非常豐富、層級結構較深的產品當中,大標題能夠幫用戶快速確認自己的位置。
所以我理解的適合使用大標題風格的產品一定是:突出內容呈現而不是功能繁瑣的;產品定位更偏向于現代或文藝藝術的;需要快速統一界面風格的。而層級結構需不需要很深,這并不一定,我反而覺得功能越單一、產品體量級越輕的應用,越適合大標題。
所以如此看來,國內使用大標題成功的案例就為數不多了,這可能與中文字體還有國內app產品功能都比較繁瑣的原因有關,真正做到了使用大標題快速幫助用戶確認自己位置,并且結合了產品特性與風格的,我認為人人都是產品經理的移動端在這方面做的非常棒。
iOS規定導航按鈕位置僅能用于放置返回按鈕,可以添加一個層級的面包屑,幫助用戶有效地明確當前頁面層級;Material Design中,則不僅可以放置返回按鈕,還另有作用,菜單圖標-用于打開導航抽屜 或者 關閉圖標-關閉工具欄。
iOS與安卓的導航按鈕區域區別
這一點與iOS的定義有著天壤之別,iOS非常明確地賦予了工具欄的定義,并且將導航欄和工具欄(Toolbars)徹底地分離開,典型案例就是Safari。
iOS明確地將導航欄與工具欄分離開
在內容控件上iOS與Material Design也大相徑庭,Material Design不去限制你的內容控件多少,因為它提供了溢出菜單,并可以根據屏寬的變化,自適應釋出和收納溢出菜單中的控件。
而iOS則規定我們,要給內容控件按鈕足夠多的空間,必要的時候,隱藏導航欄標題也未嘗不可。
那么真實的項目中,我們經常為了快速落地,會存在一稿適配雙平臺的情況。這時候我們應該遵從哪一個平臺的規范呢?答案是:許多大廠的做法已經向我們驗證,規范不分家。
在iOS諸多的應用中溢出菜單早已普及,盡管這是Material Design提出的設計理念。
Material Design的溢出菜單也被運用在iOS端
雖然國內遵從Material Design進行Android應用設計的情況相對較少,但它提供的設計理念與方案卻并不局限在安卓平臺。
分割線只是一種體現形式,我想要表達的是,別忘記區分導航欄與內容界面的視覺層級關系。Matetial Design提醒我們,頂部應用欄可以與內容位于同一高度,但滾動時,請增加導航欄的視覺高度,讓內容在其后方滾動。而iOS則默認采用了背景模糊的方式區分了導航欄與內容區域的層級關系。
區分導航欄與內容區域的層級關系
缺少視覺分割會讓用戶分不清導航欄與內容界面,它們看起來會更像一個平級。對用戶視覺區分內容主次其實是極不友好的。
關于其他控件,iOS只在規范中提及到了分頁控件。蘋果設計師考慮到部分場景在當前頁面中還存在信息層級結構劃分,此時建議可以在導航欄中使用分段控件。
但國內的應用程序早已將導航欄容器的作用發揮到,基于導航欄層級始終高于內容區域的特性,我們通??梢詫⒎侄慰丶?、分頁標簽、搜索欄等等用戶可能隨時使用的工具放在導航欄中。
導航欄通常會承載的其他控件
-
導航欄是幾乎每一個界面都必定存在的控件,正因為無法輕易刪減,逃不掉就必須用好它,不然很容易淪為頁面的減分項。
設計好導航欄不僅僅是視覺上的工作,表現的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。
轉自:站酷-UCD耍家
如今我們的生活,到處都是大幅圖像廣告,紛擾喧鬧的各類短視頻與直播。這是一個快節奏時代,我們更傾向閱讀圖像。為什么我們偏愛圖像視覺超過文字?從人類進化角度來看,原始時代的祖先通過五感感知著這個世界,其中通過視覺來感知判斷生活,其他四感輔助之。即使后面我們發明了文字,但發展至今,對圖像的本能吸引力依舊強烈。因為在我們認知的潛意識里圖像相較于文字更能讓我們快速輕松理解并記憶。
圖像如此重要,設計作品中當然也必不可少。因為圖片,它能一定程度上決定畫面基調;引導視覺流程;調劑平衡多段文字信息的枯燥性,讓閱讀變得輕松容易。
在UI設計中,我們經常需要把設計輸出物拿給產品經理或者其他有設計決斷力的人看,UI設計中圖片使用的好與壞,能很大程度上影響著決策者的感知,以及你的設計過稿率。
如下左圖:商品視角、調性、細節,都沒有右圖來的統一、有質感。單看這兩張圖,會讓用戶有這樣的心理感知:左圖感覺像山寨盜版商城;右圖則會認為是嚴肅官方認證商城。所以,在同樣頁面布局下,不同的圖片使用與處理,能讓UI頁面的品質有較大的感知差異。
圖片的使用如此重要。那么,我們在正式做UI設計前,首先需要弄清楚圖片在頁面的占比情況以及后續圖片的支撐來源問題。
在構思UI頁面階段,首先需要了解以下兩個問題:1.圖片區域占比問題;2.圖片來源問題。當頁面圖片占比多,且讓用戶自定義,那么需要預估到APP上線后設計可控率會降低。換句話說,實際上線效果會不盡人意。如下圖:由于淘寶和網易嚴選平臺屬性不同,在圖片品控上就有著不同的視覺感受。當然,不是說淘寶做的不好,而是當一個平臺集納不同的店鋪,不同調性的產品類型,即使有圖片規范,也難如統一品類、調性的產品來的統一。
弄清圖片內容的可控性問題后,開始進入設計環節,那么我們該如何選擇圖片?
在不同的場合有恰當合適的場景搭配,是十分基礎且重要的事情。在UI設計中,任何一個部分的設計以及元素運用都需要為產品服務。圖片也不例外。如果你是廚房類APP,頭圖選用小清新感的圖片,就顯得不夠合適,帶有環境食材元素的圖片才更讓用戶有共鳴。
2.是否能清晰表達產品核心內容?
圖片是否主體明確?能一眼正確無誤的傳達核心內容?會不會因為其他元素元素搶了主體視覺,找不到視覺重點?
3.是否美觀、有品質、讓人想擁有?
圖片是否能表達美好生活以及美好品質的向往?光影關系是否自然?圖片是否高清有細節?
當明白圖片如何選擇后,還想和你分享一些冷門且重要的圖片過稿小技巧。記下來,將大大提升你的設計過稿率。
漂亮圖片有很多,如果我們都以漂亮為基準,找出來的圖片也會形色各異。由于用戶的實際使用場景是:瀏覽一個完整APP,統一風格調性比美更重要。如果商品角度不一樣;飽和度高低不同;抽象與具象等,都會形成產品不統一,用戶視覺不適應等問題。
有時我們為了趕時間,直接用圖片填充插件,讓圖片區域自動填充。但我還是想要給到你這樣一個建議:一個專業且成熟的設計師,即使是設計初稿,也不能隨便拿張圖,湊合一下。任何時候的匯報,都需要有著處女座對于事物的完美要求,過自己這關。因為任何時候你的表達與表現,都形成了你在別人心目中專不專業的看法,從而影響著后續的設計話語權問題。如下圖都是商城陳列頁面,右側的圖片給出上線的實際效果,更貼合產品,方便設計決策者給出建議方向,或做出決策。
我們都是視覺動物,不管你是否愿意承認:我們常常通過視覺表象,才決定是否愿意去更深入的了解某個東西。
設計就是在做產品視覺表象的表達,我們需要盡可能使用貼切的,漂亮的圖片。讓UI視覺看起來更加美觀,讓用戶愿意停留,認可以及信賴平臺。
轉自:站酷-丘丘的設計筆記
我把整體分為了三個部分
1.空洞的設計方法(因為大多數的人對設計的方法論都處在一個看了、學了、但是用不上的階段,主要是講在我分享的內容中可能會用到的一些設計理論和方法)
2.很一般的設計流程(這個優化設計的流程其實千千萬,最重要的還是和真實的項目相結合,每一個點都值得拿出來寫一個長篇大論,有機會具體來說說)
3.不成熟的實際應用(設計流程大多復雜而冗長,對于處在初創期或者發展期的產品來說,可能并沒有那么長的時間線來實踐,這一點也是我想和設計同行一起探討的問題)
“奧卡姆剃刀原理”是設計師們耳熟能詳的一個理論,即“如無必要,勿增實體”,在UI\UX設計中,我的理解是,如果能夠在用戶的行為路徑上和交互方式做出優化,就不要增加新的功能。
這個理論會貫穿在整個產品設計流程中。
用戶體驗五要素,是我們在學生時代就會聽到的一個理論,但其實對于五要素真的對應著什么,意味著什么,可能并沒有一個確切的概念。
我說說我的理解:
這五個要素,從戰略層到表現層,是一個從抽象到具象的過程,是一個易用產品背后必不可少的東西。
戰略層:用戶需求、產品目標——就是說在使用完這個產品之后,能不能很好的滿足了用戶的需求,達沒達成做這個產品的目的。
范圍層:在產品定位明確的情況下,我們要有什么樣的功能和內容——具體需求
結構層:各頁面、功能的聯系,用戶通過一個什么樣的路徑、什么樣的層級關系完成一個流程
架構層:按鈕、控件、圖片、文本區域的布局,用戶對頁面的整體感知
表現層:長什么樣,顏色啊、風格啊等等)
所謂KANO模型,它和接下來要說的消極選擇、NUF評估篩選都可以理解成為一個需求篩選的方法,他們都能夠幫助設計師在眾多需求當中,找到最合適和最合理的那個。
KANO模型中,我們可以把需求或者說創意點分成5個屬性
1.魅力/驚喜屬性
用戶意想不到,如果沒有這個功能用戶可能感知不到,但是做了這個功能,用戶會非常驚喜和滿意。(我們有沒有這樣的功能?首頁tab bar動效)
2.期望/期待屬性
做了這個功能,用戶滿意度會提升,否則反之,會降低
3.必備/必要屬性
一個產品的有效性功能,最基本的功能。如果做了用戶滿意度不會提升,覺得理所當然,但是如果沒有,滿意度會大幅下降。
4.無差異因素
做和不做對用戶的影響并不大,用戶也不太在意。
5.反相/錯誤因素
你不做還好,一旦做了用戶反而會反感,降低滿意度。
對于一個產品,最重要的即是必要屬性和期望屬性。
消極選擇其實是我們在生活當中也用得到的篩選方法,簡單來說就是:當我們想到的兩個idea都能用來解決一個問題,那么我們要選這兩個當中實現成本低的那個或者說“性價比”最高的那個。
NUF評估篩選相比前兩種方法,就顯得稍微繁復一點,用起來可能并不如前兩種方法更容易。
它其實是,在新穎、使用、可行三個維度,對我們要篩選的點進行打分,再根據分值進行篩選。
用起來其實比較消耗時間。
我把這一部分分成了4個步驟,分別是:桌面研究,用戶研究、概念提煉、設計方案
產品深度使用,提問并分析(比如素養課頁面,有多少卡片類型,有多少內容分類?哪些課程點擊率比較高,為什么?等等)-同類產品分析-用戶體驗診斷,舒適體驗和不是體驗-確定設計方向,產品定位、改版(優化)目的、用戶群體、價值點)(確定大致設計方向,提出假設,如:經過我們上述的研究和分析,發現豐富、高質量的內容和清晰的布局,能夠讓用戶有瀏覽和互動欲望,從而達到轉化目的
我們一般通過定量問卷和定性訪談來從用戶那里獲得想要的信息點以得出用戶畫像和驗證我們前期的假設
在做訪談之前,要明確的就是我們要得到什么,或者說我們要訪談用戶的哪些方面
即:用戶習慣的研究、用戶行為模式的研究、用戶行為動機的研究
在設置問題時,要明確每個問題的背后我們關注的點在哪里,不可能在不相干問題中浪費時間。
通過前面的兩個階段,我們已經可以得到很多東西了:完整清晰的用戶畫像、同理心地圖、As is 旅程圖。我們通過這些東西,找到我們可以優化、可以提升用戶體驗的地方,即機會點,然后利用我們之前提到的篩選方法,進行創意決策。
(同理心地圖)
(As is 旅程圖 來自:池喜太厚)
通過前面完整的研究和決策,在此階段,得出交互設計方案、UI設計方案等等
這一部分是我想和大家探討的,前面所說的設計流程,多數時候在實際工作當中應用起來并不容易,這也是很多設計師對設計方法嗤之以鼻的原因,覺得設計方法都是玄學,胡說胡有理,這里我也說說我的一些思考。
在我們日常的工作當中要把上述的所有流程都走到,所有設計方法都應用,顯然是不現實的。而且,在產品的不同階段,優化和迭代的驅動力是不同的。在初創和成長階段,一般為問題驅動,在成熟期,一般為價值驅動。
也就是說,平時的工作可能是一個,發現問題到解決問題的過程,我們需要把成熟的方法和流程進行拆分,進行小部分流程的應用,這樣也能夠讓我們得出一個合理的設計方案。
轉自:站酷-鹿爺不是咸魚
保持好奇,巧妙融合,追求卓越,自然而然
在網上找UX汽車相關的材料和文章是相當困難的。(學習君說:表示相當贊同:( )盡管有關移動和臺式設備UX的信息太多,但要獲得關于HMI(人機交互)原理的見識似乎要困難得多。為什么?
我的回答是,與為手持設備和計算機進行設計相比,這可能是一門利基學科,再加上汽車屏幕出現的時間不長。當然,車輛上的用戶體驗不僅僅是屏幕,只有旋鈕和物理按鈕時已經是用戶體驗了,但是在這種知識上也沒有太多分享。
但是,主要原因可能是缺乏標準化。如果您現在看一下市場,您會發現有太多不同的方法和解決方案(滿足相同的需求),很難提出一套共享的規則。屏幕可以是橫向或縱向屏幕,可以是直角或傾斜角度,可以是一個或2個或3個或更多,超寬或更大的正方形,儀表板上的高度或膝蓋以下的高度,等等。與這種混亂相比,我們在手機上擁有的屏幕尺寸數量似乎是在開玩笑。
另一個原因是所有車載系統都需要非常全面的測試。用戶在可能致命的情況下與這些對象進行交互。因此,測試必須絕對優先。搞砸移動應用程序上的按鈕的位置或大小可能會帶來麻煩,但在汽車操作系統上這樣做(我不是說“信息娛樂”,因為在這一點上,它是一個簡化的術語)會造成生命損失。上面提到的缺乏標準化使得很難將先前測試的結果用于其他系統并在其他系統上重用。
各種研究表明,黑暗的UI在汽車環境中是最安全的選擇。深色界面可減少干擾和眩光,但是,存在一個組件,從暗模式切換為亮模式可能有助于提高可讀性,這就是導航圖。在幾乎所有導航系統中,地圖都會自動從暗切換為亮,反之亦然。
Android Auto
文字應略讀,因此所有的號召性用語,菜單和所有文字通常都應保持最少。除非是在不運動的情況下閱讀的文本,否則任何文本都不應排在兩行或更多行上。
眼睛到中央顯示器的平均距離約為60厘米/ 24英寸。該數字只是根據市場上最常見的配置進行的平均測量,但是同樣,由于沒有適當的標準,因此該距離可能會有很大差異。
假定此措施為有效基準,則在運動情況下字體的最小尺寸為5.3 / 6毫米(不同的研究表明最佳做法略有不同)??紤]到1mm為6.299 dp(@ 160dpi),則文本應為34/38像素高,用于應該在行駛時讀取的文本。
應該只有一個主要動作,而第二個動作則盡可能少。同樣,我們希望用戶快速瀏覽并一眼就能找到所需的內容。
(美國)美國國家公路交通安全管理局(NHTSA)指南指出,駕駛員應該能夠在1.5秒的一系列掃視中完成一項任務,并且花在離開道路上的累積時間不超過12秒。
Apple CarPlay — phone call: 1 primary CTA
自從誕生以來,車載操作系統已超越了信息娛樂功能。通過鏡像智能手機甚至系統內部的鏡像,我們可以訪問多種功能,例如消息傳遞,日歷和提醒,流視頻等等。但是,用戶在使用這些系統時要尋找的主要功能是3:
音樂/播客/有聲讀物
導航
撥打/接聽電話
這三個主要功能在駕駛時應該比其他功能更醒目且易于使用。
圖標優于文本標簽,但圖標的含義必須絕對清楚,不能解釋誤解。圖標標簽的字體大小可以小于第3點指示的最小字體大小。
Porsche Panamera UI
駕駛情況下的理想對比度至少應為7:1,因此絕大多數系統都將白色(或淺灰色)變成黑色(或深灰色)。
對于行駛中未使用/讀取的組件,最小值應為4.5:1。
旋鈕和物理按鈕的性能仍然優于GUI組件,這是由于其具有肌肉內存映射功能,觸摸屏上的可視元素要求駕駛員每次查看屏幕。但是,數字接口的靈活性毋庸置疑,世界正在朝這個方向發展。盡管大多數(如果不是全部)現代觸摸屏都支持各種類型的交互,例如您的常規平板電腦,但由于易于執行,因此它們是首選的:
單點
向左/向右/向上/向下滑動
滾動(帶有捕捉)
應避免使用其他更復雜的手勢,例如觸摸和按住,雙擊,捏合,多點觸摸手勢,或者在非運動情況下使用。
關于滾動的注意事項:在列表或卡片上自由滾動不是理想的選擇。垂直和水平滾動動作均應具有捕捉效果,以始終將滾動項鎖定在同一位置
Scroll with snapping on the left, free on the right
非接觸手勢是許多OEM嘗試的新事物。目前,這項技術似乎還遠遠不夠完美,但是除此之外,在這種情況下使用的手勢通常并沒有真正令人難忘和自然。
雖然語音控制似乎是理想的選擇,但根據研究,在某些情況下,精神工作量可能會超出預期。在VUI并不是真正的“對話式”的較早系統上,情況更是如此,諸如Google Assistant或Siri之類的現代助手對信息較長的字符串的理解程度更高,從而減少了用語表達命令的精力。
但是,我們應該考慮不能選擇說話的情況,例如,當嬰兒在后座上睡覺或某人有言語障礙時,并提供一種安全,可視/觸覺的方式來執行所有動作。
與移動設備甚至與帶有臺式計算機和椅子的辦公室設置不同,在汽車中,座椅相對于屏幕呈固定角度,屏幕也固定在適當的位置。因此,必須考慮屏幕的可達性及其可讀性。考慮到左側的駕駛員,屏幕右側的元素將導致可讀性和可訪問性降低(當然,在方向盤位于右側的汽車中會發生相反的情況)。
避免使用重影按鈕,輔助功能應非常清晰可見。主要行動和次要行動均應清晰可辨
Tesla Model 3 UI
當然,這也不意味著丑陋(不幸的是,那里有一些丑陋的車載體驗)。但是,在為車載屏幕設計時,您必須考慮告別微妙的色調,細膩的對比度,筆觸細膩的圖標,淺色字體,細小的文字……
極簡主義受到歡迎,但它是由更少的可見組件組成的極簡主義。
正如本文開頭所述,這些原則只是經驗法則,不能以任何方式跳過嚴格的測試。但是,如果您是第一次使用智能手機和計算機的UX來接觸汽車的HMI,那么這可能是您開始著手涉足這一復雜學科的起點。
菲茲定律在交互設計中的應用是很普遍和廣泛的,有時候在我們設計界面之時,不知不覺就應用了菲茲定律,但是我們卻未察覺。
關于菲茲定律的具體內容,可以說是大家耳熟能詳,甚至在學生時代就有所了解:從一個起始位置移動到最終目標點所需的時間由兩個參數來決定,到目標的距離(D)和目標的大小(W),可以用數學公式表達為:
在當今互聯網背景下簡單來解釋說,就是大而近的目標區域意味著用戶用需要耗費太大的精力即可輕易點擊或者關注到目標,反之,小而遠的目標區域則意味著用戶將耗費一些時間和動作才能觸及到目標。在一般情況下,讓用戶耗費時間和動作的操作,會使人產生負面的用戶體驗。
以上說的,其實是對菲茲定律表象的解釋,每個人在網上也會搜到很多類似的解釋。當你搜索時會發現,關于對菲茲定律的應用,網上絕大多數的資料都是在以PC端界面作為定律的解釋,但移動界面卻少之又少,這里面的一部分原因是菲茲定律提出的時間,一部分也是因為在移動端的設計中,菲茲定律會變得很零散和瑣碎,很難真正用幾句話來總結,這篇文章也是我第一次試著在移動端的交互設計的范疇內對菲茲定律的應用進行簡單的總結。
1. 讓按鈕更大一些
我在這一部分分了幾種情況,分別進行討論,其一呢,就是fab button。在現有的fab button中,大家會發現,雖然按照正常iOS的設計規范,一般按鈕的大小都會被設計為88px,但是在設計fab button時,我們一般都會選擇大一些的尺寸,例如100px、110px、120px。
其二就是頁面內功能按鈕的大小,我們在做界面設計的時候,都知道做到統一性,但很少去深入地想,界面統一的背后是在像用戶傳達一個什么意思。
舉個例子,這是【洋蔥數學】和【360家庭防火墻】的登錄界面,市面上的登錄界面大多大同小異,基本組成就是賬號+密碼+按鈕(或手機號+按鈕等)的組合。
那我們來思考一個問題:為什么在手機號只有11位已經確定的情況下,輸入框和【下一步】按鈕還要做這么長,接近通欄的一個樣式。
我試著來找到這個問題的答案,第一個,是對于品牌設計規范的執行,對邊距是有一定要求的,也就是我們常說的保持頁面元素的統一性;第二個,即是對菲茲定律的應用,在這個頁面中,最核心的兩個功能【輸入】和【下一步】給予他們一個足夠的大小,會讓用戶的注意力更加集中,避免被分散精力。
2. 讓相關聯的信息內容距離更近
這也和設計原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個界面是我隨手做的,對比一下即可看出優劣。
在相關性比較強的功能中,拉近彼此距離,既能夠給信息一個清晰的層級,更能夠減少用戶的操作成本。
3. 界面的邊界會讓用戶操作更加精準和容易
在研究交互界面的時候,我們總聽到一個說法,“界面的邊界是無限的”,它當然不是在說界面是無限大的,對于一塊屏幕來說,在進行操作的時候,無論是PC的鼠標光標,還是移動屏幕的手指,在操作到界面邊緣時,因為無法延伸,所以最精準。
這也是我們看絕大多數fab button彈出的菜單是在界面邊緣,而不是在界面中央的原因。
除此之外,還有在很多安卓手機中,卸載app時會讓用戶把要卸載的app拖拽到屏幕上邊緣的區域進行卸載,這樣相比給一個【X】按鈕,會更加精準,而且拖拽的操作也會給用戶更多思考的空間和時間,減少誤操作的概率。
但是,這個但是很重要,不要把所有既定的法則都奉為圭臬,所有事物都要辯證著看,在沒有限定條件的情況下,菲茲定律的應用不會有任何問題,但是如果加以條件的限定,就不是這么簡單了。
簡單舉個例子:在進行刪除等負向操作時,很多app會把確認刪除等操作做得離你的上一步操作區域更遠,或者讓確認按鈕更加不明顯,這是在幫助用戶,或者說希望用戶在做負向操作時,有更多的思考空間和時間,規避誤操作的影響。
在《看懂設計》這個系列里,我會選擇性地對在交互設計中常常被應用的設計心理學、方法論等進行簡潔有案例的解析,例如大家耳熟能詳的交互設計7大定律、斯金納箱理論、邊際效應、錨定效應、格式塔理論等等讓大家盡可能地在實際案例中找到它們的應用,而不是讓這些方法論成為我們腦海中的空中樓閣,知道、聽說過,但是不會應用。
轉自:站酷-鹿爺不是咸魚
他們是“最美逆行者”
前幾天,當大家打開百度首頁時,可能發現了一些小變化:搜索框上方不再是熟悉的紅藍標志,而是展現出了一系列人物形象。
這些人物都是一直奮戰在抗擊新冠肺炎疫情一線的“最美逆行者”——我們想用這樣的方式,向他們致敬。
2月9日-2月10日,致敬抗疫醫護人員
2月11日-2月12日,致敬抗疫志愿者
2月13日-2月14日,致敬抗疫建設者
2月15日-2月16日,致敬抗疫專家組
2月17日-2月18日,致敬抗疫解放軍
當大家點擊這些 Doodle 圖片時,會進入相關的戰“疫”專題內容頁,在這里可以實時了解抗疫英雄的資訊動態。
醫護人員、志愿者、建設者、專家組、解放軍,他們用堅定的信念和堅毅的身軀,為這場戰斗筑起了最堅固的防線,守護著無數人的生命安全。我們向這些英雄致敬!
此前,我們向廣大網友發起了“抗疫英雄系列 Doodle”征集活動,希望各界設計師用手中的畫筆為抗疫英雄們創作特別的百度 Doodle,讓更多人看見疫情中的勇氣與希望。
最終,五組致敬 Doodle 在百度首頁上線。除此之外,我們還收到了26幅來自百度網友投稿的設計作品。謝謝大家的用心創作!
一起來欣賞吧!
蔡依彤
林文煌
劉昱
輕撫淡抹素人妝
相超
蔡依彤
林文煌
麥芽
董一孛
林文煌
劉昱
姚思思
趙會娟
不將就
李小蘭
李鈺
林文煌
孫紅花
陶澤崧
嚴安琪
張晶
馮勝方
高旭
林文煌
楊曉婧
張晶
在這場疫情狙擊戰中,不論是什么角色、什么崗位,都能貢獻自己獨特的力量。而這些精美的 Doodle 設計作品,正向人們傳達了必勝的信心和能量。我們衷心感謝所有設計師的用心創作.
除了通過百度 Doodle 為抗疫工作鼓勁,我們還運用技術的力量,專為疫情防控研發了各種產品和服務,希望為大家帶來實用有效的幫助,為戰“疫”貢獻一份力量。
我們成立了3億元的疫情及公共衛生安全攻堅專項基金,用于支持新型冠狀病毒等新疾病的治愈藥物篩選、研發等一系列抗擊疫情工作。
我們上線了“拒絕野味”的搜索提示,在百度 APP 搜索“蝙蝠”、“果子貍”、“穿山甲”、“豪豬”、“狍子”、“蛇”、“野豬”等關鍵詞時,大家都能看到“不可食用”的警告。
從百度“問醫生”免費在線咨詢,到新冠肺炎智能自測工具;從“疫情小區”地圖,到患者同乘查詢;從免費開放智能外呼平臺,到 AI 體溫檢測落地北京清河火車站……百度一直在行動。
當所有的決心、愛心和信心匯聚在一起,我們知道,陰霾和灰暗一定會被驅散,春暖花開的日子一定會到來。眾志成城,我們共渡難關!
轉自:站酷-百度BMD
探索全球頂尖設計好物
大部分人今年過年基本的生活狀態如下
如大家所知疫情緊急,
我們雖心系前線卻無力支援,
盡量避開人群不出門也算為國家做了些許貢獻。
但是宅家除了刷短視頻玩游戲,
作為設計師的童鞋們,
咋能不趁此長假好好充實自己呢
(學技能估計太難了),
在此推薦幾部經典的設計片,
娛樂的同時,也豐富下自己的設計知識。
01
《Abstract: The Art of Design》
《抽象:設計的藝術》
這是由Netflix公司出品的一部文化創意紀錄片,
豆瓣評分高達9.4,紀錄片總共8集,
每一集都探訪一位全球頂尖的設計師,
涉及插畫、建筑、汽車、攝影、平面、室內、場景、球鞋等領域,
用獨特的拍攝敘述手法展示設計師的創作過程,
揭開世界設計師非凡創意的藝術理念。
此片由《連線》雜志的主編Scott Dadich 創作并擔綱制片,并由奧斯卡最佳紀錄片導演Morgan Neville和Elizabeth Chai Vasarhelyi執導,
每一集都可以欣賞到電影畫面般的浸入感。
02
《The Genius of Design》
《設計天賦》
此片是BBC英國廣播公司
播出的一系列關于產品設計紀錄片,
一共包括五集,每集60分鐘,
通過采訪各知名設計師及相關的設計評論者,
講述產品設計的歷史和未來。
不管你喜歡Dieter Rams的隱忍
還是Phillipe Stark的奔放,
每個從事產品設計工作的朋友都能從這部紀錄片得到一些啟發。
03
《Modern Masters》
《現代藝術大師》
此片由BBC英國廣播公司
推出的一檔電視系列節目,
總共4集,分別介紹了20世紀四位重要的藝術大師:
安迪·沃霍爾(Andy Warhol)、馬蒂斯(Henri Matisse)、畢加索(Pablo Picasso)和達利(Salvador Dali)的工作與生活。
通過走訪四位藝術家們生前的居所、
藝廊及博物館等地,
向觀眾展示了他們偉大的藝術貢獻以及驚人的后世影響力。
你會發現,麥當娜的專輯封面、米菲兔的文具、
甚至是你家的沙發和電話,也許就來源于這四位大師的創作……
04
《Simon Schama's Power of Art》
《藝術的力量》
此片是由BBC英國廣播公司推出年度紀錄片,
總共8集。
講述卡拉瓦喬、貝尼尼、倫勃朗、雅克、透納、梵高、畢加索以及羅斯科八位藝術家的生平。
該系列結合了戲劇化的重塑、壯觀的攝影技術,
以及Simon Schama獨特而富有個性化的敘事,
全面剖析藝術大師們孕育和誕生藝術品時扣人心弦的故事。
這部紀錄片榮獲國際艾美獎最佳藝術節目、
2007年第60屆英國電影電視藝術學院獎最佳攝影紀實類等多項國際大獎。
05
《Design for Life》
《創意生活》
這是一檔BBC真人秀設計師比賽節目,共6集。
國際知名設計師Phillipe Starck
尋找英國最有前途的新人設計師。
通過全國選拔,
12名懷抱熱情與夢想的設計師來到到巴黎史塔克設計學院學習,
他們的目標是把自己的設計思路變成真實的產品。
Phillipe Starck設計了一系列任務,
挑戰設計師們的才華創意,但最后的贏家只有一個,
走到最后的人將獲得和世界頂尖設計師一起工作的機會,
準備面試的設計師們更要好好看一看喔。
06
《Objectified》
《設計面面觀》
這是一部以工業設計為主題的長篇獨立紀錄片。
展示了創造工業產品流程的實錄片斷,
并記錄了與世界頂尖設計師們的交談與討論。
采訪到的設計師們包括:
紐約現代藝術館館長Paola Antonelli,
慕尼黑BMW首席設計師Chris Bangle,
巴黎兄弟設計組合Ronan & Erwan Bouroullec,
美國明尼阿波利斯市Walker藝術中心平面設計師Andrew Blauvelt等世界最具影響力的設計師。
導演Gary Hustwit用洞察深切的鏡頭
記錄了這些在我們身邊隨處可見的工業設計產品,
看似稀松平常的設計背后,
卻是設計師們傾盡全力的良苦用心。
作為從事工業設計的童鞋來說,
自己的專業領域能被拍成紀錄片也是一件感到自豪的事。
07
《Urbanized》
《城市化》
Gary Hustwit 紀錄片設計三部曲的最后一部,
著重記錄一座城市的規劃與設計,
突出了致力于解決城市問題和提出對策的世界頂尖建筑師、規劃師、決策者等人。
世界上一半以上的人口生活在城市地區,
到2050年這個比例將變為75%以上。
雖然一些城市正在經歷爆炸式的增長,
但其他一些城市卻處在正在壓縮的過程中。
在住房、流動性、公共空間、民眾參與、經濟發展和環境政策之間取得平衡的挑戰正迅速成為一個普遍關注的問題。
中國的城市化進程也是如此,
因此觀看該片,會有更深刻的體會。
08
《我在故宮修文物》
由中國中央電視臺出品的一部三集文物修復類紀錄片,紀錄故宮里稀世珍奇文物的修復過程和修復者的生活故事,
把工匠精神這件嚴肅的事講得細膩、
溫軟且富有人情味。
該片是一部內蘊優裕的紀錄片,
在一個個對于文物修復師而言的稀松日常里,
我們能夠看到比修復鐘表、青銅器、木器、古琴更多的東西。
片中提到一句“修復文物是穿越古今與千百年前進行對話的特殊職業和生命體驗”,
在故宮神秘的身影下,這似乎更令人感到驚艷。
作為中國設計師,更應好好觀看,
正所謂,民族的,才是世界的。
09
《デザインあ》
《??!設計》
《啊!設計》是NHK一檔經典設計節目,
每一集邀請重量級設計師講述設計的秘訣,
深澤直人、仲條正義、祖父江慎、伊東豐雄,柴田文江……
雖是面向兒童,但視角獨特、充滿對思維的啟發,
贊嘆日本設計教育的同時也讓我們反思。
這部片放到大學設計系的課程都不為過,
因為很多一些基本的設計常識,
即使已經就業的童鞋可能都不了解,
值得設計師好好觀看。
10
《夢と狂気の王國》
《夢與狂想的王國》
該片為日本的一部紀錄片,
由砂田麻美執導,探秘吉卜力手繪動畫創作過程,
展現了宮崎駿、高畑勛、鈴木敏夫,
三位老人以及新時代年輕人對動畫的執著與熱愛。
關于宮崎駿、吉卜力的紀錄片已經很多了。
《夢與狂想的王國》則是選取了宮崎駿創作封筆之作《起風了》和高畑勛創作《輝夜姬物語》的這段時間為記錄對象,
著力表現了兩人的友誼歷史和之后的創作分歧。
宮崎駿乘坐火車去看自己的試片會。
看完后,他走上臺只說了一句話,
“對不起,生平第一次看自己的電影哭了。”
相信看完后,大家都會想再刷一遍宮崎駿的電影。
這10部紀錄片,都是設計片中的經典,
可以收藏起來反復的觀看,
每個設計階段都會有不一樣的感悟。
片子通過搜索都可以找到片源,
找不到的可以在后臺回復(紀錄片),
會推送片源鏈接。
最后希望大家身體健健康康的,
祝福祖國早日抗疫勝利,加油!
藍藍設計的小編 http://www.syprn.cn