首頁

小身材,大影響。你應該知道的圖標基礎知識

資深UI設計者

如今的用戶界面中,圖標絕對是不可或缺的元素。雖然絕大多數(shù)的圖標都很小,甚至不被人注意到,但是它們幫助設計和用戶解決了許多問題。圖標是可用性和導航的關鍵,用戶能夠感知到圖標的功用,但是只有設計師才會明白,想要讓圖標簡約、可用還富有表現(xiàn)力,要耗費多少時間和精力。

喬布斯曾經說過:“細節(jié)至關重要,花費時間仔細打磨是值得的?!眻D標是現(xiàn)如今UI界面中可用性和導航體系的核心組件,所以,今天的文章,我們來仔細歸納一下常見的圖標類型和它們在UI中的使用。

高手經驗!Facebook的360全景VR應用設計總結

資深UI設計者

FB設計團隊設計的一款Gear VR(三星VR設備)平臺的全景應用過程總結,其中包含一些很有價值的VR實戰(zhàn)經驗與設計原則。

FB的Immersive設計團隊致力于提升人們身臨其境的體驗。我們相信脫離了傳統(tǒng)的“容器”來講述和體驗故事可以讓人們與情景和彼此更深入的聯(lián)結。

我們已經在各個平臺搭建了360度全景照片與視頻服務,目前在FB上已經有超過2500萬張360全景照片和100萬個全景視頻。盡管有如此多的全景內容,然而用戶還是很容易在feed流中錯過這些內容。

Facebook 360介紹

過去的幾個月,我一直為下一步進行設計:給予三星Gear VR平臺的Facebook 360應用——使全景照片和視頻更容易被發(fā)現(xiàn)。這是FB第一個為Gear VR做的媒體應用,一個通過VR瀏覽360全景照片和視頻的平臺。

漢堡圖標不好使?這5個替代方案幫你搞定移動端導航

資深UI設計者

對于設計師而言,移動端設備屏幕上的每一寸空間都是寶貴的資源。為了在小屏幕上做更多的事情,設計師在設計導航系統(tǒng)的時候,通常需要花費更多的時間來打磨。漢堡圖標在過去幾年當中,是最常見的一種設計策略,導航和選項被隱藏在這個小小的圖標之后,但是實際上,雖然大眾已經習慣了它的存在,但是它并不是最佳的導航設計方案。

在今天的文章當中,我們會探討為什么漢堡菜單這樣的隱藏式導航影響用戶體驗,以及可用性更強的替代方案。

為何漢堡圖標會破壞用戶體驗

在移動端設備上,我們看到的可見式導航其實比漢堡圖標這樣的隱藏式導航更多,前者大概是后者的2.5倍。

“思維框架”理論,讓我們更好地決策和解決問題。

資深UI設計者

相信很多體驗設計師在與產品需求方進行設計提案的時候會遇到這樣的情景:

  • 你闡述自己的設計推導過程,從產品目標分析、問題定位、設計目標分析、設計思路闡述這樣的推導下來,在場的產品經理們都點頭,表達認可。
  • 但是!當?shù)搅嗽O計方案環(huán)節(jié),你把方案放出來,各位就七嘴八舌挑戰(zhàn)了:¥#@%&*&*
  • 這時候經常會聽到這樣一句話:“有沒有其他更好的方案?。俊?
  • 這時候你是不是會想,我前面的推導和演繹過程那么完美那么富含邏輯,推導的肯定是最好的方案啦!

但是哦,這個時候,你還是會感覺沒底氣說出這句話來。

于是你最后說出一句妥協(xié)的話“好的好的,我回去改一下。”(各位老板我都聽你們的,你們說啥就是啥)

專業(yè)度呢?設計價值呢?你的玻璃心要碎了:死了產品經理們會不會覺得自己很水很不專業(yè)。

怎么辦?這就是今天想聊聊的主題:“思維框架”理論,讓我們更好地決策和解決問題。


谷歌對話式交互規(guī)范指南系列:對話式界面的概念和機制

資深UI設計者

