六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

首頁

在iPhone的UI設計背后,是一場關于注意力的戰(zhàn)爭 2018/09/06in 設計文章 & 教程評論區(qū)

資深UI設計者

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

iPhone 誕生之后,世界發(fā)生的變化是翻天覆地的。以電容觸摸屏為交互中心的智能手機以難以想象的速度,成為了人類生活中不可分割的部分,人與人之間的連接因此而更加緊密,同時也更加疏遠。從某種意義上來說,iPhone 的創(chuàng)造是開創(chuàng)性的,也是不可替代的。而我們也不約而同地發(fā)現(xiàn),以iPhone 為標竿而創(chuàng)造的智能手機和數(shù)字化的交互界面,讓我們處于一個時刻都會被分心的境地。

令人上癮的數(shù)字內(nèi)容,讓我們一刻都離不開智能手機,從某種意義上,它徹底改變了我們的生活,工作,甚至思考的方式?,F(xiàn)如今,越來越多的人開始嘗試戒除令人上癮的智能手機,尋找更加健康自由的人機關系。根據(jù)今天的調(diào)研,過度使用智能手機,確實會有一定機率帶來心理健康的問題。從 iPhone 誕生之初,直到10年后的現(xiàn)在,在數(shù)字產(chǎn)品上癮和用戶注意力的控制這件事情上,開發(fā)團隊本身就沒有放松過。這次,F(xiàn)ast Company 專訪了前蘋果設計師 Imran Chaudhri。

Imran Chaudhri 早在 1995 年就加入了蘋果公司,并且很快就出任了公司的人機交互界面組的設計總監(jiān),在2006年前后,他也是作為 iPhone 項目核心的6人團的一員,加入到項目當中來。

待在蘋果的20多年時間里,他參與了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等幾乎全部主要產(chǎn)品的用戶界面的設計,直到他開始追求創(chuàng)造屬于自己的公司和事業(yè),才正式從蘋果離職。也正是因為這樣的契機,才使得 Fast Company 有機會能和他面對面地一起聊一聊他的過去,以及他留給蘋果的那些遺產(chǎn)。

和許多設計師一樣,他們對于產(chǎn)品的想法和企業(yè)的定位或多或少有一些錯位。和蘋果產(chǎn)品相關的很多信息,他現(xiàn)在依然還不能透露,但是他依然提到了很重要的事情:即使是在iPhone的原型設計階段,他就已經(jīng)意識到了,這款產(chǎn)品最大的缺陷之一,就是它注定會分散甚至壟斷用戶的注意力。而與此同時,蘋果也有意識的沒有給予用戶,對于iPhone 完全的控制權。下面,是訪談中能夠?qū)ν夤嫉膸讉€重要的內(nèi)容摘錄:

設計「請勿打擾」的功能

「我認為,從某種意義上來說,真正洞悉設計的設計師,大都能夠預見到手機對于注意力的影響。在使用手機的時候,我們總會碰到被各種各樣的信息和通知打擾到。」

「早些時候,當我剛剛開始制作 iPhone 的原型之時,管束還不是那么多,我們當中有幾個人還有幸把原型機帶回家,這樣就可以每天工作生活都使用它。那個時候我全世界各地的朋友都和我保持著聯(lián)系,iPhone 幾乎隔一會兒就會亮一下,顯示有新消息,叮叮咚咚響個不停,于是我意識到,和我們朝夕相處的手機需要一個管控功能。所以,在很早的階段,我就開始設計請勿打擾這個功能了?!?

對于誰來掌控手機設備這個事,蘋果的內(nèi)部產(chǎn)生了分歧

「其實,在蘋果公司內(nèi)部,想要大家都理解分心是一個影響用戶生活的問題,還挺難的。喬布斯倒是很能理解的,但是公司內(nèi)其他的同事,對于用戶對于手機的控制權多少,其實大家還存在不少爭議。我和一部分同事倡議給用戶更多的掌控權,不過這個事情對產(chǎn)品的營銷和市場運作是有影響的。所以,當時內(nèi)部也有聲音說,如果真的給用戶太多的控制權,那么這款手機就不酷了。」

「其實直到今天,iPhone 當中絕大多數(shù)的功能都是可控的,但是其中很多功能隱藏的比較深,徹底的掌控它們是比較困難的,如果你真得想讓那些整天都在轟炸你的信息徹底遠離,你需要花費很長的時間來摸索,用獨特的方式逐個調(diào)整或者關閉才行。因此,對于那些熟練使用iPhone 的重度用戶而言,確實是可以如臂使指地掌控這臺設備,但是對于更換壁紙都不太會的用戶,想要搞清楚iPhone ,讓它如意隨心,真的是難如登天。他們沒有這樣的控制能力?!?

關于 iPhone 是否有可能更智能地預測通知

「你可能會在一個下午安裝十幾個不同的新應用,然后你不停地會收到提醒和通知,是否要授權使用相機,是否要授權獲取你的位置,是否允許它給你發(fā)送通知,每個都要做決定。稍后,你可能會發(fā)現(xiàn),F(xiàn)acebook 一直在后臺給你推送信息。再之后你就會發(fā)現(xiàn)你有睡眠障礙了,總會有信息大半夜地推送到你的眼前,讓你無法安生地休息。實際上,借助請勿打擾的功能,你可以一早上再查看它們。這套系統(tǒng)足夠智能,能夠判斷出哪些應用之前就已經(jīng)獲得了許可,哪些仍然在后臺獲取數(shù)據(jù),哪些通知實際上你并不關心。所以,這套系統(tǒng)其實是會選擇更加恰當?shù)臅r機和正確的方式來建立用戶和手機之間的對話和關系,手機會詢問用戶,你真的需要這些通知嗎?或者是,你真的需要Facebook 使用你的電話簿的信息嗎(因為你已經(jīng)很久沒有登錄了)?等等。正確地設計了這套系統(tǒng)之后,提醒用戶的方式也非常的多?!?

為什么蘋果最后還是開始關注分心這個事情?

「iOS 12 中內(nèi)置的這套防干擾的控制系統(tǒng)可以更加系統(tǒng)地監(jiān)控手機各方面的功能和用量,它實際上是從iOS 6 時代的請勿打擾的功能拓展而來的。但是它在現(xiàn)在被推出來真正的原因是有太多的用戶為此而抱怨,而媒體和用戶都發(fā)文吐槽,在呼聲和壓力之下,它們最終在iOS 12 中呈現(xiàn)了出來。這個局面之下,蘋果沒有選擇的余地,必須對于輿論有回應。這對于每個人都是好事,因為用戶和他們的孩子都因此能夠獲得更好的產(chǎn)品。但是這是否是最好的產(chǎn)品?當然算不上,因為現(xiàn)在的iOS系統(tǒng)是為了應對輿論和負面新聞而設計的,設計的意圖并不對。如果是蘋果主動作出這樣的決策,才算得上是好產(chǎn)品?!?

「對于蘋果這種體量的大公司而言,產(chǎn)品設計其實復雜性非常的高。真的是這樣。作為設計師,你需要服務于你的用戶,你還得和公司的利益保持一致,同時,還需要對得起自己的底線和道德。服務于一個大型的企業(yè),確實非常的難做抉擇。對于用戶而言,可以很輕松的直接懟蘋果,說它沒有做對的事情。但是身為其中的設計師,要平衡各方面的需求也壓力,經(jīng)常會進退維谷。有些用戶因為iPhone 的一些功能,受到了負面的影響,有些人受到的影響比另一部分人更多。但是身為設計師,一個受到各方面制衡的設計師,即使是作出了改變,在很多時候也遠遠不夠。至少在我看來,現(xiàn)在的改變還不夠大?!?

管理數(shù)字化的生活,就像管理健康一樣重要

「我和數(shù)字設備之間的關系非常簡單。我不希望被它所控制。從使用 iPhone 的第一天起,我就用著黑色的壁紙。我不會將一大堆的東西塞進手機,減少被分心的可能性。我的手機第一屏上的應用程序非常少?!?

「我的意思并不是說這樣做很重要,或者說我推薦這么做,對于人和手機之間的關系,每個人都不一樣,處理方式也都很個人。對于如何處理自己和手機之間的關系,有人讓我提一些建議,我覺得沒有必要,因為我的辦法并不適合所有人。一天喝多少咖啡,抽幾包煙,每個人的情況都不一樣,沒法一概而論。不過,心理健康是一件大事,你和你的智能設備之間,應該保持著平等的關系。這至少是一個大的設計趨勢,是設計師需要關注的焦點。就像可持續(xù)性發(fā)展已經(jīng)成為時代的主流訴求一樣,你無法忽視認知壓力的存在,認知設計也勢在必行。」

