国产女主播一区二区精品视频_女人一级刺激无遮挡毛片_无遮挡男女视频大全 -24小时日本在线视频_久久97人人超人人超碰超_中文字幕在线精品_色综合天天视频在线观看

首頁

這7種廣泛存在的認知偏差,影響了我們太多的決策

濤濤

如今心理學和行為學已經是UX和產品設計領域當中諸多理論的來源和實踐的依據,它們是UI/UX設計師和產品設計師的必修課。

系統(tǒng)的心理學和行為學的知識,對于設計工作其實有著極為深刻的影響。用戶體驗設計很大程度上是在心理學和行為學的研究基礎上逐漸進化和發(fā)展起來的,對于想要深耕這一領域的設計而言,心理學和行為學是繞不開的必修課。

心理學和行為學早已并非是單獨存在的學科,它們和許多不同領域的知識交匯融合,圍繞著人性進行多維度全方位的探討。如今我們所熟知的許多優(yōu)秀的產品,也大多從這些領域技汲取營養(yǎng),不少四兩撥千斤借力逆襲的成功案例,也往往借助的是這些深深植根于人性的杠桿。

這兩個宏大的命題并非簡單幾段話說得清楚,但是這當中有許多有意思的現象,非常具有啟發(fā)性。許多植根于人性本能中的非理性心理和行為,在日常生活中主導著我們作出決策,有的是一些不易覺察的心理效應,有的僅僅是不算太顯著的認知偏差,但是在設計和實際產品當中運用,則常常呈現出極為驚艷的效果。

對于這些心理學效應和認知偏差,設計人員需要在自身進行決策時候盡量回避,避之不及確實會面臨車毀人亡的局面;在設計過程中,可以巧妙地將這些因素納入到考慮當中來,因為它們同樣可以影響用戶,成為撬動產品打開局面的重要的契機。

幸存者偏差

幸存者偏差(Survivorship bias)雖然被稱為認知偏差,但是實際上,它更接近于是一種邏輯謬誤下產生的一種錯誤認知。幸存者偏差指的是人往往會注意到某種經過篩選之后所產生的結果,同時忽略了這個篩選的過程,而被忽略的過程往往包含著關鍵性的信息。

讀書無用論是一種最常見的幸存者偏差。讀書無用論中最多的說法是XX并沒有好好上學但是照樣掙大錢了,而XX努力讀書反而混得并不好。

這些個案并不涉及到具體數據,從數據角度上來說,也不難解釋這種“主觀感受”的成因。根據第六次全國人口普查,大專及以上學歷的人口僅占總人口的8.7%,高學歷者落魄更容易受到媒體的關注,而低學歷中的成功者也常常能夠吸引普通人的目光,即使低學歷人口中涌現的成功者的比例遠低于高學歷者,由于基數差異,這個數值對比也是相當可觀的。正是因為忽略了數據中沉默的大多數,讀書無用論這種錯誤的觀點才“得以成立”。

槍擊案中的幸存者大多傷的是手和腳,那么是否要加強手腳的保護呢?實際的情況上,在軀干和頭部中槍的人,大都沒有挺過來,相反更加需要保護是軀干和頭部。就像能活著回來的戰(zhàn)斗機中彈的通常都是翅膀和機身,因為引擎中彈的大都已經犧牲了。這個案例也許能夠幫你更好地理解幸存者偏差。

對于事件發(fā)展過程中篩選機制的忽視,容易讓人產生錯誤的結論,從而導向錯誤的方向,在設計決策過程中,出現這樣的過程中,極有可能是致命的。

在需求分析和調研過程中,如果忽視了幸存者偏差,很有可能搜集到的數據,體現的僅僅知識少部分用戶的需求和想法,最終將偽需求和小眾需求當作主要需求來作為設計易于,則可能讓產品從一開始就走向萬劫不復。

在搜集產品的用戶反饋信息的時候,也很容易遭遇幸存者偏差。絕大多數的用戶在正常使用產品的時候,如果沒有合理的觸發(fā)機制,或者產品沒有特別突出的特點的情況下,很少會主動“好評”,相反,遭遇問題的用戶則更傾向于主動吐槽并分享糟糕的體驗和問題,這也很容易造成“這個產品哪哪兒都是問題”的錯覺。

基本歸因偏差

基本歸因偏差這個名詞同樣源自于心理學,比較學術表述是“對他人行為進行歸因的時候,往往會傾向于把別人的行為歸因為其內在因素,而低估了情境因素的影響,而對于自身的行為歸因的時候,則傾向于把自己的行為歸因為外在因素,而忽略自身因素的影響”,基本歸因偏差的含義表述可能有點拗口,但是并不難理解。

基本歸因偏差是一種重要的人類心理防御機制,是人類進化過程中所產生的一種局限性的思維定勢。和復雜多樣的環(huán)境因素相比,行為者本身的問題是更容易被發(fā)現的,所以觀察者在觀察行為者的時候,諸如社會環(huán)境、社會角色、情景壓力等外部因素更難以引起注意,將問題更多歸因于行為者本身的行為舉動和個人內因。比如,當看到某個人生活拮據的時候,會簡單歸因于他不夠勤奮等等。類似的,在面對生活中的諸多不順的時候,直接歸因于“水逆”而很少會仔細思考是否有自身的原因。當事人和觀察者對于事件的歸因不同,爭議和問題往往因此而起。

對于UX設計師而言,基本歸因偏差是矛盾和問題的常見的來源,而且這種認知偏差存在于用戶也同樣存在于設計師本身。無論是面對設計問題,還是做調研,進行測試,涉及到多方面影響因素的時候,基本歸因偏差都會對設計方案、設計決策產生影響。

這需要設計師能夠清楚地分辨“我的觀點”和“我的行為”,能夠真正將自己從自己所處的立場、角色、職能上抽離出來,復盤整個局面,首先接納全部的狀況和現實,包括他人的想法、觀點,先不去判斷對錯,而是先接納所有的狀況和全部的元素,明白事物的動態(tài)變化過程,不再單一地去判斷,任何一個視角必然會存在一個立場,它們是當前事物諸多層面中的一方面而已。

面對復雜多變,但是因果清晰、逐步成長變化的事物,用動態(tài)而全面的思維方式來看待,才能真正看清楚事物變化的軌跡,更有針對性地設計,作出合理的決策。

后視偏見

后視偏見(Hindsight Bias)則是另外一種常見的認知偏差,它指的是人在事情發(fā)生以后覺得自己在事情發(fā)生之前就已經預測到結果了,實際上,他們并不如自己想象的那樣能夠準確的進行預測。這種行為在觀察者眼中常常會被稱為“馬后炮”。

后視偏見在很多人身上都存在,人的主觀性和記憶本身會造成這種偏差。對于設計工作者而言,厚實偏差的存在無疑是會帶來負面影響的。后視偏見會讓人沉迷于“我早就預料到了”這種感受當中,相應的無法真正從事件中真正汲取到有用的經驗,也難于使用公平的眼光來評判客觀事物和他人,主觀上也很容易選擇性忽略許多客觀條件和事實。

后視偏見確實會給人帶來快感,相應的,會在工作中影響決策的正確性和公平性,從而帶來潛在風險。糾正后視偏見的方法并不復雜,在確知事情結果之前,記錄下自己的想法,事后做驗證,并統(tǒng)計成功與失敗的數據。

事件的結果并非是最好的判斷因素。在調整好認知之后,對于事件和情況的過程和相關因素進行相對全面的衡量,盡可能少的摻雜主觀情緒來進行分析,這樣的決策的有效性會更強。

曝光效應

曝光效應(the exposure effect)也被稱為多看效應(和多看這款應用并沒有關系),接觸效應。曝光效應本身的描述也不復雜:人會更加偏好自己熟悉的事物。在社會心理學領域,曝光效應的另外一個稱謂是“熟悉定律”,這可能更好理解。

自己總傾向于購買自己熟悉的品牌的產品,談戀愛的時候總會有繞不開的老同學和老朋友,這些都是曝光效應之下的人類認知偏差。我們常常說的“一旦接受了這個設定還挺帶感的”就是對于這一效應的真實側寫。