語音交互是一個全新的體驗設計領域,目前各家機構、公司、設計組織還處于摸索設計范式的階段,Google提供了一份非常成熟、系統(tǒng)的交互規(guī)范文檔,其中包含了核心概念的詮釋以及諸多可以指導設計的實踐原則。最近正在做的項目中涉及到語音交互的部分,所以順手將這份文檔翻譯出來,給需要的設計師參考。

我的譯文盡量的貼合文檔中原有的表意,同時基于我個人對語音交互的理解對表達文字進行潤色。其中有個別概念名詞比較抽象,所以我也旁邊附上了英文單詞,以便大家理解。

我們正在進入一個有光明前景的全新計算領域,機器學習和人工智能激發(fā)著對話式界面和自然語言的進步,同時使對話式交互成為一種新的交互模式。

掌握這5個方面,讓你具備真正的交互設計思維!

資深UI設計者

交互思維是什么?網(wǎng)上的搜索結果大多是一些交互設計的方法。但是我這里要講的,是真正做交互設計所具備的思維方式。交互設計在國內發(fā)展的并不成熟,還有很長一段路要走。很多人,甚至包括交互設計師自身,對這一工作的性質和價值都未必有足夠的了解。

交互設計,聽上去是“設計”,但是其本質和常見的UI和視覺設計相去甚遠?!敖换ァ敝傅氖侨祟惻c機器之間的溝通,與美學、界面、按鈕什么的,其實沒有半毛錢關系。領域細分之前,也許我們考慮的東西越多越好,但是在細分之后的今天甚至未來,交互設計就要有它不一樣的價值。

由于目前的大環(huán)境對這一細分領域仍舊缺乏了解,所以我希望在這篇文章里,寫幾個做交互設計所需要的思維方式。

學會這個方法后,再多的設計需求都不怕!

資深UI設計者

1. 先理解什么是業(yè)務需求、目標、目的

1.1 什么是業(yè)務需求

業(yè)務需求是企業(yè)為了達到某些目標和某種目的而制定的。它代表著企業(yè)希望下一輪產品的迭代能帶來什么收益,所以企業(yè)和 PM 在制定需求時必須謹慎且方向清晰。在工作中,交互要分析拿到的業(yè)務需求是否合理,所以就要理解在業(yè)務需求中的一些基本元素:

  • 需求定位:產品或用戶,還有企業(yè)戰(zhàn)略
  • 需求類型:功能類、數(shù)據(jù)類、設計類等
  • 重要性:重要、暫不重要

拿到需求首先就要分析,定位是否清晰,屬于技術類、數(shù)據(jù)類、設計類等中的哪一類,篩選所有需求中哪個更重要,然后再去做相應的工作。

1.2 什么是業(yè)務目標

煩人的“小妖精”:淺談小紅點的設計

資深UI設計者

導語

隨著各類App的業(yè)務功能不斷豐富,小紅點已經成為互聯(lián)網(wǎng)從業(yè)者們最常使用的運營工具之一,每當有新的運營內容或新功能上線,大家的做法往往是“在那放個紅點就行了”。然而簡單粗暴的形式以及不加節(jié)制的投放,讓小紅點變成了人人厭煩的“小妖精”。本文從設計的角度出發(fā)淺談小紅點的一些設計細節(jié),期望引起大家對小紅點的關注,在這里拋磚引玉,也期待感興趣的小伙伴一起探討。

煩人的小紅點

人類似乎天生對不對稱,不和諧的事物有厭煩心理,并且想要去糾正這些“錯誤”,簡而言之就是大家平時所說的“強迫癥”。而小紅點則完美利用了這一人性的弱點,它就像白嫩臉頰上長出的一顆小痘痘,讓人忍住不去要去擠破它。因此,小紅點也成為了一把產品運營利器,只要投放在某個業(yè)務入口,就幾乎沒有用戶會對它熟視無睹,而當用戶忍不住要去輕觸消除它時,產品側為業(yè)務導流的目的也就達到了。

那么問題來了,用戶喜歡小紅點嗎?在Google和必應上搜索關鍵詞“App 小紅點”,幾乎有一半的搜索結果是“教你如何消除小紅點”。

VR設計指南(2) - 基礎概念與設計工具

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里