界面設計的未來,以及不可避免的問題

「我觀察到,界面設計在很自然地進化和發(fā)展著,從按鈕到旋鈕,從點擊到手勢操作,從語音交互到情感化設計,均是如此。無論是考慮到用戶的情感訴求,還是進入語音交互的領域,都一定會遭遇一大堆的問題。按鈕和旋鈕的設計是需要考慮到人體工程學的問題,點擊和手勢的交互則牽涉到更具體的壓感和硬件上問題。任何人和機器之間的交互,都一定都會遭遇不自然的狀況和問題,就這么簡單。身為設計師,需要足夠的預見性,才能真正領先于用戶,預測到可能會遭遇的問題。」

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

 

比起設計和開發(fā)流程的選擇,還有幾個事情更重要

資深UI設計者



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


在 Sarah 給 Jimmy 講完了她在設計上的一些原則之后,Jimmy 就準備開始重新設計那個客戶等著要的新的儀表盤界面了。與此同時,他所在的公司 Shmuckle 準備設置一個新的產(chǎn)品經(jīng)理的職位,并且將會在公司內(nèi)部選擇合適的人員來任職。Jimmy 對此非常有興趣,實際上,在當前的架構(gòu)下, Jimmy 是一個非常合適的候選人。但是要擔任這個職位,他必須證明自己能夠勝任這個職位,證明自己知道如何管理項目和團隊。

對于他正在做的這個控制面板的設計項目,他也正在挑選合適的產(chǎn)出流程。用敏捷(Agile)開發(fā)流程更好,還是應該用瀑布模型(Waterfall Model)?又或者是循環(huán)式開發(fā)流程?他覺得跟開發(fā)部的同事聊一聊會是更好的選擇。

當他找到工程部的 Boris 的時候,他正在樓道里刷推特摸魚。「用什么流程?那還用問,當然是敏捷啦。這個最好,過程清晰簡單,現(xiàn)在沒有什么辦法比敏捷更好處理各種數(shù)字產(chǎn)品的設計和開發(fā)啦。」接著,Boris 去隔壁會議室拖出一個白板,并且說道:「給我一個小時,我告訴你關于敏捷開發(fā)的一切。接著還能捎帶計劃一下每周的工作內(nèi)容,這樣你就能完全明白要干啥了。哦,差點忘了,還有幾個播客和視頻可以幫你更加深入地了解敏捷?!?

敏捷開發(fā)以用戶的需求進化為核心,采用迭代、循序漸進的方法進行軟件開發(fā)。在敏捷開發(fā)中,軟件項目在構(gòu)建初期被切分成多個子項目,各個子項目的成果都經(jīng)過測試,具備可視、可集成和可運行使用的特征。換言之,就是把一個大項目分為多個相互聯(lián)系,但也可獨立運行的小項目,并分別完成,在此過程中軟件一直處于可使用狀態(tài)。

絮絮叨叨的 Boris 終于找到一個傾訴的對象,Jimmy 一時之間感到頗為尷尬,不知道如何回應。好在這個時候,開發(fā)部另外一個部門的 Floris 從門口路過,Jimmy 趕緊喊住他「Floris 我到處在找你,你怎么在這兒啊」說著就拉住 Floris 的手,竄進了另外一個辦公室,遠離了熱情的 Boris。

「干啥?你倆在聊啥?」

「Boris在跟我說敏捷開發(fā)……」

「啥玩意兒?他跟你講敏捷開發(fā)?快拉倒吧,他們部門里面唯一敏捷的就手頭上的 Macbook。我們這邊都用瀑布模型來作為產(chǎn)品開發(fā)的流程,因為它是線性的,有著更簡單的結(jié)構(gòu),操作起來也簡單,很少會發(fā)生混亂。」說著,F(xiàn)loris 從辦公室的書架上摸出一堆文檔壓到 Jimmy 手上?!改阋臇|西都在里面,祝你好運。如果你需要任何幫助,請在公共的平臺上跟我約時間,我們可以開個小會解決一下問題~」說著 Floris 回到自己的桌子邊,開始繼續(xù)干活兒。

瀑布模型(Waterfall Model) 是一個項目開發(fā)架構(gòu),開發(fā)過程是通過設計一系列階段順序展開的,從系統(tǒng)需求分析開始直到產(chǎn)品發(fā)布和維護,每個階段都會產(chǎn)生循環(huán)反饋,因此,如果有信息未被覆蓋或者發(fā)現(xiàn)了問題,那么最好「返回」上一個階段并進行適當?shù)男薷?,項目開發(fā)進程從一個階段「流動」到下一個階段,這也是瀑布模型名稱的由來。包括軟件工程開發(fā)、企業(yè)項目開發(fā)、產(chǎn)品生產(chǎn)以及市場銷售等構(gòu)造瀑布模型。

拿著一堆資料,回到自己的工位前,整個人都要陷入到怠惰的情緒里面,癱坐在電腦椅上糾結(jié)了起來。信息太多了,不知道從何做起。在網(wǎng)上一搜也是成堆的內(nèi)容,根本不知道從何入手。懵逼了。

Jimmy 決定采用最終的備用方案——萬事不決問 Sarah。在 Jimmy 的工作經(jīng)驗當中,老領導 Sarah 總能給他靠譜的建議和可行的方案。

出問題的時候,先后退一步

Sarah 辦公室的門從來都是敞開的。當 Jimmy 來找她的時候,Sarah 正在閱讀一些有意思的東西。她的辦公室里面有很多的書和綠植,漂亮的色彩讓 Sarah 的整個工作區(qū)域仿佛能夠喚起人的創(chuàng)造力和想象力,桌上打開的書頁散發(fā)著油墨的味道,聞起來讓人很有安全感,像家里的書房?!窰ey,Sarah,我又有問題來麻煩你啦,你有空么?」

「我的門永遠敞開著。這次有啥問題,看看我能怎么幫到你?!筍arah 聽到聲音就知道是誰,一邊放下手頭的文檔,一邊抬頭笑著看到略顯局促的 Jimmy 。說話間,Jimmy 非常熟悉地跑到辦公桌另外一邊的椅子上癱坐下來,Sarah 笑著搖頭,拿起咖啡壺給 Jimmy 倒上一杯咖啡。

回到自己椅子上的 Sarah 沒有看自己的電腦,而是像心理咨詢師一樣,盯著 JImmy ,進入了等他傾訴的狀態(tài)。而 Jimmy 此刻也驚訝于 Sarah 如此灑脫迅速地放下手頭的工作,并專注地幫助自己,于是也不再放飛地癱坐著,直起腰身,開始認真地陳述自己的問題:

「實際上,你之前跟我說的設計原則,讓我獲益匪淺。我按照你告訴我的方法,找到了癥結(jié),解決了問題。但是我現(xiàn)在不僅僅是要設計這個儀表盤界面,我需要開發(fā)和實現(xiàn)。有人說敏捷開發(fā)比較好,有人說瀑布模型很給力,這些開發(fā)方式到底有啥差別,優(yōu)勢具體在哪我并沒有搞清楚。有人說我需要的是敏捷開發(fā)里面 Scrum,還有人說,它實際上是 shmum,也有人稱之為 Bshmum,結(jié)果還有朋友告訴我說 Google 的 Design Sprint 才能幫我解決問題。我感覺腦子快要炸了。所以……Sarah 你明白么,我需要幫助了。 」

聽到 Jimmy 說到后面,Sarah 就明白了他碰到什么問題了?!窲immy,沒事兒,我們總會在某些時候碰到問題,別人的指導總會派上用場?!?

「我可以理解,如果在網(wǎng)上搜索這些相關的信息,會有太多雜亂的內(nèi)容讓你感到信息過載。幸運的是,如果你理解這些東西背后的基本原理,就可以相對輕松地梳理清楚所有的內(nèi)容了。」

「早知道我應該一開始就來找 Sarah 問問。」Jimmy 不由得對自己抱怨了一句。說著,他在摸起咖啡杯旁邊的紙和筆,準備做筆記,就像上次那樣。Sarah 看穿了他的小心思,笑道:「不用記?!拐f著,喝了一口咖啡,然后繼續(xù)道:「先想想看,我們?yōu)槭裁磿忻艚?、瀑布模型、沖刺模型,為什么要用循環(huán)工作法呢?」