曝光效應在廣告行業(yè)、產品營銷和社交媒體有著天然的親和力,對于營銷人員、運營人員、品牌設計師和UX設計師而言,這一效應的活學活用是非常有必要的。

不過曝光效應本身并非是無條件的,相反它和產品屬性、品牌設計、企業(yè)形象以及運營策略有著極為緊密的關聯(lián)。

曝光效應在許多不同的社會實驗當中呈現出一種不穩(wěn)定性,可能是因為相關的影響因素多而復雜。有的研究表明,即使產品和服務曝光過程中絕大多數的內容是正面的,公司和企業(yè)本身的名氣高低和品牌形象,同樣會影響曝光效應的高低。

曝光效應在發(fā)揮的過程中,即使曝光的內容全部是正面的,對于用戶的影響也會逐步呈現出一種矛盾性,也就是用戶會對產品或者服務產生正面聯(lián)想的同時,還會產生不利的、負面的感受。

曝光效應發(fā)揮效果最好的時段,始終是絕大多數用戶對于產品認知不足的階段,這個時候曝光效應會最大化的對用戶產生影響。

值得特別注意的是,一開始就讓人覺得厭惡和不適的產品是無法產生正面的曝光效應的,如果一開始存在沖突,曝光效應只會加深誤會和沖突。過量的曝光一定會帶來厭惡,由于復雜而大量不可控的影響因素,甚至會導致失控式的崩盤。

對于UX設計師和產品的策劃和運營者而言,在合適時機加大產品的正面曝光是有效度最高的策略。深入了解曝光效應,才會明白何時放,而何時收。

可得性偏差

可得性偏差(Availability Heuristic)也是一種常見的認知偏差,它是啟發(fā)式偏差的一種,人們往往會根據自己認知上的易得性來判斷事情的可能性,甚至于會根據自己看到和聽到的只言片語來做決策,而不是根據統(tǒng)計學數據和系統(tǒng)化的知識來做判斷。

可得性偏差同樣是一種廣泛存在的認知偏差,用戶認為自己熟悉的、更容易獲得的信息在復雜的系統(tǒng)中發(fā)揮著更大的作用,主觀上忽略其他的部分??傻眯云詈褪煜ざ桑ㄒ簿褪瞧毓庑┯行┰S共通的地方。

可得性偏差在金融領域有著巨大的影響,許多準備上市的企業(yè)會在上市前夕吸引大量的新聞報道,讓投資者在信息的狂轟濫炸之下不知不覺地去關心,無意識地去了解,并最終購買這支股票拉高股價。這種策略就是借助投資者的可得性偏差來實現的。下面是谷歌搜索關鍵詞阿里巴巴的頻率和阿里巴巴的股價變化情況,兩者呈現出一種明顯的關聯(lián)性。

可得性偏差的廣泛存在,使得設計師甚至可以在自己的產品中借助有有意識的設計,來引導用戶的行為。作為設計師本身而言,可得性偏差同樣是會影響到設計決策,因為可得性偏差同樣會影響產品設計中的設計決策的走向。消除可得性偏差的方法也不難,需要設計者不要被已知的信息和容易想起來的信息所左右,而是盡量深入地從多個角度來考慮問題,跳出固有的思維定勢,多角度看待問題,作出合理的決策。

錨定效應

錨定效應也被稱為沉錨效應,它一樣是一個聽起來高大上但是含義并不復雜的概念,它指的是人們對某人某事作出判斷的時候,容易受到第一印象或者第一信息的影響和支配。這種現象就像船只被錨固定在特定位置而無法移動,因此而得名。

人們在做判斷的時候,往往會受到第一印象和首個接收到的信息的影響。就像鳥類會將第一個看到的生物視之為自己的母親一樣,人們往往會借助第一印象來作為后續(xù)判斷一個事物的參考標準,甚至在人際交往中都是金科玉律。即使是沒有刻意地去參考第一信息,人們也會在潛意識當中,重視第一次獲得的數據。

錨定效應的另外一個層面是對比,當擁有了錨定的參考之后,用戶在后續(xù)會以此為基準進行對比。對比并不存在絕對意義上的好壞,但是在不同的基準之下,或者說參考的基點不同的情況下,發(fā)揮的作用其實是截然不同的。

舉個簡單的例子,粥鋪的服務員問客人“加一個雞蛋還是加兩個雞蛋”比“要不要加雞蛋”所產生的銷售額高出不少,因為前者會人的心理基點是“要加蛋”,而后一種問法,則讓客人先思考“要不加蛋”,前者的轉化率自然更高。

正是因為先入為主這種心理現象大量影響著用戶的決策,使得市場競爭中,許多企業(yè)和產品都不得不去力圖爭個第一,贏得主導權。

iPhone X的劉海屏對于手機市場有多大影響想必大家有目共睹。而后續(xù)的藍綠兩廠的升降式攝像頭設計和“真·全面屏”也因為其突出性和強大的“第一印象”的構建,而贏得了無數贊譽。

但是靜下心來想想,開機解鎖還要等待攝像頭升起,好像還是一個蠻奇怪的事情??墒亲钤绲摹罢妗と嫫痢贝_實夠驚艷。

免費認知偏差

優(yōu)惠促銷是各種產品銷售中最常用到的一種策略,而在花樣迭出的促銷手段當中,有為數不多的集中手段,呈現出令人驚艷的效果。

免費的贈品和滿額減免就是這其中的典型。購買產品A,贈送一款B,這種贈品策略的玩法可以說是效果極佳,早年間阿芙精油聲名鵲起的階段,其中最令用戶欲罷不能的,就是他們的“贈品”。用戶每一次購買精油產品的時候,阿芙的團隊會隨之一起發(fā)出精油的入門口袋書以及多達五六種精心挑選的精油試用裝,這種體貼且讓人覺得“狠賺一筆”的心理感受,使得許多新用戶迅速轉為穩(wěn)定客戶。

置于滿多少減多少,則同樣是一種成功的促銷策略。各種電商平臺和購物節(jié)都會采用花樣繁多的滿減服務,相應的,用戶在這種服務之下,總忍不住“湊單”。平心而論,真實的情況是,用戶購買了自己真正需要的商品,以及一系列為了湊單而同時購買的非必須商品,對于商家和平臺而言,這種策略很好的拉高了銷量,也減少了許多商品的庫存,而用戶也感覺自己賺到了,皆大歡喜。

至于“包郵”,我就不贅述了。這個效果同樣非常突出。

相比之下,打折促銷所產生的效果,好像就沒有那么顯著和“暴力”了。歸根結底,問題是出在“免費”的認知偏差之上。對于用戶而言,無論是贈品、滿減還是包郵,本質上都會讓用戶迅速地在大腦中形成一種“免費獲得某種東西”的感覺,贈品對應的是免費的物品,滿減對應的是免費的現金回饋,包郵則是免費的郵寄服務。

心理學家和行為學家通過大量的實驗驗證了免費確實和折扣等其他的促銷策略有著本質的差別,它所帶來的非理性行為要明顯太多,免費的吸引力無與倫比,說是認知偏差毫不為過。

你一定特別想點擊上面的圖片免費下載素材。不好意思它只是個圖片。

人類本能地懼怕?lián)p失,選擇免費的贈品不會有損失,而相比之下選額其他則會讓人在潛意識中產生風險感,可能會蒙受損失。這樣一來,免費的贈品在人心中的價值就開始高于實際價值,隨之而來的就是非理性消費。

在設計的過程中,想要讓免費的認知偏差發(fā)揮效果,讓人快速地感知到這種“免費獲得”的感受,應當是明顯的,否則很難快速地觸發(fā)非理性的反饋。

結語

人類先天的生物性無處不在,我們自詡的理智在現實生活中發(fā)揮的作用并沒有我們想象中那么多,無處不在的各種認知偏差主導了太多的

2018端午節(jié),就是想送你份口味“粽”——H5分享

濤濤

端午節(jié)到了,阿里巴巴TXD的小伙伴們準備送你只'口味粽',祝大家假期玩的開開心心,點擊圖片識別二維碼便可生成你專屬的‘口味粽’。


01

項目背景


Image title