在本文的第二部分當中,我們來了解一些作為設計師需要掌握的VR基礎概念及相關設計工具。我們不會探索的過于深入,面向設計師的職能點到為止即可。


新的空間維度與沉浸式體驗所帶來的沖擊是前所未有的。要在三維世界當中打造令人舒適的互動體驗,你需要了解一些此前可能并未接觸過的設計與技術原則。我們的Cardboard團隊將一系列概念知識打包到了Cardboard Design Lab這款app(Android)當中,你可以配合Cardboard沉浸到VR世界當中進行學習。


VR設計指南(2) - 基礎概念與設計工具


此外還要記得觀看Alex在2015年I/O大會上做的詳細演示(Youtube)。下面我們就來從這些學習資源當中匯總出一些知識要點。


如果你只有精力去記住兩條原則:

  • 保持幀數(shù)穩(wěn)定

  • 保持頭部追蹤


人們在沉浸于虛擬世界當中的時候,會本能的對外界事件產生反應。作為設計師,要考慮到環(huán)境因素的影響。


生理舒適度。眩暈癥的問題是我們必須面對的。特別是在角色加、減速的時候要特別留意。盡可能保持地平線的穩(wěn)定,以避免暈船癥狀的出現(xiàn)。

環(huán)境舒適度。人們在一些特定的虛擬環(huán)境當中同樣會體驗到與現(xiàn)實相對應的不適,譬如高空與恐高癥,狹小的空間引發(fā)的幽閉恐怖癥,空曠空間所造成的廣場恐懼癥等等。要注意虛擬對象的尺寸比例及互動關系。在現(xiàn)實中,如果有人向你拋來一個物體,你會本能的抓取、躲閃或是保護自己。合理利用現(xiàn)實當中人與環(huán)境的互動規(guī)律,不要反其道而行之。


圍繞用戶的感官能力設計引導元素。想想游戲設計師們通常是怎樣指引玩家探索環(huán)境的:

  • 通過聲音幫助玩家辨別方位

  • 通過光亮為玩家指明方向


避免讓用戶感到疲勞。聽上去是再顯然不過的道理,但這確實是VR設計新手最容易犯的錯誤之一。我們在科幻電影中看過太多炫酷的人機互動方式,但你要知道其中大多數(shù)都有悖于最基本的人機工學原理;例如“少數(shù)派報告”當中那樣的手勢操作放到現(xiàn)實當中會很快讓人產生疲勞與不適。


我制作了一張簡單的示意圖,用來描述頭部在X與Y軸上運動的舒適區(qū)域。綠色代表最佳,黃色代表可以接受,紅色意味著不適。網(wǎng)絡上可以找到的一些用研報告將有助于你進一步了解這方面的話題,例如來自LeapMotion的VR Best Practices Guidelines(PDF格式,4.7M),此外我們還將在本文結束時提供更多的資源供參考。


VR設計指南(2) - 基礎概念與設計工具


不當?shù)脑O計有可能給人們造成嚴重的生理不適。聽說過“短信脖”沒?在一篇發(fā)布于Neuro and Spine Surgery的研究報告(PDF格式,314KB)當中,我們可以了解到人們使用手機時不同的持機姿態(tài)對于頸部所產生的壓強變化。從自然平視狀態(tài)一直到低頭瀏覽,頸部承受的壓強提升了440%,肌肉和韌帶會變得酸痛疲勞,神經趨于緊張,脊椎骨所承受的壓力也在增強。這些不當?shù)氖褂梅绞缴踔量赡芙o身體帶來長期的健康問題,例如永久性神經損傷等等。


簡而言之,這個特定的研究報告至少能告訴我們要盡可能避免長時間的低頭交互行為。

VR設計指南(2) - 基礎概念與設計工具


自由度

三維空間為我們提供了六種運動方式,包括在X、Y、Z三個軸線上進行的旋轉與移動。


三自由度(方向追蹤)

基于手機的頭戴式VR設備,例如Cardboard或Gear VR等等,可以通過內置的陀螺儀對三個軸線上的旋轉行為進行追蹤(3DOF)。


VR設計指南(2) - 基礎概念與設計工具


六自由度(方向+位置追蹤)