「為了?」Jimmy 下意識撓頭。

「是的,但也不完全是這樣??偟膩碚f,我們需要一個過程來呈現(xiàn)產(chǎn)品,因為人類的思維是沒有辦法直接掌控混亂的事物。此外,一個清晰的、可遵循可記錄的流程,能夠確保你在完成后,確保產(chǎn)品的整個開發(fā)過程是可交付的,細節(jié)也是可回溯的。這就是為什么,我們需要這些流程?!?

「最首要的問題,不是選擇哪個流程,而是要了解這些流程為什么而存在,以及我們可能會碰到什么樣的問題。無論你選擇哪一個。」Sarah 看了一眼窗外,繼續(xù)說道:「你有問過公司的其他的同事,他們都遵循什么樣的流程么?」Sarah 問道。

「問過了,絕大多數(shù)都采用的敏捷和瀑布模型?!笿immy 說到。

承諾是關鍵

「首先要告訴你的是,兩種方法都很棒。但是絕大多數(shù)的公司只會在兩種方法當中選擇一種。因此,當人們采用敏捷或者瀑布的時候,我們更多看到的是他們所做的設計或者開發(fā)的小沖刺。以往,我們會看到團隊會在3個月或者半年這樣的時間尺度當中,一直保持著高強度沖刺的狀態(tài)的。在旁觀者眼中,會看到一個清晰的故事,或者說整個產(chǎn)品逐漸設計或者開發(fā)出來的景象。如今流行的做法是將沖刺劃分為很多不同的階段,這也是為什么如今被稱為小沖刺。不過本質(zhì)上,做的事情和內(nèi)容并沒有改變?!?

「另外,很多人會使用敏捷的方法來做項目,過程中會不斷的迭代修改。他們希望通過這樣的方法來獲得更好的結(jié)果。實際上,很多團隊會持續(xù)不斷地、長期地堅持這么做,幾個月甚至一年半載都沒有發(fā)布任何東西。如果你在這種情況下,會問自己,到底出了什么問題?我會告訴你,原因在于沒有清晰的承諾,以及太多的事情讓人分心。大家都不會承諾在一段時間內(nèi)交付一些東西,使用各種借口不按時、按預算來完成項目?!?

「如果這個時間只是一兩周,一個月,好吧,或者說一年,這個周期并不重要。重要的是,你不需要擁有一個清晰的過程,并且承諾提供一些東西。當然,這是很有挑戰(zhàn)性的。這意味著,在這個情況下,你必須作出一些選擇,來完成任務。」Sarah 總結(jié)道。

阻礙前進的東西

「到底使用哪種敏捷的方法,采取多少個步驟,或者使用經(jīng)典的瀑布模型,借助谷歌的設計沖刺,都可以,都沒有問題。大家總會認為,采用哪種過程是關鍵,但是現(xiàn)實是,這個過程始終都只是達成目的一個手段而已。」

「真正的問題在于,人的天性是懶惰的,沒有按照承諾交付東西??偸侨滩蛔〉耐涎?,膨脹的自我,辦公室政治,愛來事兒的甲方,喜歡變卦的客戶,它們還都會像攔路虎一樣進入產(chǎn)品和設計的流程。無休止的辯論,不斷改變的策略,不斷膨脹來回拉鋸的會議,最后你只能呆滯地坐在辦公室當中,想想自己的生活到底出了什么問題。最后,我想說一下多年前,我自己所經(jīng)歷的一個項目?!筍arah 覺得她應該從具體案例上來說說這個事兒了。

「所以,首先你應該清楚,在一個特定的時間段內(nèi),交付一些東西出來。你要保證你的團隊不會跳票和拖延,也不會讓預算超出計劃。你將要在約束中工作。約束其實是一種隱藏的優(yōu)點,也許并不是每個人都明白。你需要完全保持專注,除了你的和參評之外,不會被其他的任何東西分心。就你的情況而言,你需要專注于這個儀表盤界面的設計和實現(xiàn)。」Sarah 說道。

「團隊的規(guī)模很重要。不過那是后話,后面咱們再仔細聊。」

「假設,你有一個三個人組成的團隊,他們共同負責開發(fā)并發(fā)布你的產(chǎn)品的下一個功能。具體到你的頭上,就是為你開發(fā)并實現(xiàn)這個重設計的儀表盤。你需要確保公司的其他人不會前來干涉他們的工作,不會來和他們討論這個項目以外的任何事情?!?

「這一點極為重要。他們必須保持專注。減少被打擾的機率——或者說不被打擾是最好的事情,他們能夠?qū)W⒍逦乃伎紗栴}。除了手頭的任務之外,他們不會需要去做其他的任何事情,不會被其他的工作內(nèi)容所分心。對于如何做手頭的工作,什么時候做,具體做什么,他們應當有足夠的控制權和自主權。最后,請記住這一點:

團隊必須足夠小。如果太大,溝通問題一定會成為主要的障礙。每增加一個人,想讓大家信息和想法保持一致的成本,就會成倍增加。如果你擁有太多的自由,太多的資源以及大量的人員,你不僅會得到過度的設計,超出常規(guī)的工作,需要超出計劃的預算,以及一個沒有重點,不夠出彩的產(chǎn)品?!?

問題總是會出現(xiàn)的

「如果你像我說的一樣,后退一步來看問題,就會意識到,流程背后所存在的問題,并不是流程本身的優(yōu)劣,也不關乎公司、人員、國家、文化或者其他。這是關于紀律和約束。不僅是團隊本身需要紀律,負責人要有紀律感,業(yè)務也需要有紀律約束。如同我們所知道的,團隊也好,產(chǎn)品也好,公司也好,它都是自上而下的,頂部的紀律、約束和眼界,決定了底部的紀律、調(diào)性和產(chǎn)出?!?

「現(xiàn)在,你可能會問自己,如果你的項目出現(xiàn)了問題,會怎么辦?那么首先,對于你想要達成的目標,需要一個清晰的愿景或者想法。除非你的愿景和目標足夠清晰,否則你是沒有辦法來提供承諾的。在項目開始之前,這個愿景/目標必須有足夠清晰的定義,是否能夠達成,難度高低,是否具備可執(zhí)行性,否則在過程中一定會有所偏離。在這里,給你幾個小貼士,務必要記住:

不要自欺欺人,你需要提前計劃好整個項目,避免出錯。很多事情都會出錯,所以你需要有目標有愿景,你需要向著目標前進,并且隨時做好解決問題、糾偏的準備。一旦你被其他的因素影響,就很容易增加開發(fā)時間、增加預算、招募更多的人手。不要相信所謂的規(guī)劃和藍圖,那什么都不是。問題是一定會出現(xiàn)的,出錯了,就專注于最終目標,抓緊手頭的項目,別無其他?!?

Sarah 說道這里,Jimmy 已經(jīng)開始有所思考了?!杆裕谖腋嬖V你這些事情以后,對于你你手頭的這個儀表盤的項目,你打算下一步要怎么做?」

需要始終牢記的事情

Jimmy 的腦中仍然在反思 Sarah 剛剛說過的話,下意識回復道:「要有遠見,目標清晰,為即將出現(xiàn)的錯誤與問題做好準備,組建一個足夠獨立的小團隊,和公司其他的團隊和部門隔離開來,這樣可以在不被打斷的情況下聚焦于當前的任務,最重要的是,要在承諾的日期前交付承諾的產(chǎn)品。但是我不知道團隊要有多小,我應該帶多少人?」Jimmy 問道。

「如果我說我知道你要帶幾個,那么我一定是在騙你。不過,通常而言,你這種規(guī)模不算太大的產(chǎn)品,我建議控制在3人以內(nèi)。你是這個項目的主管設計師,也是產(chǎn)品經(jīng)理,在設計上已經(jīng)沒有大的問題,你還需要兩個開發(fā)人員,一個負責前端,一個負責后端,這樣足矣?!筍arah 回答道。

「那么我應該花費多少人在這個上面呢?」Jimmy 又問道。

「這個是你的項目,時間應該由你來衡量。不過,你需要一開始就清楚你手頭有多少資源,你有多少時間來投入這個項目,有多少可供調(diào)用的預算,以及管理團隊的耐心達到了什么程度。而且,這個事情最關鍵的并不是時間,而是你的承諾,以及到達約定時間之后要交付的東西。這不僅是對上層的責任,對于你和你的項目而言,也是一個可供奮斗的目標和清晰的邊界。你的項目看起來并不算小,這個人員工作量之下,可能需要花費一個月的時間來進行開發(fā)。但是請記住,在一個月的時間內(nèi),你必須提交出一個可用的產(chǎn)品出來。從我的角度上來看,我是不允許增加預算和時間的。約束對雙方其實都是有利的?!筍arah 說道。