阿里對待中秋節(jié)會更加的濃重,每年中秋節(jié)所有的員工都會收到精美的月餅和祝福。相比之下我們的端午節(jié)就過得比較平淡了,于是咱們團隊的小伙伴們準備做一個H5,用我們的自己的方式送大家以及自己一枚口味粽。


整個項目的初衷有兩個,一個是代表TXD送給大家端午節(jié)的祝福,另一個就是用團隊協(xié)作的方式在極短的時間里面設計一款H5。


02

項目思路


對于我們來說最大的挑戰(zhàn)是時間。距離端午假期僅剩一周不到的時間,而大家都有自己的業(yè)務工作,難道放棄?既然已經立下了flag,怎么也得完成。我們制定了項目的節(jié)點,并且通過多枚成員分工協(xié)作去完成它。


Image title

Image title

大部分項目是需要協(xié)作完成的,一旦協(xié)作不好,項目進度則事倍功半。所以最考驗大家的是怎么進行更的協(xié)作。通過有效的決策,我們讓協(xié)作變得順利。


Image title





Image title


我們通過小組會議確定玩法后,分配人員進行文案和交互設計。由主設計師定下設計風格,其他設計根據風格繪制UI以及其他場景素材。所有素材實時同步在項目群里,確保保持統(tǒng)一的風格。


03

項目介紹


首先我們的粽子不是一般的粽子≧ω≦,我們粽子的餡兒都采用各種珍稀的食材。

Image title


這些“珍稀”食材通過我們神秘的構造機做成不同的神奇粽子!

Image title

Image title

Image title

Image title



更多不一樣的粽子,通過我們的機器定制屬于自己的神奇粽子。


本次的項目屬于我們的團隊成員通過空閑時間在短時間里面完成的。只是想送給端午節(jié)的童鞋們一個小小的祝福。

如何提升界面品質感?

濤濤

一、當前背景

今天聊些設計基礎部分。

設計工作中,我們總會接到不同場景、不同目標用戶的業(yè)務需求,需要不同風格的設計方案支持,但無論是什么風格的設計,用戶都會有一個共同訴求——「品質感」。

二、什么是品質感?

所謂品質感其實就是產品給人的一種嚴謹、專心對待的態(tài)度。同樣一本書的封面,粗糙紙的封面和細心打磨的小羊皮封面就是不同的概念。

例如無印良品和愛馬仕,兩者都會傳達給用戶一種「品質感」,雖設計方向不同,但他們有一個共同的特性——對細節(jié)的深度打磨。其實品質感就是來源于產品對細節(jié)的深度考究與打磨。

一款有品質感的設計,隨之帶來的是用戶使用中的舒適度、好感度、信賴感。

三、界面中的品質感

界面設計也是一樣,也會帶給用戶一種品質感,其同樣是源于設計師對界面的每處細節(jié)的深度考究。

界面的品質感主要來源于界面四個維度、界面中的結構、界面中的圖形、界面中的顏色和界面中的動態(tài),今天說如何通過結構提升界面品質感。

四、界面中的結構

界面的結構在用戶體驗中起著重要作用,其相當于界面設計中的「骨」,界面結構中的細節(jié)更是會直接影響到整體設計的品質感。那么具體結構中的細節(jié)體現在哪里?

1. 關系

信息關系包含界面中的組合、層級、分割等。

組合

「物以類聚」,界面內需明確傳達各元素間的關系。

輔助信息服務于主體信息:輔助信息為主體內容的延續(xù)說明或補充操作,作用為服務于主體內容。同一組合內,信息間需有明確的關系與合理的順序,且輔助信息不能搶鏡。例如朋友圈,清晰傳達關系的同時,以內容為主的閱讀方式不會被頭像內容干擾。

關系越緊密的內容距離應越近:形式不變的基礎上,元素之間的距離越近,越易被視為同一組合。距離相同時,橫向排列的內容接近度相對更高。

層級

界面的層級關系主要體現在主次、優(yōu)先級、層數。

主次分明、避免層級混亂:清晰的層級結構,能讓用戶更快的獲取重要內容,同一組合下其信息一定有主要展示和次要展示??梢酝ㄟ^位置、面積、顏色三個維度建立主次層級的對比度。

  • 位置。在中國,用戶的閱讀習慣為從左上至右下,所以用戶對左上區(qū)域的觀察最優(yōu),依次為右上,左下,而右下最差。因此,左上部和上中部被稱為「最佳視域」。
  • 面積。信息內容在界面內的占比面積越大,信息越是突出。
  • 顏色。白色背景下,明度越低/飽和度越高,信息越是突出。

同一組合下,有且僅能有一個最重要的內容:當所有的內容都重要,也就等于所有內容都不重要,信息的優(yōu)先級不取決于主要信息是否夠大,而是主要信息和次要信息的對比度。

同一頁面,信息層級不宜過多:過多的信息層級會讓頁面變得復雜,增加用戶的理解成本。冗余的信息展示會讓界面變的凌亂瑣碎,一定程度上干擾用戶使用體驗。一般情況下界面應控制在3層信息以內。

主次分明、優(yōu)先級明確、層級適當會讓界面的信息傳達更清晰明確,進而增加用戶的使用中的舒適度。

分割

分割是用于區(qū)分不同信息的方法,大概可以分為距離分割、線性分割、面性分割(背景色分割)、顏色分割。

距離分割:增大兩模塊的距離達到內容分割內容作用,元素間的距離越遠,越不易被視為同一組合。其好處是可以省去分割元素,減少視覺層級,讓界面更干凈、明快。

線性分割:線性分割是目前界面中最常用的分割方式,其優(yōu)勢是線自身「較輕」,不易干擾用戶。值得注意的是線本身不重要,不宜過度強調,應點到為止,所以線的顏色不宜過重。

面性分割/背景色分割:當處理多層級、信息復雜的場景,在單個模塊里已經用了線性分割的情況下??赡苄枰鼜娨稽c的分割方式來表明模塊與模塊間的關系,這時我們可能需要面性分割方式。這種方式像是灰色的背景上,羅列著多張卡片,能更明確的表達兩組內容的分割感,但其缺點是會較明顯的增多界面層級。

顏色分割:當信息的表現形式重復性較高,容易被看混的情況下,顏色分割是更為合適的選擇。

能起到分割作用的前提下,分割方式越輕,越不會干擾閱讀、界面越干凈。

以上可以總結為

  • 界面中的組合能讓信息關系更縝密。
  • 層級能讓用戶更快的獲取重要內容。
  • 分割能讓用戶更清晰的區(qū)分不同模塊間關系。
2. 字體

文字字體是界面結構中重要組成部分,文字也是多數場景下信息傳達最為準確的方法。合理的字體能夠增加用戶的閱讀體驗,提升用戶在產品使用中的舒適度。合理的字體包含字體的可讀性、對比度、間距。

可讀性:可讀性是字體在界面中需考慮的基礎因素,也是首要因素。字體的信息傳達需精準、明確。字形選擇包括其場景適應和字形的適度性。

字形的場景適應:由于不同的字形會帶給用戶不同的感覺。由于場景需要,我們一定情況下會選擇自定義字體。當我們選擇不同的字體時,需要考慮字體在產品內不同模塊下是否易于閱讀。

字形的適度性:字體本身不宜搶鏡。隨意的、搶眼的字體一定場景下上能夠帶來足夠的氛圍感,但是長期使用會出現「視覺疲勞」,其原因是字體本身的設計搶走了用戶正常在該場景下閱讀或使用的內容和信息。

對比度

字號:用于區(qū)分不同層級的信息內容,為保證信息的快速傳達,不同層級的字體需有一定的優(yōu)先級順序。

界面內的主文案/一級文案應精簡明確。假設用戶只會在這個界面停留3、4秒,能夠吸引用戶繼續(xù)瀏覽界面的就是一級信息。當一級信息文案字數過多,會增加用戶剛進入頁面時的閱讀成本,進而降低閱讀體驗。

另外,移動端小于24px的字號應慎重使用,雖然小的字號會讓版式更加的精致,但當同一場景下,小于24px的文案字數偏多時,會影響用戶的正常閱讀。但可用于弱化的文字鏈、標簽等字數少的場景。