HTC Hive與Oculus Rift這類高端VR設備所擁有的傳感器還可以對發(fā)生在三個軸線上的位移進行追蹤(+X、-X、+Y、-Y、+Z、-Z),從而實現(xiàn)六自由度(6DOF)。


VR設計指南(2) - 基礎概念與設計工具


追蹤

由一個或多個傳感器所組成的紅外追蹤系統(tǒng)使6DOF成為可能。Oculus的追蹤傳感器位于固定攝像頭上,而Vive則將其放置在了HMD(頭戴式顯示器)當中。


VR設計指南(2) - 基礎概念與設計工具VR設計指南(2) - 基礎概念與設計工具

Oculus與Vive的燈塔位置追蹤模式對比


輸入設備

具體的輸入設備取決于你所采用的系統(tǒng)平臺。Google Cardboard本身只有一個按鈕,相應的交互模式僅包含簡單的“看”和點擊。HTC Vive需要兩個6DOF控制器,而Oculus則搭配了Xbox One手柄,不過最終也會進化為雙6DOF控制器“Oculus Touch”。這些輸入設備都能為用戶帶來更高級的沉浸化交互體驗。

VR設計指南(2) - 基礎概念與設計工具

Xbox One手柄

VR設計指南(2) - 基礎概念與設計工具

Oculus Touch

其他輸入模式還包括手勢追蹤等等。其中最著名的當屬Leap Motion,你甚至可以將其搭載在HMD上配合使用。

VR設計指南(2) - 基礎概念與設計工具

搭載在DK2上的Leap Motion


日新月異的科技進步在不斷推進著這類設備的發(fā)展,不過目前來說,手勢追蹤技術還很不成熟,雙手與手指的細微動作帶來的潛在問題太多,使其難以成為VR的主要輸入設備。


游戲手柄雖然早已被人們所熟悉,但在VR領域中卻難以帶給我們高質體驗,因為操作方式的局限會使VR創(chuàng)造出來的高自由度受到破壞,特別是在FPS(第一人稱射擊)游戲當中,通過手柄控制前進后退和左右平移的動作時通常會給玩家?guī)順O度不適。


而另一方面,HTC Vive的6DOF控制器體驗起來確實非常棒,特別是在Tilt Brush這類app當中。我還沒有試過Oculus Touch,不過到目前為止看到過的演示都很棒,譬如這段Oculus Toybox demo(Youtube)。


VR的交互設計模式顯然取決于你所選定的系統(tǒng)平臺及相應的輸入設備類型。作為設計師,要盡可能去熟悉各類設備,并對它們的優(yōu)勢及功能限制有所了解。


設計工具

這顯然是個很大的話題,需要更多的專業(yè)文章甚至相關書籍才能詳盡描述。我們在本文中僅對業(yè)界最主流的一些工具進行簡要的介紹。


紙和筆

無論在什么時代都始終不離我們左右的老伙伴,方便快捷,無需花費時間精力聚焦于任何技法,在初期探索時尤為適用,能幫你迅速呈現(xiàn)想法,快速迭代,而且成本低廉。要知道,在VR領域,將設計流程推進到中、高保真階段所需花費的成本相比于2D界面設計來說要更加高昂。

VR設計指南(2) - 基礎概念與設計工具

Sketch

仍然每天都會用到,因為好用。在進入實際的VR原型階段之前,Sketch是很完美的探索工具,在導出和插件方面也能幫你極大的提升工作效率。

VR設計指南(2) - 基礎概念與設計工具

Cinema 4D

我并不覺得C4D和Maya是競爭對手的關系,兩個工具都很棒,各有所長。如果你沒有3D方面的經驗,學習曲線可能會有些陡峭。在我看來,C4D的界面、參數(shù)設定和構建方式更合理,能幫我做更多的快速迭代,所以很喜歡用。MoGraph模塊不錯,同時還有很多好用的插件供選擇。C4D的社區(qū)很活躍,你可以找到不少高質量的學習資源。

VR設計指南(2) - 基礎概念與設計工具

VR設計指南(2) - 基礎概念與設計工具  VR設計指南(2) - 基礎概念與設計工具  VR設計指南(2) - 基礎概念與設計工具