「那么我還是想問最開始的那個問題,到底應該使用敏捷還是瀑布模型?」Jimmy 還是忍不住問道。

「我不知道?!筍arah 坦言道:「你的項目應該由你來決定。對我而言,選擇哪個流程其實并不算最重要的問題,相反我剛剛說道的,流程之前的種種問題才是最重要的,關于承諾,團隊的構(gòu)建和管理,這些因素產(chǎn)生的影響更為深遠。如果你清楚的知道最終要產(chǎn)出的產(chǎn)品,流程就僅僅只是手段了?!筍arah 笑著總結(jié)道。說話間,她伸手去拿之前沒看完的文檔?!钢x謝,Sarah,」Jimmy 笑道:「你好像又救了我一次。」說著 Jimmy 走出了Sarah 的辦公室。

「我的門一直都敞開著?!筍arah 低聲說道,走遠了 Jimmy 大概并沒有聽到這句低語。

結(jié)語

在設計和開發(fā)數(shù)字產(chǎn)品的時候,每個團隊的負責人可以選擇自己習慣的或者自己青睞的流程和方法。使用什么樣的方法無關緊要,在未來10年,我們可能還會碰到更多的新方法,新的策略。而唯一不變的,始終還是最基本的問題,團隊,承諾和交付。

我注意到,有人把產(chǎn)品所使用的敏捷和瀑布模型這類流程稱為「項目的上帝」。但是實際上,不管哪種流程,依然會陷入無休止的扯皮會議和無意義的辯論,出現(xiàn)了問題之后,開始修改時間表。「我們無法按時完成功能A,因此我們無法開發(fā)模塊B,開發(fā)人員又需要參與下一個項目,因此我們資源是不夠用的,所以呢,這個項目不得不停一個月。」這情況很常見,也是典型的反面案例。

我相信,產(chǎn)品團隊應該高度專注于當前的產(chǎn)品,和其他產(chǎn)品的需求、各種無關的事務隔離開來。「Hey,Angela,我們的大客戶要求這個今天上線,能不能把你的項目放一邊,幫我們把這個產(chǎn)品弄上線?」這也是一個反面案例。拒絕。


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

 



布局怎么做到不單調(diào)而有層次?來看高手的9個技巧

資深UI設計者

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

簡單布局怎么做到不單調(diào)而有層次?看看設計師 Czékmány Zoltán 的9個技巧。

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

全面易懂!寫給新手的信息架構(gòu)設計指南

資深UI設計者


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

很多產(chǎn)品設計師,在畫原型或者設計 UI 的時候癡迷于工具的使用,拿到需求文檔之后急于動手畫圖,忽略了信息架構(gòu)設計對于產(chǎn)品的作用。


信息架構(gòu)作為一個產(chǎn)品的骨架,是產(chǎn)品非常重要的一部分,它決定了一個產(chǎn)品

的布局和未來的發(fā)展方向以及用戶對一個產(chǎn)品的最初印象和整體體驗。毫不夸張的說,好的產(chǎn)品信息架構(gòu)是產(chǎn)品成功的一半。

那么到底什么是產(chǎn)品的信息架構(gòu)呢?該如何設計產(chǎn)品的信息架構(gòu)?如何評判一個產(chǎn)品信息架構(gòu)的好壞?我們接著往下看:

一、信息架構(gòu)的概念

讓我們來看一個例子:

一個飯店需要有哪些設施,如果你是飯店的老板如何合理的排布這些設施,可以讓客戶感覺很舒服的用餐,這個過程就是一個信息架構(gòu)的過程。他可以讓客戶對你的飯店產(chǎn)生好感,從而下次用餐的時候還會想到來你這里吃飯。

在排布飯店設施的過程中我們要遵循一些規(guī)范,比如用戶的習慣或者施工規(guī)范等,正是因為需要遵循這些規(guī)范,所以我們需要一個信息架構(gòu)來體現(xiàn)這些。

比較官方的信息架構(gòu)解釋是這樣的:信息架構(gòu)設計是對信息進行結(jié)構(gòu)、組織以及歸類的設計,好讓使用者與用戶容易使用與理解的一項藝術與科學。

簡單來說,信息架構(gòu)設計就是讓用戶可以 容易地理解你的產(chǎn)品是怎樣的。讓他們在使用你產(chǎn)品的時候可以更順利更自然。就像一進入飯店就會有一種感覺,門口是等餐的地方,進去就應該吃飯,如果找洗手間一定不會往門口走,而會往深處走。這就是信息架構(gòu)的好處:他讓用戶使用同類產(chǎn)品時更容易上手和理解,讓產(chǎn)品更容易被接受。

二、為何需要信息架構(gòu)設計

那對于線上產(chǎn)品來說為什么需要合理的信息架構(gòu)呢?大家來看下邊3組 app 的 tab欄截圖。你能僅僅從 tab欄就看出這款 app 是什么類型的 app,如何使用嗎?

很明顯的,第一個是一款購物類 app,第二個是一款圖片社交類的 app,第三個是微信的 tab,雖然首頁名稱是微信,但是我相信如果把名稱換成「聊天」,你還是能認出這是微信的 tab欄。

從底部標簽欄就可以大致看出產(chǎn)品是用來干嘛的,這就是信息架構(gòu)的作用。一個合理的信息架構(gòu)可以讓產(chǎn)品非常容易被用戶理解,可以讓用戶第一眼對產(chǎn)品有一個簡單的認知,指導自己可以用產(chǎn)品做什么事,指導產(chǎn)品提供什么服務。

再看一組反例:

這三組 tab欄就讓人很困惑了,看了半天你也許根本不知道這幾款 app 是做什么用的,以及如何使用。如果你讓用戶很困惑,他會分分鐘拋棄你的 app。

所以信息架構(gòu)的核心目標是為用戶提供更好的體驗,獲得更高的留存率。

一款信息架構(gòu)良好的產(chǎn)品必然遵循以下兩個標準:

  • 讓用戶打開 app 的第一秒就知道這是一款什么 app,怎么用;
  • 用戶想要使用某一功能時,能夠第一時間找到。

我們通過這兩個標準來印證下上邊3個正面案例的信息架構(gòu):

相信你能很快速的識別出這款軟件的用途和用法,這就給提升留存提供了基礎。

那么如果信息架構(gòu)像架構(gòu)一個飯店一樣簡單,那么信息架構(gòu)為何需要設計?

因為你的實際產(chǎn)品功能可能有這么多:

畢竟我們不是支付寶,沒辦法把功能像豆腐塊一樣堆疊起來,我們需要一些科學的設計方法。

三、如何設計信息架構(gòu)

合理的信息架構(gòu)設計需要考慮5個步驟:

下面我來分步講解一下。

1. 了解用戶,場景,習慣

首先你的產(chǎn)品是給到用戶用,你當然要最大限度的了解你的用戶,我們先來看下一個概念:「心智模型」。

心智模型是經(jīng)由經(jīng)驗及學習,腦海中對某些事物發(fā)展的過程,所寫下的劇本。人類在經(jīng)歷或?qū)W習某些事件之后,會對事物的發(fā)展及變化,歸納出一些結(jié)論,然后像是寫劇本一樣,把這些經(jīng)驗濃縮成一本一本的劇本,等到重復或類似的事情再度發(fā)生,我們便不自覺的應用這些先前寫好的劇本,來預測事物的發(fā)展變化。心智模型是你對事物運行發(fā)展的預測。再說得清楚一點,你「希望」事物將如何發(fā)展,并不是心智模型,但你「認為」事物將如何發(fā)展,就是你的心智模型了。

假設你從沒見過 iPad,而我剛遞給你一臺并告訴你可以用它來看書。在你打開 iPad 使用它之前,你頭腦里會有一個在 iPad 上如何閱讀的模型。你會假想書在 iPad 屏幕上是怎樣的,你可以做什么事情,比如翻頁或使用書簽,以及這些事情的大致做法。即使你以前從沒有使用過 iPad,你也有一個用 iPad 看書的「心智模型」。你頭腦里的心智模型的樣式和運作方式取決于很多因素。