加粗:字號相同,字體加粗也是區(qū)分不同層級信息的一種方法,當兩信息區(qū)分度不大、界面層級過多需要減少層級的場景下,可以選擇加粗部分內容建立輕度對比。

字色:我們畫畫的時候,時常會聽到老師說「要注意畫面的黑白灰」。在界面設計中,也是一樣,我們需注意各層級字體間的黑白灰關系。明確的畫面黑白灰關系會讓界面變得更干凈清晰。另外,當不同明度切換時應保持色相/飽和度不變。

間距:在界面設計中,字間距和行間距會直接影響用戶閱讀效率。過于緊密的間距會讓字體間失去「透氣性」,根據我們正常的閱讀順序來講,字間距要小于行間距以便于每一行更易被視為一組,進而給用戶帶來更好的閱讀體驗。我們可根據文案長短,字號大小制定更適合閱讀的間距。

字體的可讀性是字體的基礎,明確的字體對比度能夠讓信息層級更加清晰干凈,而合理的字間距能夠無形的提升用戶的閱讀體驗。

3. 信息對齊

對齊是界面結構中的一部分,合理的對齊方式能夠使界面內的信息變得更規(guī)整,內容傳達更明確。讓元素間的關系更具節(jié)奏感。

聯(lián)系性

同一組合內的不同元素間需有明確的對齊關系,其關系能夠清晰表達不同元素間的親密性。

元素間的居左對齊:當文案的字數偏多一些的場景下,居左對齊更符合用戶的閱讀習慣。

元素間的居中對齊:當內容信息較少、或由于對齊元素形狀等因素,居中對齊可能會帶來意外的收獲與效果。

元素間的居右對齊:界面內一般不會用居右對齊的方式來建立兩元素間的關系,但是界面內會存在和屏幕建立右對齊關系的元素,與屏幕右對齊的元素一般為主體的解釋說明以及輔助操作等。一般情境下,當用戶閱讀完主要內容信息后才會對操作類的功能有需求,如查看購買、關注、查看更多、進入下一頁面等。

統(tǒng)一性

另外,不同組件間也需要合理的建立對齊關系,同時為保持界面的簡潔性,同一界面內建立的對齊模式不要過多。

總結

界面的結構是提升界面品質感的關鍵,而合理的信息關系、字體、對齊方式能夠讓界面的結構更加完整,精致。也希望每個設計師的作品都更加的美而精致。

看似簡單的喜馬拉雅FM主播等級體系,是如何做改版設計的?

濤濤

喜馬拉雅主播等級體系算是喜馬各業(yè)務線中資歷比較老的一員了,主要服務于主播用戶查看自身等級,以及特權享受,這次整理了近期關于主播等級線現存問題的改版。

一、產品背景

1. 產品層面

這次迭代的目的是:

  • 把流量分發(fā)的核心參考點「專輯質量分」作為主播等級主要評判標準之一。
  • 讓主播能夠清楚的認知自己在平臺的地位/影響力。
  • 給主播升級目標,促進升級。

通過溝通我們知道產品希望通過這次迭代來引起用戶注意,增加主播用戶和產品之間的互動,而提升頁面日活以及次日留存。

2. 設計層面

設計師的基本出發(fā)點是需要設計出不低于競品且更加精致的稿件,能夠更加有效傳達品牌理念和視覺延展性,進而理解產品與競品之間的差異化,增強用戶認知。

3. 用戶層面

此次迭代需要考慮到主播用戶的教育成本和接受程度,能否讓用戶感受到產品的差異性,能否讓用戶在第一時間看到我們希望用戶關注的東西。

二、設計前期分析

通過溝通我們明確了產品需求點,接下來需要針對需求進行分析,我們從競品視覺分析、設計關鍵詞提煉兩點來進行設計決策。

1. 視覺競品分析

針對性的通過對 VIP、等級等屬性的頁面進行視覺收集。

2. 設計關鍵詞提煉

主播等級頁面的服務理念是為主播用戶提供更加清晰的等級提升指引。區(qū)別于喜馬其他等級線,整個流程中除了滿足等級查看的基本需求和特權展示的標準化流程,更多的差異是對目標用戶需求的洞察和挖掘,我們從目標用戶需求定義了主播等級線設計差異化的關鍵詞。

三、設計執(zhí)行

通過與產品溝通需求點,我們了解到視覺層面需要滿足或改進的內容;通過視覺競品分析我們獲取產品未來的設計趨勢以及具有前瞻性的設計概念;接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進行重新分組,分析所有層級信息字段的屬性,然后整理出不可變動信息、可變動信息、可增加的信息、可變的布局樣式,不斷嘗試重組信息結構,找出合適的視覺決策點。

針對設計稿件,開展設計內部視覺評審,針對視覺稿件還邀請了產品以及交互進行意見收集,最終選擇方案一作為主播等級迭代方案。

四、業(yè)務線視覺延展

在主頁面色彩偏好、功能布局定稿之后,為了在關鍵轉化點給用戶帶來統(tǒng)一有趣的視覺體驗,以主頁面視覺為參考以動效、ICON、插畫三個維度進行設計延展,保證與競品的品牌差異性以及設計的統(tǒng)一性。

1. 特權ICON

為了達到設計稿件色彩傾向、品牌差異設計貫穿用戶每一個關鍵轉化點保持特權 ICON 視覺語言統(tǒng)一,并增加趣味性拉開與競品的差異,提升用戶點擊轉化率。

2. 插畫延伸

針對產品等級攻略個性化需求的訴求點,圍繞等級提升的不同要求繪制場景化插畫,并保持視覺層面的輸出配套,通過十字交叉分析有針對性的進行精準推送。

3. 動效延伸

圍繞溫暖、成就感兩個關鍵進行延展,在用戶點擊等級主頁入口的第一時間感受到等級提升的成就感以及統(tǒng)一色彩傾向帶來的重視感,通過特權展示達到所見即所得的直觀感受。

結語

設計并非一念間的靈感迸發(fā),設計師對整個業(yè)務需要有清晰的理解,明白產品定位并通過前期設計分析奠定設計理念而進行設計產出。

設計是一個逐漸嶄露頭角的過程,而我理解的設計師則應該是快樂的戰(zhàn)士而不是輕言放棄的賭徒,還是那句話:每個人都有屬于自己的一片森林。一點工作總結希望對大家有多裨益,同時歡迎各位大佬加入喜馬拉雅FM。

如何成為有交互和視覺思維的UI 設計師?

濤濤

UI 在拿到產品原型時該如何思考?如何著手設計界面?最近跟一些設計師朋友交流 UI 設計方案,總結了一下在方案優(yōu)化的思考過程,在這里分享給大家。

一、兩道思維

很多 UI 拿到一個頁面原型的時候,就立馬打開各大設計網站找參考,然后照著參考頁面上的效果,生搬硬套到原型上,這只是達到了單純美化頁面的效果。
那么拿到原型后應該帶著怎樣的思維來進行思考呢?

第一道思維:交互思維

先了解頁面實現什么功能,功能的交互操作流程是怎樣的,也就是說用戶操作這個頁面上的功能時,用戶的行為路徑是怎樣的。

第二道思維:視覺思維

了解完功能、交互后,提取原型中視覺組成元素,細分歸類,每一類應用統(tǒng)一性原則進行設計。

然后交互與視覺一同結合來設計界面。

二、思維應用

結合案例我們來看下兩道思維是如何進行的。

第一道思維:交互思維

了解功能交互流程。

根據實例原型分析出用戶行為路徑:

用戶行為路徑:

注意點:

  • 用戶行為路徑的獲取,一定要跟產品經理、交互設計師進行溝通確認清楚。
  • 用戶行為路徑某些步驟中,也有先后之分,比如第1步中,用戶輸入了賬戶地址后,才會有賬戶的相關數據顯示。
  • 用戶行為路徑可以支撐信息內容進行歸類分組。
第二道思維:視覺思維

提取視覺組成元素。

視覺元素:

注意點:

  • 提取視覺組件元素盡量詳細歸類。
  • 如有視覺規(guī)范,視覺組件元素風格應用請遵循視覺規(guī)范。
  • 如無視覺規(guī)范,同類視覺組件元素應用統(tǒng)一性原則進行設計。

三、檢驗方案