Maya

Maya的優(yōu)勢和不足都很明顯。一方面,它能滿足3D藝術家的所有設計需求,太多游戲和電影都經由Maya設計制作,其強大而易用的功能可以應對繁重的工作負荷,渲染、建模、動畫等等無所不通,同時還擁有很高的定制化能力,堪稱業(yè)界典范。多數(shù)工作室需要根據(jù)自身的特定需求來組裝定制化工具集,而Maya正是有能力將所有組件整合為一體的最佳平臺。

但另一方面,要掌握如此強大且多樣化的工具,你勢必要投入大量的時間和精力,包括幾周時間的摸索,幾個月的學習以及日復一日年復一年的練習與實踐。

Unity

一應俱全的原型工具,你可以一邊在VR中預覽著原型一邊在Unity當中進行調整。Unity本身是個強大的游戲引擎,社區(qū)成熟,store中的資源也很豐富(具體售價由資源作者制定),包括簡單的3D模型、完整的項目、音頻、分析工具、著色工具、腳本、材質紋理等等供你選擇。

Unity提供的文檔和學習平臺相當不錯,教程質量很高,覆蓋面也很廣。


在Unity3D中進行開發(fā)需要用到C#或JavaScript,微軟的Visual Studio套裝當中自帶Unity工具,但不包含可視化編輯器,你需要到資源庫中自行尋找。


Unity支持所有的主流HMD,具備優(yōu)秀的跨平臺能力,內容可以被部署到各類系統(tǒng),包括:Windows PC、OS X、Linux、Web Player、WebGL、VR(包括Hololens)、SteamOS、iOS、Android、Windows Phone 8、Tizen、Android TV和Samsung SMART TV,以及Xbox One/360、PS4、Playstation Vita和Wii U等等。


Unity支持所有的主流3D格式,在2D游戲開發(fā)方面也很擅長。自帶的3D編輯器不算給力,但人們已經開發(fā)了很多優(yōu)秀的插件來彌補這一點。Unity需要授權許可,但你可以在一定的功能范圍內使用免費的個人版本。不妨去官網(wǎng)了解詳情,畢竟是當今最主流的游戲引擎,市場占有率達到了47%。


VR設計指南(2) - 基礎概念與設計工具

Unreal(虛幻)引擎

作為Unity3D的直接競爭對手,Unreal同樣提供了完備的文檔教學視頻。由于進入市場的時間相比于Unity稍晚,所以Unreal的store規(guī)模還相對較小。


Unreal的巨大優(yōu)勢在于圖形表現(xiàn)力,無論是地形、粒子、后期處理效果還是光影等等都領先于對手。


Unreal 4使用C++,同時搭配可視化腳本編輯器Blueprint。


我個人沒怎么使用過Unreal,難以進行更詳細的介紹。在跨平臺方面,Unreal相對較弱,目前支持Windows PC、OS X、iOS、Android、VR、Linux、SteamOS、HTML5、Xbox One和PS4。

VR設計指南(2) - 基礎概念與設計工具


結束語

VR還相當年輕。作為先行者,我們需要去學習和探索的東西太多太多,這也正是我為此而興奮并最終加入VR團隊的原因。擺在我們面前的有挑戰(zhàn),更有機遇,我們理應盡最大的努力到這個新世界當中進行探索,去學習、理解、創(chuàng)造、迭代,如此反復的長久保持下去。

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

暑期干貨!2017年8月前端開發(fā)者超實用干貨大合集

資深UI設計者

在過去的幾年當中,網(wǎng)絡上所流傳的各種設計和開發(fā)資源,在素質上有明顯的提升。其中有一些已經幾乎成為了設計師和開發(fā)者必備的工具,但是其中絕大多數(shù)由于其應用范疇的局限,或者傳播不夠廣,導致它們大多并廣為人知。將這些素材集中到一起,很大程度上是希望它們的目標用戶能夠明白,需要這些工具的時候,上哪兒找。

這次的前端干貨合集內容也很齊全,仔細看看,總能找到幾款你所需要的。

MuzzleApp

日歷

鏈接

個人資料

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

存檔