用戶往往帶著以往使用 APP 的一些習慣來使用產(chǎn)品;線下做同一件事的習慣、生活習慣、心智模型等。要考慮哪些是可以創(chuàng)新的,哪些是用戶習慣,要在不妨礙用戶習慣的情況下作出更能讓用戶接受的創(chuàng)新。

你要考慮清楚4個問題:

用戶通常用你的產(chǎn)品做什么?

用戶用你的產(chǎn)品來做什么?用來看新聞還是用來聊天?一定要考慮清楚用戶的核心流程。從核心流程中提取信息架構(gòu)的基礎形式。

用戶用這類產(chǎn)品最關心什么?

用新聞app 時咨詢的真實性實效性,購物類app 精準搜索和售后功能,就是你的用戶關注點在哪里,這是一個很好的突破口。

用戶有哪些思維定式?

和用戶年齡身份相關的屬性,產(chǎn)品體驗符合相應用戶的思維模式,心智模型,用戶就會比較容易接受。

用戶用什么類似的產(chǎn)品?

類似的產(chǎn)品也會帶來一些用戶習慣,迎合這些習慣也會讓用戶快速上手接受產(chǎn)品。

了解了你的用戶場景和使用習慣之后你會知道如何做出符合用戶心智的,容易被接受的產(chǎn)品,你不需要擔心做的產(chǎn)品沒有差異性或者沒有競爭力,我們可以在核心流程之外做出創(chuàng)新點,讓用戶覺得你的產(chǎn)品又好用又有些不一樣。

2. 了解業(yè)務

這里的業(yè)務包括與產(chǎn)品接觸的內(nèi)部及外部的人提出的需求,比如公司的運營,市場,銷售,BD,公司的外部合作伙伴等。

這些人的需求我們也要收集,比如運營人員想更方便的管理注冊用戶,銷售想更多的添加廣告位,市場推廣人員要求能統(tǒng)計不同渠道帶來產(chǎn)品的下載量,注冊數(shù),活躍數(shù),合作伙伴需要進行賬號,內(nèi)容互通等,總之只要與業(yè)務有關的人的意見,盡可能的在產(chǎn)品設計前多收集,即使做不了,也告訴他們原因,要不然產(chǎn)品上線后就等著被他們吐槽吧。

3. 調(diào)研競品的信息架構(gòu)

在做一款 app 時,我們面臨了和無數(shù)競品爭搶用戶的局面,這時候分析競品就非常必要,我們需要在知己知彼的前提下,做好核心流程功能,再思考如何在差異功能上做好突破。

首先我們需要把競品功能梳理成思維導圖:

其實思維導圖就是信息架構(gòu)比較基礎的形式了,但是光有思維導圖沒用,我們需要對思維導圖進行分析。

我以前做過的一款人脈 app 為例,當初對比了領英、赤兔和脈脈,分析了這4款 app 的思維導圖后得出的共性和差異點:

共性就是要符合用戶使用習慣的地方,如果你調(diào)研的3-5個產(chǎn)品都這么做了,很可能這里是產(chǎn)生用戶習慣的地方,是我們需要去遵循的,這是獲得用戶好感度的基礎。

分析產(chǎn)品時你一定也會得出一些產(chǎn)品差異的地方,而這些差異就是你的產(chǎn)品競爭點,也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會有社交相關的功能,但是脈脈會比較注重職場招聘、直播等互聯(lián)網(wǎng)職場人比較關心的點,這樣對應的用戶群體就比較會吃你這套,會提升用戶的粘性。

相信你在梳理了競品的信息架構(gòu),總結(jié)了共性和差異點之后對產(chǎn)品的信息架構(gòu)已經(jīng)有一個比較清晰的認知了,在做自己產(chǎn)品信息架構(gòu)的時候也會更胸有成竹。但是最后還有一件事我們可以做,就是對我們的要做的產(chǎn)品功能做卡片分類。

4. 卡片分類

卡片分類法是我們工作中常用到的一種方法,它可以在用戶側(cè)再一次印證和檢測我們的產(chǎn)品信息架構(gòu)。

卡片分類法就是讓用戶對功能卡片進行分類,組織,并給相關功能的集合重新定義名稱的一種自下而上的整理方法。

說直白點就是準備一堆卡片,在這些卡片上寫上你所需要包含的功能名稱,然后給到用戶側(cè),讓用戶進行分類,讓用戶進行組織,來了解用戶到底覺得這些功能應該怎么合并怎么歸類的一種方法。它可以幫助你站在用戶角度去了解用戶是怎么認定這些功能的,也可以在卡片分類法的過程中更加了解用戶是怎么想的。

卡片分類法大概的步驟和注意點是這樣的:

卡片分類法最終會產(chǎn)出這樣的一個樹形圖:

5. 產(chǎn)出信息架構(gòu)

其實到這一步信息架構(gòu)大概的雛形已經(jīng)有了,你可以用 axure 或者類似 mindnode 的軟件把信息架構(gòu)梳理出來。

接下來你要對信息架構(gòu)進行重要性分級,這樣在產(chǎn)品開發(fā)的前期可以幫助梳理產(chǎn)品研發(fā)的優(yōu)先級,集中精力解決用戶的最大痛點。在產(chǎn)出頁面時也可以更好的把控頁面元素的大小層級,位置關系等。

最后你需要注意層和度的平衡:層一般不超過5層,超過操作困難。度過多會讓用戶認知成本增加,容易找不到想找的內(nèi)容。這里的度指的是同一頁面展示的信息量。


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


3個步驟,讓你把握設計切入點

資深UI設計者

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

如何從眾多的設計點中找到一個清晰的設計主線呢?只需從3個方面切入。

小明的設計故事:身為設計師的小明,剛剛遇到下發(fā)的設計需求,看了半天需求,無從下手。于是瘋狂尋找競品去借鑒,去素材網(wǎng)站尋找素材拼湊。

如果在設計工作中遇到與小明相同的情況:沒有設計頭緒,大腦一片空白,畫著不一定能過審的草稿時,請繼續(xù)閱讀下面的文章,希望大家能從作者的設計總結(jié)中有所啟發(fā)。

目錄:

  • 從業(yè)務目標切入
  • 從用戶行為切入
  • 從設計方法上切入

什么是設計點?

設計點是設計師通過設計手段介入設計任務的一個節(jié)點,比如:設計目標 、設計風格 、用戶行為 、用戶情緒 、信息表達等都是設計的切入點,設計點能夠影響設計的風格走向和設計師的創(chuàng)作思路。

那如何從眾多的設計點中找到一個清晰的設計主線呢?只需從3個方面切入。

一、從業(yè)務目標來切入:曬講義案例

下圖是阿里巴巴UED 的設計理論,同程序員提倡的「不造重復的輪子」一樣,設計理論也沒有必要去反復總結(jié)類似的。目前阿里的這個設計理論,很好的支持了包含大型項目到中型項目的各個環(huán)節(jié),易于理解,且和我們的工作認知貼近,是一個很好的入門方法。

我們通過定義業(yè)務目標和聚焦設計目標,來最終實現(xiàn)設計的產(chǎn)出。

下圖是平臺營銷活動的設計5個要義,其核心也是業(yè)務目標。

通過幾個的設計方法的展示,我們可以看出,處于上游業(yè)務目標的重要性。

只有業(yè)務目標和設計目標一致的時候,我們的設計工作才有意義。當我們評判我們的設計結(jié)果時,除了設計的數(shù)據(jù)指標外,能快速判斷設計方案比迭代之前更優(yōu)的指標就是是否符合業(yè)務目標,是否更貼近用戶的訴求。

1. 切入模型

根據(jù)工具模型我們從業(yè)務目標出發(fā),去定義設計目標從而得出設計方向。

2. 明確業(yè)務訴求

3. 得出業(yè)務目標

用分享講義的策略給用戶帶來學習交流機會和學習成就感,達到拉新和活躍用戶目的。

4. 視覺推導

5. 案例

二、從用戶行為切入

視覺設計師,尤其是運營設計師一定要具有交互思維,作為全鏈路設計目標的我們,掌握交互思維,能更好的理解產(chǎn)品文檔和規(guī)避更多的設計錯誤,從而準確引導用戶操作路徑。

方法:了解頁面中的功能交互流程,梳理用戶操作行為路徑,可以對行為步驟中的信息內(nèi)容進行歸類分組提供依據(jù)。

切入模型:

三、從設計方法上切入

常見的方法有:情感化、原子化、組件化、游戲化等等。

方法:分解設計需求,歸納設計模塊,運用已知的設計類型進行視覺化設計。

1. 提取儀式感設計點-曬成績項目