我們帶著兩道思維來檢驗一下這位設計師輸出的方案:

問題1:交互層級

問題所在:

數據顯示在前,輸入在后,交互操作層級有點混亂。

問題截圖:

問題解決:

用戶行為路徑中,第1步有個先后順序,先輸入地址,后顯示數據,在進行信息內容布局設計的時候同樣需要有先后順序,所以交互操作層級一定程度上影響著布局排版。

問題2:步驟關聯(lián)

問題所在:

「批量轉賬」按鈕歸類到了第1步的信息模塊中,交互操作邏輯有點不通暢。

問題截圖:

解決方案:

用戶行為路徑中,用戶核心費用信息后,最有可能的行為就是點擊「批量轉賬」按鈕,所以「批量轉賬」按鈕與轉賬費用信息的操作關聯(lián)性比較大,應該在同一模塊里會更符合交互操作邏輯。

問題3:顏色應用

問題所在:

主色、點綴色、輔助色各自的應用范圍沒有規(guī)則,顏色應用混亂。

問題截圖:

問題解決:

一個頁面或者項目中,各種顏色的應用范圍需要有一定規(guī)范,文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應的使用規(guī)則。

問題4:輸入控件

問題所在:

輸入類組件樣式存在多樣性,同樣是輸入框,有多種樣式,會造成用戶交互操作上的認知有誤。

問題截圖:

問題解決:

一個頁面或者項目中,輸入類組件樣式應用統(tǒng)一性原則,保持視覺風格一致,從而減少用戶操作認知偏差。

問題5:按鈕樣式

問題所在:

按鈕樣式應用到不具備按鈕點擊屬性的對象上,用戶會認為也是可點擊,會造成用戶交互操作上的認知有誤。

問題截圖:

問題解決:

一個頁面或者項目中,不具備按鈕點擊屬性的元素盡量不要套用按鈕樣式,減少用戶操作認知偏差。

舉個例子:人形的稻草套上人的衣服,成功了欺騙了人們,造成了認知偏差。

問題6:信息展示

問題所在:

同類信息內容的展示存在多樣式,傳達過程中加重了用戶的認知負擔。

問題截圖:

問題解決:

一個頁面或者項目中,同類信息內容的展示應用相似性原則保持視覺風格一致,因為相似性的布局可以更加地傳達信息。

舉個例子:電商頁面,金額信息展示;理財頁面,收益信息的展示;都是應用相似性的布局,即統(tǒng)一又地傳達信息。

問題7:圖標風格

問題所在:

圖標風格不一致,圖形反白風格,立體風格,線性風格。

問題截圖:

問題解決:

根據產品的特性,建議統(tǒng)一的圖標風格,選擇線性、面性、漸變、立體等風格。

問題八:對齊間隔

問題所在:

頁面元素的對齊、間隔沒有規(guī)律,整體視覺顯得松散,不嚴謹。

問題截圖:

問題解決:

可以利用柵格系統(tǒng),把頁面信息內容規(guī)整起來。

四、優(yōu)化方案

根據發(fā)現的問題,我們來看一下優(yōu)化后的設計方案:

優(yōu)化1:交互路徑

根據用戶行為路徑,將相關聯(lián)的信息歸類到一個模塊,每個步驟劃分到一個模塊,相關聯(lián)的步驟合并到一個模塊,模塊內完成各自的操作展示任務,模塊之間信息內容互不干擾,但從結構布局又能夠形成符合交互操作邏輯。

優(yōu)化2:顏色規(guī)范

規(guī)范顏色,配色的方法在這里不做深入討論,這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。

優(yōu)化3:輸入控件

對輸入類控件的樣式進行了統(tǒng)一,讓用戶從視覺上就能夠清楚地分辨出哪些是可以進行輸入操作的,從而減少用戶對交互操作上的認知成本,提高信息輸入效率。

輸入控件進行交互時,要有交互狀態(tài)反饋,默認狀態(tài)、選中狀態(tài)、錯誤狀態(tài)。視情況而定,可以增加鼠標移上狀態(tài)和不可輸入狀態(tài)。

狀態(tài)變化時的顏色應用,可以通過變換色相的透明度來保持色彩的一致性。

優(yōu)化4:按鈕規(guī)范

對按鈕進行了分類,分為常規(guī)按鈕、圖標按鈕、文字按鈕;對按鈕樣式用顏色進行了統(tǒng)一;按鈕要有交互狀態(tài)反饋,不可點擊狀態(tài)、可點擊狀態(tài)、鼠標移上狀態(tài)、鼠標按下。

狀態(tài)變化時的顏色應用,可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

優(yōu)化5:信息展示

對信息內容應用相似性原則進行了排版的統(tǒng)一處理,每個小類信息的標題與內容采用統(tǒng)一排版格式,然后重復應用,有助于提高信息獲取效率。

優(yōu)化6:圖標風格

這里的圖標應用于功能性圖標,統(tǒng)一采用線性圓角風格。功能性圖標需要注意圖標的形狀要能夠正確有效地傳達出功能的含義。

優(yōu)化7:對齊間隔

應用柵格系統(tǒng)對視覺元素之間的對齊、間隔進行調整,使頁面視覺更加嚴謹,頁面信息更容易閱讀。

五、總結

交互思維

了解頁面中的功能交互流程,梳理用戶操作行為路徑,可以對行為步驟中的信息內容進行歸類分組提供依據,最終有助于頁面信息內容的排版布局。

視覺思維

提取視覺組成元素,對顏色、文字、控件、圖標等每一類應用統(tǒng)一性原則進行規(guī)范設計,再通過視覺元素本身相互組合,最終應用回信息內容上,建立規(guī)范的視覺感。

設計一個頁面,交互思維和視覺思維是互相配合的,缺一不可,最終都是為了共同去構造符合交互操作邏輯、滿足視覺美感的界面。

UGD 模式

濤濤

一、什么是UGD?

大家都知道 UED(User Experience Design)用戶體驗設計團隊,主張「以用戶為中心的設計」,我們團隊的前身就是一個典型的 UED 團隊。那么什么是 UGD 呢?

UGD(User Growth Design)用戶增長設計,主張「以用戶為中心,以增長為導向」。

下面這個是我們團隊現在的 logo,這個圖形很清晰地描述了 UGD 的理念:在 UCD(以用戶為中心的設計)的基礎上增加一個向上的箭頭(增長),變形成了 G(Growth,代表增長)。也就是我們在原先以用戶為中心的基礎上,還要做到幫助業(yè)務增長。

「增長」的概念對很多人來說也許還比較陌生。事實上,這個概念早在2010年就有人在美國提出了,到了2015年才引入國內,最近兩年開始火爆。所以說它在國內其實也是一個比較新的概念。感興趣的朋友可以看看《增長黑客》相關書籍。

二、為什么我們要變成UGD?

為什么我們要從傳統(tǒng)的 UED 進化為充滿挑戰(zhàn)和不確定性的 UGD 呢?這要從天時、地利、人和三個方面說起。

1. 天時

先說說天時,大概2016年左右吧,中國互聯(lián)網逐漸進入下半場。關于下半場的話題這里不多說了,感興趣的同學可以上網搜搜相關的文章或者看一下我的新書《破繭成蝶2》(7月出版),里面有很詳細的討論。簡單的說,下半場的特點就是:人口紅利、流量紅利、資金紅利都在逐漸萎縮。原先你可以花錢買流量;或者通過好的 idea 拉來大筆投資;再或者通過打造的體驗迎來大量用戶。但這種「好時代」已經一去不復返了,如果沒有實質的增長,創(chuàng)意、體驗、流量都不能保證產品可以順利的活下去。

2017年3月底,美國又發(fā)生了一件大事:可口可樂,這家以營銷著稱的公司,宣布將取消設立了24年的首席營銷官(CMO)一職。全球市場營銷、客戶及商務領導、戰(zhàn)略被整合成一個職能,由新創(chuàng)立的職位 CGO(Chief Growth Officer,首席增長管)領導。第一任 CGO 將直接向可口可樂新任 CEO 匯報。

可能很多人不了解,CMO 的工作性質和 UED 其實有很多相似的地方。比如都是成本部門(當然市場部還要額外花錢);都熱衷包裝創(chuàng)意而非對業(yè)績的直接影響;都傾向于用定性的方式檢驗成果;都習慣通過經驗而非試驗來做決策……

很多企業(yè)主對此非常無奈,他們明明知道在營銷等方面的花費存在巨大的浪費,卻不知道浪費在哪里。隨著大數據時代的到來(2015年左右),人們越來越重視數據的作用,越來越能夠輕易的獲取、存儲數據,也越來越知道如何從數據中獲取價值。在這種情況下,原先很多崗位的傳統(tǒng)工作方式顯然太過于低效,所以 CMO 逐漸被 CGO 取代也就不足為奇了。

從 CMO 到 CGO,揭示了四個變化趨勢:

  • 從花錢到賺錢
  • 從定性到定量
  • 從創(chuàng)意到業(yè)績
  • 從經驗到試驗

誰能肯定 CMO 的今天不會成為 UED 的明天呢?當然,我認為 UGD 只是未來的一個發(fā)展趨勢之一,我想未來設計師還會有很多其它的發(fā)展方向等待我們深入探索。

2. 地利

雖然我換過幾次工作,但是有一點我從來沒變,就是一直在做和商業(yè)相關的產品(電商、To B、互聯(lián)網金融),所以我對業(yè)務、對數據更敏感一些。和同行交流的過程中我也發(fā)現一個明顯的現象:越是接觸商業(yè)產品的設計師,越重視數據量化。當然現在不僅是商業(yè)產品,所有類型產品的從業(yè)人員都需要有這個意識。比如做社交產品,也需要通過活躍度等指標來檢驗成果。

3. 人和

設計團隊的地位其實普遍是比較尷尬的,因為你很難證明對產品、對企業(yè)的價值。以前設計師還可以靠特立獨行來贏得一些關注,但現在隨著時代的變化,設計和業(yè)務綁定的趨勢越來越明顯。與此同時,大部分設計師卻還沒有做好相應的準備,不知道該如何幫助業(yè)務增長。

雖然支持團隊很難成為核心團隊,但我們依然可以通過改變自己,努力離核心部分近一點,更近一點。

三、UGD服務于用戶還是業(yè)務?

看了前面的分析,可能有人會感覺迷茫:設計師到底應該服務于業(yè)務還是用戶呢?

傳統(tǒng)思維認為,設計師應該為用戶、為體驗負責。實際上,體驗與業(yè)務并不沖突。通過一年多的試驗,我們發(fā)現能帶動業(yè)務數據提升的設計方案,質量都比原始方案要好。通過無數次的試驗結果總結規(guī)律,設計師的進步非???,也非常大。

所以我們團隊的價值主張一直都是:以用戶為中心,以增長為導向!

四、如何從UED轉型成UGD?

很多設計師認為自己不太可能幫助業(yè)務有實質性的提升。其實設計的商業(yè)潛力是巨大的,只是還尚未被充分發(fā)揮出來。通過出眾的造型和外觀擊敗競爭對手、銷量大幅提升的案例不勝枚舉。所以我堅信設計師在這方面的空間非常大。

當然要成為 UGD 并不是通過輸出美觀的產出物就可以做到。UGD 必須致力于通過設計思維及專業(yè)技能,用最小成本為產品/企業(yè)創(chuàng)造最大價值。我們團隊在這方面已經摸索了一年多的時間,現在還在繼續(xù)探索中。

和 UED 相比,我認為 UGD 最重要的差別在于:

  • 更懂行業(yè):行業(yè)間差異
  • 更懂用戶:用戶群體差異
  • 更懂數據:業(yè)務數據分析
  • 更懂增長:投入產出比

前三項相信大部分設計師已經開始意識到了,而第四項,也是最重要的一項,很容易成為設計師的軟肋。因為設計師太習慣于追求完美、「憋大招」了,他們很少考慮如何用較小的成本創(chuàng)造更大的價值。實際上,設計師縝密的思維、優(yōu)質的創(chuàng)意如果能和精益思維、增長思維結合起來,將產生驚人的效果!

當然說來容易做來難,我們在長期的實踐過程中經歷了很多失敗和挫折,感謝公司的無限包容,使得我們最終能夠沉淀出一套嚴謹的「增長體系」作為理論支撐,并不斷帶給業(yè)務方驚喜。

UI中國10周年海報

濤濤

祝賀UI中國十周年快樂,感謝UI中國對我一直的支持,最近也很忙,抽空做了個海報表示祝賀吧,比較菜,做得不是很好請擔待,謝謝大家!

請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖

多倫多訂餐APP-懶洋洋

濤濤

懶洋洋是一款為多倫多華人提供服務的訂餐平臺用戶群一般為學生、白領等對于視覺上追求簡約、舒適產品流程簡易而順暢(英文是用翻譯軟件翻的,如有錯誤,那就算了吧)

請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖請登錄并驗證郵箱后查看原圖

如何系統(tǒng)學習功能圖標?來看資深設計師的全面總結!

濤濤

一、圖標的定義

1. 什么是圖標

圖標是具有明確指代含義的計算機圖形。從功能分類角度分為啟動圖標、應用圖標、功能圖標。

2. 什么是功能圖標

功能圖標是具有指代意義且具有功能標識的圖形,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。

二、圖標的種類

  • 具象圖標:保持事物本來固有形態(tài)進行優(yōu)化設計。如汽車,輪船,飛機,車票……
  • 抽象圖標:不是一個具體的事物,更趨于概念化。如個人中心,空間,模式,最近等。

三、圖標的風格

1. 面性圖標

面性圖標是由一根封閉的線造成了面,面性圖標同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標具有穩(wěn)重、剛毅的男性化特征;曲面具有動態(tài)、柔和的女性化特征。

不透明度圖標

不透明度圖標是通過調節(jié)圖標的部分面性結構來增加層次感,從配色角度屬于同色系。

△ NO-921

光影圖標

三大面五大調,通過調節(jié)面的反光和陰影來增加面性圖標的紋理。在扁平時代的今天保留著微擬物風。

多彩色圖標

多彩色給人很酷炫的感覺,從明度角度還是要提取深淺的顏色來代表圖標的黑白灰。

△ Kyle Anthony Miller

2. 線性圖標

線性圖標是通過粗細一致的線條繪制,高度概括出來的圖標,既能讓人賞心悅目,又給用戶帶來創(chuàng)造和應用的樂趣。

圓角圖標

圓角圖標給人以親和力,也有柔軟,軟弱的一面。在圖標設計越來越精美的今天,圓角圖標的應用行業(yè)已經越來越廣泛。比如女性,母嬰,兒童,旅游……

△ Stephen Andrew Murrill

直角圖標

直角圖標給人以銳利,堅強,果斷,不拖泥帶水的一面。讓人眼前一亮的是魅族系統(tǒng)Flyme6 里面的圖標它就是用的直角,給人明快干凈的感覺。真正更好的詮釋它內在含義的非京東金融里的圖標了 ,投資理財的時候需要人們果斷作出判斷。理財有風險,投資需謹慎。直角的感覺讓人當機立斷,不拖泥帶水,快買快出。如果用圓角就感覺柔一點,感覺做事優(yōu)柔寡斷。所以一下子在金融領域被做成了標桿式的功能圖標。

斷點圖標

斷點圖標是點線面演化的一種產物。在最開始UI興起的時候,設計師們不滿足于單線條的功能圖標,通過點線面增加形式感。最早新浪體育運用到這一風格,算是還是很不錯的一種風格。很遺憾只留在了我的記憶力,網上并沒有找到之前的設計。

△ Catalin Mihut

高光式圖標

高光式圖標是傳統(tǒng)繪畫的產物,我們在傳統(tǒng)繪畫的時候往往最后一筆都是添加高光,起到畫龍點睛的效果。高光式的功能圖標采用里細外粗的規(guī)律,和斷點式功能圖標差不多一個年代的產物。在不斷扁平不斷簡潔的今天,也不會感覺那最后一筆也是多余的。

△ Udisk6353

不透明度圖標

不透明度圖標是調節(jié)圖標的部分結構的不透明度來增加圖標的層次。色彩上面跟雙色圖標是一樣的,只不過從配色角度屬于同色系的范疇。