儀式感的作用:通過用戶在體驗過程中由產(chǎn)品功能實現(xiàn)—交互操作—體驗心理變化建立,形成對價值觀的建立,是給用戶帶來更高層次的享受。

從四個層面理解儀式感:權威感、尊重存在感、期待感、榮譽感的意義。通過分解設計內(nèi)容來發(fā)現(xiàn)機會點,插入儀式感設計方法。

視覺推導:

案例:

2. 提取情感化設計點

情感化設計3要素:

案例:

3. 提取游戲化設計點

將游戲機制運用于非游戲場景。比如:要想鼓勵用戶多參與交互,你可以在 APP 加入「挑戰(zhàn)」這類的游戲元素,用戶可以參與挑戰(zhàn),通過連續(xù)抽獎,并獲得相應獎賞,從而達到預期目的。

案例:

尋找設計點就是拆解與分析的過程。

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

如何快速制作一款有個人風格的字體?來看阿里設計師的方法!

資深UI設計者

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

專注于做好一件小事,哪怕是做不好也用心去做,小到搭建一個精美的網(wǎng)格系統(tǒng),做好一個字體的拐角……先看一下我的往期設計案例。

如何從無到有設計一款字體

對于很多剛接觸字體設計的同學經(jīng)常會遇到一種情況那就是想法高大上,結(jié)果很悲傷,為什么會造成這樣的結(jié)果?歸根結(jié)底是對字體設計本身了解還不夠細致就照葫蘆畫瓢直接上,為了避免這種尷尬的結(jié)果,我們應該在開始著手做字體之前要做好各項準備工作,不斷去瀏覽優(yōu)秀的字體設計從中尋找設計的感覺,確定感覺后建立網(wǎng)格系統(tǒng),開始逐步設計字體。我在做字體設計的時候會把握幾個步驟「建網(wǎng)格」——「選字體」——「拆字體」——「繪筆畫」——「綁骨架」——「粗與細」——「取與舍」——「磨細節(jié)」——「去感受」。

下面我們就以大家最常見的矩陣字體為例來給大家分享如何制作字體。

1. 建網(wǎng)格

建立網(wǎng)格系統(tǒng),萬丈高樓平地起,要做一款扎實的字體離不開網(wǎng)格系統(tǒng)的規(guī)范。

2. 拆字體

以「燃」為例——選取一個默認字體,按照字體結(jié)構(gòu)對筆畫進行拆分。

3. 繪筆畫

將拆分出的筆畫用橫線和豎線在網(wǎng)格系統(tǒng)里進行筆畫重繪,此時不要做細節(jié),撇、捺和點根據(jù)自身走向和結(jié)構(gòu)特點也歸屬為橫豎線。

4. 綁骨架

拆分繪制的字體筆畫就是字體的骨骼,筆畫間的連接處可以理解成是人體的關節(jié),關節(jié)的意義在于保證字體穩(wěn)固的同時又靈活多變,字體的筆畫可以根據(jù)視覺需要圍繞關節(jié)在一定范圍內(nèi)做活動,也可調(diào)整長短比例。

5. 粗與細

筆畫的粗細與硬度由你想要的字體氣質(zhì)來決定,細筆畫與曲筆畫柔美氣質(zhì),粗筆畫與直筆畫沉穩(wěn)大氣,雖說設計是一種感覺,但是這種感覺對于初學者來說很難把控,所以跟大家共享一下常用的幾種筆畫的粗細,在1000PX*1000PX畫板里采用6px,10px和20px為基礎筆畫粗細,根據(jù)想要的業(yè)務氣質(zhì)選取即可。

6. 解與構(gòu)

常見的字體結(jié)構(gòu)有「上下結(jié)構(gòu)」「上中下結(jié)構(gòu)」「左右結(jié)構(gòu)」「左中右結(jié)構(gòu)」「半包圍結(jié)構(gòu)」和「全包圍結(jié)構(gòu)」。其中「上下結(jié)構(gòu)」中著重強調(diào)占比較小的那部分筆畫,進而達到字體本身的平衡,例如「感」字著重設計心字;「上中下結(jié)構(gòu)」中一般會在不影響識別性的前提下去掉中間部分橫行筆畫,進而達到字體本身的平衡,例如「享」字著重設計口字;左中右結(jié)構(gòu)中在不影響識別性的前提下會簡化左邊部分筆畫,進而達到字體本身的平衡,例如「燃」字著重設計火字。

7. 取與舍

筆畫變粗后整個字體筆畫間的空間比例會受到一定影響,因此為了字體的美觀度和透氣性我們會對字體結(jié)構(gòu)進行一些取舍和整合。

8. 磨細節(jié)

為了讓字體看起來更加舒適,我們將字體的拐角做圓,做圓角的同時也要根據(jù)網(wǎng)格系統(tǒng)來調(diào)整圓的度數(shù)。

9. 去感受

打磨整體字體,繼續(xù)刻畫細節(jié)。

注意:在一組字里,每個單字的結(jié)構(gòu)都存在差異,適當調(diào)整字體內(nèi)部的比例,形成感官上舒適的筆勢,對保持視覺上大小一致很重要。漢字字體類型繁多,但是如果我們用幾何法則來劃分字體類型其實大致可以歸納為三種:方形,圓形和三角形,從面積上來看方形和圓形的面積最大,三角形次之,所以我們?yōu)榱吮3肿种卮笮〉囊恢滦孕枰{(diào)整他們之間的大小比例,做到大小均勻,筆畫一致,結(jié)構(gòu)嚴謹和間隙適中。

△ 圖源:ElethomHunter

為了拉出字體的氣質(zhì),一般會把字體做的稍微偏瘦長一些。

字體設計的手段是多種多樣的,每個設計師都有自己擅長的切入點,最后的結(jié)果是自己想要的就好。上述的分享希望能給字體設計初學者一點幫助,也歡迎各位同行大神交流切磋。

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

如何讓界面任務流程更清晰 ?向?qū)皆O計了解下

資深UI設計者

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

向?qū)皆O計屬于交互設計的常識,包括步驟條設計,引導標簽等。本文從向?qū)皆O計的作用、使用場景、設計類型、需要注意的問題等,給你帶來全面的基礎科普。

一、向?qū)皆O計是什么?

軟件界面設計中的「向?qū)浇缑妗惯@個術語源自英語中的「Wizard」一詞。意思為「男巫、奇才」的意思;延伸意為「向?qū)А埂O驅(qū)?,顧名思義,就是能帶領或指引別人到達目的地的人。在實際使用中,這種交互方式的確像一個向?qū)б粯樱徊讲降匾I用戶向前,把復雜的任務進行拆解并有步驟地完成。

向?qū)皆O計也是流程設計的一種方式,這種方式通常目的性明確。在很多商業(yè)領域使用非常廣泛,比如購物,酒店預訂,銀行業(yè)務等等,尤其適合新用戶第一次體驗產(chǎn)品時使用,讓用戶對產(chǎn)品使用和任務快速上手,節(jié)約時間,提升效率。

二、向?qū)皆O計的主要作用

1. 引導新手操作

讓新用戶在最短的時間內(nèi)了解產(chǎn)品/任務,明白如何快速上手使用。

2. 縱觀信息全局

讓用戶操作時對整體流程可控,心里有底,可以提前預估操作/完成時間。

3. 簡化操作任務

對復雜任務進行拆解,提升用戶操作的效率,同時也降低出錯率。

4. 較少操作決策

固定任務操作路徑,節(jié)約用戶思考&做操作決策時間,快速完成任務。

三、向?qū)皆O計的使用場景

一般情況下,標準向?qū)Р襟E條的使用場景為:2-5 步比較合適。< 2 步,> 10步,使用是不合適的。因為 < 2 步?jīng)]必要;> 10 步太夸張,會嚇到用戶,本能認為你的產(chǎn)品使用過于繁瑣,拒絕嘗試和使用。

四、向?qū)皆O計的類型

  • 手風琴向?qū)?
  • 標準向?qū)?
  • 橫向標準向?qū)?
  • 縱向標準向?qū)?
  • 彈框向?qū)?
  • Tab 欄向?qū)?
  • 標簽向?qū)?

五、向?qū)гO計類型案例場景分析

1. 手風琴向?qū)?/strong>

手風琴向?qū)皆O計類型,一般適用于 2B 類后臺業(yè)務數(shù)據(jù)較多,任務指向性相對明確,流程基本固定。例如用戶幫助文檔以及 Q&A 的場景; PC 端頁面的注冊引導;電商網(wǎng)站的購物支付等流程。