△ Laura Reen

雙色圖標

雙色圖標在實際應用中非常廣泛,也是很百搭的那種。一種可以有彩色跟無彩色結合,有彩色的顏色可以是企業(yè)色,可以是代表行業(yè)或者產品的顏色跟無彩色黑色相結合。一種是主體色跟點綴色組合而成的雙色,但使用時要考慮到當前界面中的配色不宜過多,多了就容易花。

△ stay

線面結合圖標

線面結合圖標也是一種很出彩的風格,線是高度概括的圖標,這時候面更多的是充當裝飾點綴的作用。面的表現方式也有很多種,可以是單色的,漸變色的,也可以像 MBE風格那樣提取主體結構形成的面,也可以提取圖標里面有閉合路徑所形成的面。這種風格應用也非常廣泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

結構圖標

結構圖標算比較有爭議性的圖標,結構圖標是我們學繪畫的時候老師要我們起形,要開始繪畫結構,對基礎的三大面五大調有很好的理解?,F在結構圖標正好相反,比如對于一個具像圖標,我們要分析出它的每一筆每一畫,看清每一個結構,然后用固定的形式來表現出來。固定的形式可以像優(yōu)酷圖標的相交結構點,可以像上海瑪娜花園一筆一個顏色,等等。

一筆畫圖標

一筆畫圖標是難度系數比較高的一種風格,也是我非常喜歡的一種風格,當才開始流行斷點圖標的時候,錘子設計師歐陽念念就提出了一筆畫圖標的概念,當時也是有爭議的一種圖標。當網易云音樂也出了這種圖標后就更具有說服力。一般也很難駕馭,也基本都能做出來,但是視覺上看上去很舒服還是要有深厚的功底。

logo類圖標

logo 類圖標跟一筆畫算是同等級別難度的,需要圖標足夠精致到可以直接拿來當應用圖標,乃至于 logo。這種在app中屈指可數。最為經典的就當屬網易云音樂的 logo 了,其實它也屬于一筆畫圖標,同時又用做了 logo,它的含金量可想而知。

情感化圖標

情感化圖標是提取人的五官跟圖標相結合具有擬人化的圖標,這種擬人化的場景模仿人在真實場景的應用。QQ 的底部圖標通過五官方向大小移動變化很好的表現出當前場景。QQ 開了先河,相信后續(xù)會有很多情感化圖標出現,會有它的一席之地。

3. 如何轉換線性圖標與面性圖標?

線性的閉合路徑的圖形變面性圖標,閉合路徑里面的線條反白,重要的關聯(lián)結構線反白,讓面性圖標透氣;線性的不閉合路徑的圖形變面性圖標,應適當的增加線的粗度來達到視覺上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去創(chuàng)造新的圖標風格

繪畫結構+點線面+色彩,繪畫結構可以清晰的分析出事物的主體結構,勾勒出主體輪廓,對創(chuàng)造新的圖標風格有很大幫助。繪畫結構選的角度是人很熟知的角度,比如正面,盡量不要選擇帶有透視角度進行設計。點線面是設計的基礎,通過從點線面角度去構思會獲得更多的靈感。色彩方面可以是企業(yè)色、行業(yè)色、主題色、點綴色等等。(圖design by Ted-Kulakevich and Graphéine )

四、圖標的特性

1. 統(tǒng)一性

大小的統(tǒng)一

在網頁設計中圖標的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移動端iOS規(guī)范中在2倍圖下最適合人點擊的區(qū)域大小為48*48px,iOS功能圖標其他尺寸為48加或減4的倍數;安卓android 功能圖標其他尺寸為48加或減8的倍數。為什么 iOS 是4的倍數,一個數除以2倍圖在乘以3倍圖要是偶數最小的數為4;為什么安卓android 是8的倍數,安卓開發(fā)中最小的單位是1dp,1dp=2px,同時也要滿足一個數除以2倍圖在乘以3倍圖要是偶數最小的數為4,所以安卓要是8的倍數。在很多帶有色塊的圖標,不僅要保證色塊44*44pt的大小統(tǒng)一,也要保證里面色塊里面的功能圖標的大小統(tǒng)一。

風格的統(tǒng)一

風格上面已經歸納的很全了,直角圖標和圓角圖標基礎上可以添加一個其他風格,如雙色風格;但是剩余的其他風格最好就不要兩兩相加,不然就會給用戶感覺很容易亂,也不夠簡潔,主次不明。

規(guī)范的統(tǒng)一

視覺的規(guī)范

為什么我們再同樣的大小區(qū)域去繪制正方形、圓形、三角形,雖然符合了大小統(tǒng)一的特性,但是從視覺上還是不能看上去很均衡?這就需要我們規(guī)范化的去繪制圖標,安卓android 規(guī)范里給出了圖標的繪制方法。

圓角的規(guī)范

2. 簡潔性

簡潔性不單單體驗在圖標的簡潔,還要體現在從創(chuàng)意到實際落地的簡潔。在使用軟件 ai 或者 sketch 的時候繪制基礎圖形不要出現小數點和基數,多用偶數。

3. 層次明確

圖標具有可點擊性和標識性??牲c擊性就會有點擊前、點擊時、點擊后三種狀態(tài),主流底部標簽欄會在點擊前使用線性圖標,點擊時和點擊后使用面性圖標;也有使用顏色來區(qū)分。

4. 延展性

圖標的延展性之前在圖標的風格也講到,好的圖標可以直接當應用圖標或者 logo 來使用。同時好的圖標還可以通過點線面動效變化做下拉加載動畫。

五、如何學會合理的設計功能圖標?

1. 頭腦風暴

頭腦風暴看似一個不知道怎么解釋的詞,簡單的說就是多動腦子,越用越活。頭腦風暴不單單是這里用到,是所有設計師做設計之前必備工作。頭腦風暴完你會覺得你的設計思路會很寬,然后就是要合理的分析每個的可行度,完成的工作量,自己當前設計的水平是否可以有效完成。其實很多設計師能有效的搜索到自己想要的東西也算是頭腦風暴的一種,雖然你不會想出很多點子但還是很明確的知道自己想要什么,一定注意不要直接拿來主義,還是要通過平時的練習掌握更多的風格。為以后頭腦風暴想出的很多點子能很好的實踐出來。比如以旅游為主體進行頭腦風暴,這個就能想到很多很多。

2. 搜集資料

搜集資料的時候要很好的提取關鍵詞,直接從 iconutopia、iconfont、iconfinder、iconmonstr 搜索獲取靈感。具象的事物可以看看該事物好的品牌公司的產品,品牌公司的工業(yè)設計相對較好,對后面提取元素也會有很大的幫助。也可以通過提取好的關鍵詞,翻譯成英文,再到國外的網站追波、be搜上一搜看看。搜索到的素材和元素一定要再設計,不能拿來直接用。

3. 提取元素

提取元素又歸結到繪畫結構中去了,繪畫好的看到具象事物,心里默默打開一個燈,三大面五大調,光影關系都有了。不是很理解的還是多練習吧。具象圖標就是提取主要輪廓線,保留可要可不要的元素,到最后的時候做統(tǒng)一刪減;抽象圖標有時候確實沒有一點的思路的時候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找,找到了合適的還要進行 redesign。有想法后選擇一種圖標風格這樣的繪制效率會很快。

4. 規(guī)范化

上面元素提取好后,需要開始選擇一種圖標風格進行繪制。開始繪制的時候不要過于追求圖標的風格,還是要從圖標本身出發(fā)快速的繪制好。等全部繪制好了突然想換一種圖標風格也是很快的,水到渠成??赡軇傞_始很難在規(guī)范化的框框里直接就提取元素開始繪制,那就只能先繪制要你想要創(chuàng)意的元素圖標,全部畫好后在統(tǒng)一的規(guī)范里面再繪制一遍。規(guī)劃化的目的就是讓圖標統(tǒng)一,任何兩個圖標拿出來從視覺大小、風格都是一個統(tǒng)一的整體。

5. 加減法

一套圖標繪制好了之后還是在放在一起看一下整理的感覺,最后通過加減法適當的修修補補,對于視覺上看上去過于繁瑣的圖標要保留大輪廓的同時減少結構達到視覺平衡;對于確實很簡單但有沒辦法添加任何的東西元素來增加的為它做加法的時候是否可以放大,來增加它的視覺豐滿感。

用戶體驗是一種過程,而不是結果

濤濤

任何人都抵擋不了時間的力量,你可以斥責它的無情,也可以贊美它的給予,在這個成長的歷程中,我們尋找的不是時間給我們帶來了什么,而是這個過程中我經歷了什么。后者,才是我們需要深思并感恩的。

與「用戶體驗」一樣,許多人會評判一個產品用戶體驗的好與差。但是「好」與「差」只是整體上的一種結論,普通人可以說這兩個字。但作為設計師,必須懂得在體驗過程中,知曉哪里好與哪里差,更要知道為什么好為什么差。

就好像評書似的,真正讀過某本書的人,不會單純的說:「這本書太好/爛了」。他一定會有一種感悟,哪怕只是一句話。

既然是為了提升「用戶體驗」,就得與用戶一起進行體驗的走查,才能有根據的進行優(yōu)化。

一般我們會建立一種用戶體驗路徑,其目的是為了了解用戶的動機、關注點和需求點。所以為了提升用戶體驗,就必須邀請用戶參與體驗路徑的設計過程。

用戶在使用一款產品時,他們中的大多數只是為了完成某個任務,所以在這個過程中,也許用戶只使用了部分功能,也可能使用了所有功能。

因此,不要將體驗路徑的設計限制在特定的產品或功能服務上,要理解完整的用戶體驗路徑,針對性的進行走查,與用戶一起提升產品易用性。

一、讓用戶參與產品設計流程

真實的用戶體驗路徑需要通過不同用戶的參與互動,不管是一對一的討論或焦點小組,都需要大量的數據才能得出真實的結論。

任何沒有基于研究報告的嘗試、假設、數據,都將使它在很大程度上只是理論性的。所以我們一定要通過不同用戶的不同體驗結論,客觀的進行分析路徑中的哪一環(huán)可以繼續(xù)優(yōu)化。

與用戶的交流溝通是其中的關鍵,在用戶的幫助下,你很容易找到可提升的體驗點。

因為,用戶情緒的波動和心情的愉悅、滿足、懷疑、失望以及懊悔的表現是無法在報告中準確反映出來的,所以設計師要重視這些用戶反饋,包括這些互動的場景可以使設計師產生共鳴,通過同理心來設計并優(yōu)化功能。

然而,沒有任何產品或功能服務能夠滿足過程中的所有用戶需求,所以,要深入了解每一個階段出現的需求點,因為它們都會衍生出不同的因素,這使我們能夠理解產品如何更好的服務于用戶的生活。

同樣,沒有任何靈丹妙藥能積極地改變用戶體驗,而是通過與用戶的持續(xù)接觸。也許你會說很難進行與用戶直接的對話,所以你通過客服回訪、用戶反饋等方式收集信息也未嘗不可。

可能到這里你還沒有完全明白其中的道理,下面我舉個例子詳細說明。

二、拆解 – 用戶體驗之旅

讓我們來舉一個旅游平臺的例子,這個平臺是供于各種各樣的人和商務旅行者使用的,其中包括了航班、酒店、出租車租賃等在內的度假套餐。

為了讓各位深入了解體驗路徑,以及更好地了解我們的用戶,讓我們對旅行者的體驗路徑也做一個拆解。如下圖:

這個路徑將全面地了解用戶的想法、感受和行為,因為他們會經歷不同的階段,幫助填補我們路徑中的空白點,幫助我們更好的進行產品的設計。

1. 計劃旅行

在計劃旅行時,設計師認為用戶的想法是什么?

  • 目的:休息、假期、出差;
  • 目的地的候選名單,檢查距離和到達目的地的時間;
  • 出行方式選擇:飛機、火車、巴士、游輪、自駕;
  • 查看酒店位置與評論好壞;
  • 評估旅行成本(如航班、酒店等費用);
  • 可取消功能(如已訂的航班、酒店等)。

2. 用戶角度

通過與用戶的走查、回訪、反饋,可以幫助我們了解用戶內心真實的想法,幫助我們增強以及簡化用戶的體驗方式。

  • 在條件允許的情況下,提供盡可能多的價格;
  • 經常出差的人會為了飛機上的最佳座位而自愿增加費用;
  • 出來旅行的家庭想要知道目的地有哪些有趣的兒童活動;
  • 顯示符合用戶自定義預算的旅行套餐;
  • 幫助用戶估算旅行成本;
  • 給出評價信息,可供用戶評判(朋友、預訂平臺、Facebook等)。

3. 特殊情況

產品是否有處理特殊情況的功能?

  • 由于個人原因,推遲了旅行計劃;
  • 目的地天氣或其他情況不利。

我們是否可以幫助用戶更好地應對這些情況?通過及時提供有關目的地天氣狀況、備選旅行計劃或建議類似目的地的信息等。

那么通過第一個內容的拆解,我們就可以發(fā)現,這個點能做的功能就有很多。而且這些功能還能排列優(yōu)先級,設計師能主動進行推進,提升設計師自身的價值。功能走查的重要性相信各位也看出來了。下面繼續(xù)。

1. 完成預訂

是時候確定目的地、日期、旅行方式和停留地點了。(依然是設計師角度)

  • 設計有序、直觀的預訂體驗;
  • 安全流暢的付款流程,包括多種支付渠道的選擇;
  • 旅行模式的確認細節(jié),包括駕駛方向和幫助熱線電話號碼;
  • 酒店確認:房間詳情和熱線電話。

2. 用戶角度

  • 直接能從航空公司/酒店確認信息,這樣會比旅行社確認更具價值;
  • 目的地指南(視頻、天氣、穿著、提示、要做的事情、文化等);
  • 建議的旅行路線;
  • 緊急求助熱線(如果客戶在預訂過程中撥打電話,呼叫應該能及時取得聯(lián)系)。

3. 特殊情況

  • 預訂未確認,付款已處理。

1. 出行與酒店

設計師考慮的用戶需求。

  • 舒暢的旅行體驗(飛行準時等);
  • 入住酒店,快速辦理手續(xù);
  • 干凈,方便,光線充足的房間(特別是床,洗手間);
  • 體驗當地的美食和文化;
  • WiFi 覆蓋;
  • 干凈整潔的出租車等交通工具;
  • 與家人和朋友實時分享照片;
  • 合理的分配時間。

2. 用戶角度

  • 主動跟蹤用戶的行程,確保一切順利(發(fā)送提醒,與酒店確認);
  • 目的地指南(事件、當地交通、天氣、衣服、提示、要做的事情等);
  • 當地餐廳/購物券/優(yōu)惠等。

3. 特殊情況

  • 航班延誤或取消;
  • 緊急的醫(yī)療情況;
  • 信用卡透支。

1. 旅程與歸來

旅途中的回憶和收獲。

  • 在臉書/ Instagram / Twitter / WhatsApp 上共享更新和照片;
  • 與家人和朋友分享經驗;
  • 回憶當地的美食;
  • 經驗與旅游前的期望不相符,過度炒作;
  • 航班和酒店服務;
  • 評論旅程的整體情況。

2. 用戶角度

  • 提醒攜帶基本藥物;
  • 幫助預支旅行預算;
  • 關于外匯轉換;
  • 當地醫(yī)療建議、

3. 特殊情況

  • 剩下的錢如何兌換;(如國外游)
  • 退款;
  • 行李丟失。

通過以上的拆解說明,可見體驗路徑對于功能設計的重要性,各位設計師一定不要主觀認為「你就是用戶」,而是結合用戶需求進行分析,設計出更合理的功能。

小結

設計師要不斷完善用戶的體驗路徑模式,因為它會一直發(fā)展,將產品優(yōu)化的越來越好,而不僅僅是停留在:「這個產品我做完了」的想法上。

所以為什么說用戶體驗是一種過程?因為它始終在不斷變化,所以作為設計師也要持續(xù)的自我增值,才能跟上產品迭代、時代發(fā)展的步伐。

用戶體驗是一種過程,而不是結果

日歷

鏈接

個人資料

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

存檔