手風琴向?qū)?,除了可滿足任務引導,步驟拆解,直觀展示等作用;更主要的是能對大量的數(shù)據(jù)信息進行收納整理,凸顯信息層級的清晰度,并在收納信息的同時節(jié)約頁面空間,讓頁面更有節(jié)奏和呼吸感。

2. 標準向?qū)?– 橫向向?qū)?/strong>

橫向標準向?qū)б部梢苑Q為橫向步驟條,這樣表述大家比較容易理解。此類向?qū)皆O計是大家最常見的,也是最常規(guī)的一種橫向向?qū)У脑O計,主要作用是對復雜的任務進行拆解,按照固定順序明確步驟,讓用戶對即將要操作的任務時間和內(nèi)容有一個可控的心理預期。一般用戶可以一目了然總覽共有幾步,目前每個步驟的狀態(tài)(例如已完成/進行中/未開始),和自己當前的操作位置。

目前很多行業(yè)內(nèi)的組件庫對橫向步驟條的 UI 設計基本都采用以下表現(xiàn)形式(圖片來源 阿里巴巴 TXD-AISC 組件庫),只是在細節(jié)上有稍許的差異。

具體差異主要表現(xiàn)在狀態(tài)色彩的使用和上下圖文的布局中。例如阿里-螞蟻金服的 Ant Design 橫向步驟條的設計圖文布局為左圖右文,這樣設計的好處是,如果流程步驟相對較少時,文字也可作橫向指向的一部分,避免頁面太過空曠。同時 Ant Design 對步驟條的使用場景做了更多細分,除了簡單的步驟條,還有迷你版和帶圖標的步驟條。

除了上面標準的組件庫中常有的步驟條樣式,還有以下的常用樣式,例如電商類購物和支付的場景,除了對已完成的狀態(tài)進行確認顯示,色塊箭頭的設計,向?qū)е敢愿鼜姟?

類似上一個案例的 UI 美化升級版,其實功能原理都是相通的。

除了上面相對比較簡單場景的步驟條,其實在 2B 業(yè)務中還有相對比較復雜的步驟條的設計,具體對應的是復雜的業(yè)務場景,例如覆蓋多產(chǎn)品線參與,多角色審批,包含父子步驟審批的業(yè)務場景,簡單常規(guī)的標準向?qū)皆O計是不能夠滿足業(yè)務場景的,需要對簡化版的橫向向?qū)Ю^續(xù)深入拓展和優(yōu)化。

上面兩種普通常見的橫向向?qū)讲襟E條,業(yè)務場景相對更偏向 2B 中后臺,風格相對保守和嚴謹。其實網(wǎng)上還有很多設計感和趣味性較強的步驟條設計,UI 風格創(chuàng)意十足,但原理都是相通的,具體 UI 樣式詳解就不再贅述??蓞⒖甲髡叩?a target="_blank" class="external" style="color:#0DA4D3;text-decoration-line:none;transition:none 0s ease 0s;">設計板。整體資料 UI 風格如下:

3. 標準向?qū)?– 縱向向?qū)?/strong>

縱向標準向?qū)б部煞Q為縱向步驟條向?qū)?,主要使用場景為?nèi)容數(shù)據(jù)較多,需要分頁/板塊展現(xiàn)的場景,B端業(yè)務使用的場景較多;縱向向?qū)гO計陳列在左側(cè)的目的也為了能對大量數(shù)據(jù)進行快速篩選和定位,同時此類數(shù)據(jù)之間無需進行對比查看,如下圖:

4. 彈出框向?qū)?/strong>

彈出框向?qū)гO計主要使用的場景為注冊頁/登錄頁/輕量任務操作頁,都在彈出框內(nèi),步驟較少,能夠快速完成。如下圖:

5. Tab 欄向?qū)?/strong>

Tab 欄向?qū)鋵嵤荰ab欄+步驟條元素,組建成的一個新的橫向向?qū)J剑闹饕褂脠鼍跋鄬碚f比較靈活,可以用在登錄和注冊頁等輕量頁面場景中,也可用在有固定任務流程的詳情頁面中,不過一般 PC 端的詳情頁會采用單獨的 Tab 和步驟條展示,為讓信息層級更清晰明確。

6. 標簽向?qū)?/strong>

標簽性向?qū)гO計主要使用在移動端居多,較少標明固定的操作順序,但是基本的操作路徑有一定的秩序在,主要使用的場景是對特定事物進行快速引導定位和查找,在眾多商品類目中,快速找到自己需要的。例如瀏覽器的搜索和電商平臺的商品分類檢索,還有外賣類和旅行類對食物以及景點的查找中,都常常會用到標簽向?qū)В?

六、向?qū)гO計中需要注意的問題

任務流程本身并不復雜的時候,盡量不要使用,避免弄巧成拙,畫蛇添足;

每一步驟都需定義清楚,明確用戶當前所在的進度節(jié)點,清晰展現(xiàn)此刻具體步驟及狀態(tài);

顏色不要亂用,避免產(chǎn)生寓意分歧和過度設計,一般情況下「已完成」采用藍色/綠色都可以,但是需標注「已完成」 icon,「進行中」為藍色高亮,「未開始」置灰;不過也可根據(jù)品牌色做出對應調(diào)整,避免采用太多顏色,讓用戶感覺眼花繚亂,不知所措;

及時對狀態(tài)進行追蹤&反饋,避免用戶不知道自己操作是否生效,混淆認知;

任何向?qū)гO計中最好是提供隨時撤銷的選項,讓誤操作有可逆場景,給任何誤操作提供返回和修改的機會。

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

比爾晴還煩人!用戶最討厭的三種UI設計方式

資深UI設計者

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


閱讀之前,溫馨提示下,文中提到的 UI設計方式不一定有對錯,如果使用得當,它們都有很大的可能性。

一、彈窗

也許你會知道這種感覺,當你打開一個新的網(wǎng)頁,閱讀到一半時,突然被一個巨大的浮層打斷,要求填寫電子郵箱。大多數(shù)人第一反應是關閉彈窗或關閉整個網(wǎng)頁。

這么多網(wǎng)站都會使用這種方式,其用意顯而易見。然而,這種方式對用戶產(chǎn)生了非常負面的影響——中斷了用戶正在做的事(對用戶來說重要的事)并將注意力集中在另一件事情上(對網(wǎng)站來說重要的事)。在你試圖要求獲取用戶信息之前,最好等用戶完成當前的事情(例如,閱讀并熟悉內(nèi)容)。讓他們有機會選擇是否做某件事情,而不是強迫他們?nèi)プ觥?

二、無限滾動

無限滾動是指用戶可以通過無限地向下滾動瀏覽頁面大量內(nèi)容。當您向下滾動頁面時,它可以一直刷出新的內(nèi)容。雖然聽起來很好,但這種方式并不適用于所有網(wǎng)站,也不是 APP 的通用解決方案。

△ 圖片來源:Geo Law

這種方式的缺點也是它的優(yōu)勢——它是沒有終點的。用戶訪問到網(wǎng)頁的某一個位置,他們無法記錄當前瀏覽位置以便于稍后回到同一位置。當用戶離開了網(wǎng)站,他們將失去之前訪問的所有進度,不得不再次向下滾動頁面返回到同一位置。這種方式無法確定用戶的滾動位置,不僅會對用戶造成煩擾或混淆,而且還會使整體用戶體驗變差。

2012年,Etsy 花了很多時間實現(xiàn)電商網(wǎng)站的無限滾動界面,但是卻發(fā)現(xiàn)新界面的體驗不如翻頁。雖然購買數(shù)量沒有什么變化,但用戶參與度卻下降了(人們有目的地使用搜索的次數(shù)下降)。

正如 Dmitry Fadeyev 指出:

人們會想回到搜索結(jié)果列表中查看剛才看到的內(nèi)容,并與他們在列表中發(fā)現(xiàn)的其他內(nèi)容進行比較。無限滾動不僅打破了這種對比,也使列表上下移動變得困難,尤其是當你下次回到頁面,發(fā)現(xiàn)自己又回到了頂部,需要再次向下滾動列表并等待內(nèi)容加載。在這種情況下,無限滾動界面就比翻頁慢多了。

設計師在設計中加入無限滾動之前,應該權衡它的優(yōu)缺點。選擇取決于場景以及內(nèi)容的傳遞方式。一般來說,無限滾動適用于像 Twitter、Instagram 這樣的產(chǎn)品,用戶在消耗無窮無盡的數(shù)據(jù)流時不會特別尋找特定的內(nèi)容。

譯者注:作者在《UX: Infinite Scrolling vs. Pagination》中提到無限滾動的優(yōu)缺點:

1. 無限滾動的優(yōu)點

用戶停留的時間更長,提升用戶參與度。當用戶沒有特定尋找的內(nèi)容時,可以通過瀏覽海量信息找到自己喜歡的內(nèi)容(如Pinterest、Facebook)。

滾動比點擊操作更快更容易,分頁展示每次內(nèi)容更新都需要額外點擊等待加載。無限滾動對于移動設備很友好,移動設備的手勢控制讓滾動更自然。

2. 無限滾動的缺點

影響頁面性能,加載速度慢,用戶無限的向下滾動,加載更多的內(nèi)容,頁面的性能會越來越低。

無法定位到上一次瀏覽的位置,需要重新不斷下拉回到同一位置。

網(wǎng)站右側(cè)的滾動條變得無關緊要,反映不出數(shù)據(jù)量,當你以為快要接近底部,引誘你繼續(xù)向下滾動,結(jié)果更多的內(nèi)容又呈現(xiàn)出來。

缺少頁腳,用戶有時候需要查看某些信息,去頁腳查看發(fā)現(xiàn)沒有。這些信息可以展示在別的地方,或者加上「加載更多」的按鈕來響應用戶對更多內(nèi)容的需求。

結(jié)論:無限滾動適用于用戶沒有特定目的的原創(chuàng)內(nèi)容網(wǎng)站(Twitter,F(xiàn)acebook)或者視覺(Pinterest,Instagram)的網(wǎng)站和 app,分頁則適用于用戶在尋找特定信息的搜索結(jié)果列表,以及用戶瀏覽位置重要的地方。谷歌的圖片用了無限滾動,相對于文本搜索,用戶可以更快地瀏覽和操作圖片,文本搜索則需要花費更長的時間。

3. 使用無限滾動的建議

  • 當你使用無限滾動時,可以保持導航欄可見,以便于快速進入其他頁面。
  • 頁面需要頁腳時,使用「加載更多」的按鈕。
  • 為特定項目增加收藏或書簽,以便于保存下來。
  • 加載新內(nèi)容的時候提供視覺反饋,讓用戶知道發(fā)生了什么。

三、推送通知

您是否注意過每天從各種應用收到的通知和提醒消息的數(shù)量?其中您真正關心的通知有多少?

每天用戶都會被沒用的推送轟炸,分散日常活動的注意力,并感到惱火。

惱人的推送通知是人們卸載移動應用程序的首要原因(根據(jù)調(diào)查受訪者的比例為71%)。

當用戶開始使用 APP 時,如果推送內(nèi)容足以讓用戶「愿意被打斷」,他們就不會那么在意收到推送消息,換句話說,這意味著推送消息必須讓用戶覺得足夠有用和有趣。因此,為用戶推送有感染力并使之愉悅的定制化內(nèi)容才是關鍵。

推送通知是一項特權,因為用戶信任你,才允許你直接向他們發(fā)送消息,你不能濫用這個特權。

為用戶設計有用,相關和及時的通知非常重要。推送通知可以成為企業(yè)直接與用戶溝通的強大工具,并在適當?shù)臅r間和地點傳遞正確的信息,以促進互動。

譯者注:作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意幾點:

適當?shù)臅r間。尊重當?shù)氐臅r間,不要在用戶睡眠的時候發(fā)送通知,比如國際化的 APP 針對不同的地區(qū)調(diào)整推送時間。Andrew Chen 收集了一些數(shù)據(jù)顯示推送打開率在下午6點后更高,當用戶參與度最高的時候,在下午6-8點時發(fā)送推送通知。

△ 圖片來源:Andrew Chen和 Leanplum

限制次數(shù)。設置一個合理的推送次數(shù),一些 APP 只要觸發(fā)了與你相關的信息就會提醒你,過多的推送可能會引起用戶的不適。

個性化定制不同的推送內(nèi)容給不同的用戶,推送對用戶有價值的內(nèi)容。比如根據(jù)用戶的瀏覽歷史做相關用戶感興趣的推送。

發(fā)送消息之前應該確定好目標,跟蹤數(shù)據(jù),確認推送是否達到了效果。


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

7個案例解析:復選框 vs 切換開關

資深UI設計者

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

本文介紹在設計表單體驗時,決定這兩個控件之間的指導性原則和案例分享。

表單提供了幾個可以更輕松收集用戶輸入的控件。設計表單時,在正確的位置使用正確的控件是一項挑戰(zhàn)。


復選框控件有三種狀態(tài):unselected(非勾選態(tài))、selected(勾選態(tài))和indeterminate(未確定態(tài))。最后一個狀態(tài)代表子選項列表在父選項下分組且子選項處于勾選態(tài)和未勾選態(tài)之間的情況。


切換開關代表允許用戶打開或關閉物體的物理開關,如燈的開關。


點擊切換開關需要兩個操作步驟:選擇和執(zhí)行,但復選框只有一個選項,其執(zhí)行通常需要另一個控件。


在選中復選框和切換開關控件之間時,最好關注使用的環(huán)境而不是其功能。


下面是一些在設計表單體驗時決定這兩個控件之間的指導性原則和案例分享。



案例1:即時回復


使用切換開關時,


1. 應用設置的立即響應是無需明確操作的。


2. 設置需要打開/關閉或顯示/隱藏功能才能顯示結(jié)果。


3. 用戶需要執(zhí)行不需要審核或確認的即時操作。


Image title

如果需要即時響應的選項最好選擇使用切換開關


案例2:設置確認


使用復選框時,


1. 應用設置需要在提交之前由用戶確認和審核。


2. 在顯示結(jié)果前,設置定義需要執(zhí)行提交、確定、下一步、等應用操作。


3. 用戶必須執(zhí)行其他步驟才能使更改生效。


Image title

如果需要顯式操作來應用設置,則首選復選框


案例3:多項選擇


使用復選框時,


1. 有多個選項可供使用,用戶必須從中選擇一個或多個選項。


2. 逐個單擊多個切換開關,每次單擊后等待查看結(jié)果是需要額外的時間。


Image title

在列表中選擇多個選項,復選框能提供更好的體驗


案例4:不確定狀態(tài)


使用復選框時,


1. 當多個子選項在父選項下分組時,需要中間選擇狀態(tài)。中間狀態(tài)表示在列表中選擇了多個子選項(但不是全部)。


Image title

使用復選框最好地顯示不確定狀態(tài)


案例5:清晰的視覺狀態(tài)


使用復選框時,


1. 有可能與切換開關的開/關狀態(tài)混淆。有時很難理解開關是顯示狀態(tài)還是動作。


2. 需要提供明確的勾選狀態(tài)或未勾選狀態(tài)。


Image title

有時切換開關不能清晰地顯示它是狀態(tài)還是動作


案例6:相關項目


使用復選框時,


1. 用戶必須從相關項目列表中選擇選項。


Image title

用復選框顯示要選擇列表中的相關項


使用時切換開關時,


1. 用戶切換獨立的功能或行為。


Image title

獨立項目可使用切換開關進行選擇


案例7:單選項


使用復選框時,


1. 提供單個二進制是/否選擇。


2. 只有選擇或取消選擇一個顯而易見的選項。


Image title

單個是/否選項更適用于復選框


使用切換開關時,


1. 需要單一選擇,并且您希望為開/關類型的決策提供兩個選項。


Image title

使用切換開關可以最好地理解單個開/關決定


結(jié)論


重要的是在表格中的正確位置提供正確的控件使其更加用戶友好。由于表單有很多很長的選項,若用戶必須進行額外點擊才能填寫信息,對用戶來說會變得枯燥乏味。提供的案例和指南會幫助你決定在表單中添加控件時選擇復選框還是切換開關。



參考文獻


1. Control and Patterns《控制和模式》


2. When to Use a Switch or Checkbox《何時使用開關或復選框》


3. Selection Controls《選擇控制》


4. UX Design: Checkbox and Toggle in Forms《UX設計:表單中的復選框和切換》

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

 

牢記這9個排版設計要點,領導都無話可說了(二)

資深UI設計者


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

前幾天帶大家學習了《牢記這9個排版設計要點,領導都無話可說了…》,今天給大家?guī)砼虐嬖O計要點第二彈。



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


日歷

鏈接

個人資料

藍藍設計的小編 http://www.wnxcall.com

存檔