<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

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

          濤濤



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


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

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

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

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

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

          「干啥?你倆在聊啥?」

          「Boris在跟我說敏捷開發……」

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

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

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

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

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

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

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

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

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

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

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

          「早知道我應該一開始就來找 Sarah 問問?!笿immy 不由得對自己抱怨了一句。說著,他在摸起咖啡杯旁邊的紙和筆,準備做筆記,就像上次那樣。Sarah 看穿了他的小心思,笑道:「不用記。」說著,喝了一口咖啡,然后繼續道:「先想想看,我們為什么會有敏捷、瀑布模型、沖刺模型,為什么要用循環工作法呢?」

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

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

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

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

          承諾是關鍵

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

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

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

          阻礙前進的東西

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

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

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

          「團隊的規模很重要。不過那是后話,后面咱們再仔細聊?!?

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

          「這一點極為重要。他們必須保持專注。減少被打擾的機率——或者說不被打擾是最好的事情,他們能夠專注而清晰的思考問題。除了手頭的任務之外,他們不會需要去做其他的任何事情,不會被其他的工作內容所分心。對于如何做手頭的工作,什么時候做,具體做什么,他們應當有足夠的控制權和自主權。最后,請記住這一點:

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

          問題總是會出現的

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

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

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

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

          需要始終牢記的事情

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

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

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

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

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

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

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

          結語

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

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

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


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

           



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

          濤濤

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

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

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

          全面易懂!寫給新手的信息架構設計指南

          濤濤


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

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


          信息架構作為一個產品的骨架,是產品非常重要的一部分,它決定了一個產品

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

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

          一、信息架構的概念

          讓我們來看一個例子:

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

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

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

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

          二、為何需要信息架構設計

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

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

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

          再看一組反例:

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

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

          一款信息架構良好的產品必然遵循以下兩個標準:

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

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

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

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

          因為你的實際產品功能可能有這么多:

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

          三、如何設計信息架構

          合理的信息架構設計需要考慮5個步驟:

          下面我來分步講解一下。

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

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

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

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

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

          你要考慮清楚4個問題:

          用戶通常用你的產品做什么?

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

          用戶用這類產品最關心什么?

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

          用戶有哪些思維定式?

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

          用戶用什么類似的產品?

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

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

          2. 了解業務

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

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

          3. 調研競品的信息架構

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

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

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

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

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

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

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

          4. 卡片分類

          卡片分類法是我們工作中常用到的一種方法,它可以在用戶側再一次印證和檢測我們的產品信息架構。

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

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

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

          卡片分類法最終會產出這樣的一個樹形圖:

          5. 產出信息架構

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

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

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


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


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

          濤濤

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

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

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

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

          目錄:

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

          什么是設計點?

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

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

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

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

          我們通過定義業務目標和聚焦設計目標,來最終實現設計的產出。

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

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

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

          1. 切入模型

          根據工具模型我們從業務目標出發,去定義設計目標從而得出設計方向。

          2. 明確業務訴求

          3. 得出業務目標

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

          4. 視覺推導

          5. 案例

          二、從用戶行為切入

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

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

          切入模型:

          三、從設計方法上切入

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

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

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

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

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

          視覺推導:

          案例:

          2. 提取情感化設計點

          情感化設計3要素:

          案例:

          3. 提取游戲化設計點

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

          案例:

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

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

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

          濤濤

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

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

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

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

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

          1. 建網格

          建立網格系統,萬丈高樓平地起,要做一款扎實的字體離不開網格系統的規范。

          2. 拆字體

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

          3. 繪筆畫

          將拆分出的筆畫用橫線和豎線在網格系統里進行筆畫重繪,此時不要做細節,撇、捺和點根據自身走向和結構特點也歸屬為橫豎線。

          4. 綁骨架

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

          5. 粗與細

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

          6. 解與構

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

          7. 取與舍

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

          8. 磨細節

          為了讓字體看起來更加舒適,我們將字體的拐角做圓,做圓角的同時也要根據網格系統來調整圓的度數。

          9. 去感受

          打磨整體字體,繼續刻畫細節。

          注意:在一組字里,每個單字的結構都存在差異,適當調整字體內部的比例,形成感官上舒適的筆勢,對保持視覺上大小一致很重要。漢字字體類型繁多,但是如果我們用幾何法則來劃分字體類型其實大致可以歸納為三種:方形,圓形和三角形,從面積上來看方形和圓形的面積最大,三角形次之,所以我們為了保持字重大小的一致性需要調整他們之間的大小比例,做到大小均勻,筆畫一致,結構嚴謹和間隙適中。

          △ 圖源:ElethomHunter

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

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

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

          如何讓界面任務流程更清晰 ?向導式設計了解下

          濤濤

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

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

          一、向導式設計是什么?

          軟件界面設計中的「向導式界面」這個術語源自英語中的「Wizard」一詞。意思為「男巫、奇才」的意思;延伸意為「向導」。向導,顧名思義,就是能帶領或指引別人到達目的地的人。在實際使用中,這種交互方式的確像一個向導一樣,一步步地引領用戶向前,把復雜的任務進行拆解并有步驟地完成。

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

          二、向導式設計的主要作用

          1. 引導新手操作

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

          2. 縱觀信息全局

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

          3. 簡化操作任務

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

          4. 較少操作決策

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

          三、向導式設計的使用場景

          一般情況下,標準向導步驟條的使用場景為:2-5 步比較合適。< 2 步,> 10步,使用是不合適的。因為 < 2 步沒必要;> 10 步太夸張,會嚇到用戶,本能認為你的產品使用過于繁瑣,拒絕嘗試和使用。

          四、向導式設計的類型

          • 手風琴向導
          • 標準向導
          • 橫向標準向導
          • 縱向標準向導
          • 彈框向導
          • Tab 欄向導
          • 標簽向導

          五、向導設計類型案例場景分析

          1. 手風琴向導

          手風琴向導式設計類型,一般適用于 2B 類后臺業務數據較多,任務指向性相對明確,流程基本固定。例如用戶幫助文檔以及 Q&A 的場景; PC 端頁面的注冊引導;電商網站的購物支付等流程。

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

          2. 標準向導 – 橫向向導

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

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

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

          除了上面標準的組件庫中常有的步驟條樣式,還有以下的常用樣式,例如電商類購物和支付的場景,除了對已完成的狀態進行確認顯示,色塊箭頭的設計,向導指引性更強。

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

          除了上面相對比較簡單場景的步驟條,其實在 2B 業務中還有相對比較復雜的步驟條的設計,具體對應的是復雜的業務場景,例如覆蓋多產品線參與,多角色審批,包含父子步驟審批的業務場景,簡單常規的標準向導式設計是不能夠滿足業務場景的,需要對簡化版的橫向向導繼續深入拓展和優化。

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

          3. 標準向導 – 縱向向導

          縱向標準向導也可稱為縱向步驟條向導,主要使用場景為內容數據較多,需要分頁/板塊展現的場景,B端業務使用的場景較多;縱向向導設計陳列在左側的目的也為了能對大量數據進行快速篩選和定位,同時此類數據之間無需進行對比查看,如下圖:

          4. 彈出框向導

          彈出框向導設計主要使用的場景為注冊頁/登錄頁/輕量任務操作頁,都在彈出框內,步驟較少,能夠快速完成。如下圖:

          5. Tab 欄向導

          Tab 欄向導其實是Tab欄+步驟條元素,組建成的一個新的橫向向導模式,它的主要使用場景相對來說比較靈活,可以用在登錄和注冊頁等輕量頁面場景中,也可用在有固定任務流程的詳情頁面中,不過一般 PC 端的詳情頁會采用單獨的 Tab 和步驟條展示,為讓信息層級更清晰明確。

          6. 標簽向導

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

          六、向導設計中需要注意的問題

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

          每一步驟都需定義清楚,明確用戶當前所在的進度節點,清晰展現此刻具體步驟及狀態;

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

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

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

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

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

          濤濤

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


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

          一、彈窗

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

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

          二、無限滾動

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

          △ 圖片來源:Geo Law

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

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

          正如 Dmitry Fadeyev 指出:

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

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

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

          1. 無限滾動的優點

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

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

          2. 無限滾動的缺點

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

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

          網站右側的滾動條變得無關緊要,反映不出數據量,當你以為快要接近底部,引誘你繼續向下滾動,結果更多的內容又呈現出來。

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

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

          3. 使用無限滾動的建議

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

          三、推送通知

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

          每天用戶都會被沒用的推送轟炸,分散日?;顒拥淖⒁饬Γ⒏械綈阑?。

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

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

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

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

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

          適當的時間。尊重當地的時間,不要在用戶睡眠的時候發送通知,比如國際化的 APP 針對不同的地區調整推送時間。Andrew Chen 收集了一些數據顯示推送打開率在下午6點后更高,當用戶參與度最高的時候,在下午6-8點時發送推送通知。

          △ 圖片來源:Andrew Chen和 Leanplum

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

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

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


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

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

          濤濤

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

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

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


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


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


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


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


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



          案例1:即時回復


          使用切換開關時,


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


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


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


          Image title

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


          案例2:設置確認


          使用復選框時,


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


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


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


          Image title

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


          案例3:多項選擇


          使用復選框時,


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


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


          Image title

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


          案例4:不確定狀態


          使用復選框時,


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


          Image title

          使用復選框最好地顯示不確定狀態


          案例5:清晰的視覺狀態


          使用復選框時,


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


          2. 需要提供明確的勾選狀態或未勾選狀態。


          Image title

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


          案例6:相關項目


          使用復選框時,


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


          Image title

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


          使用時切換開關時,


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


          Image title

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


          案例7:單選項


          使用復選框時,


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


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


          Image title

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


          使用切換開關時,


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


          Image title

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


          結論


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



          參考文獻


          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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計  包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務。

           

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

          濤濤


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

          前幾天帶大家學習了《牢記這9個排版設計要點,領導都無話可說了…》,今天給大家帶來排版設計要點第二彈。



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


          搞定頁面視覺風格統一性,看這篇文章就夠了!

          濤濤

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

          7月份的時候,有一位面粉問到了我關于統一店鋪視覺風格的問題,我說等有機會了專門寫篇文章做分享,因為一兩句話根本就說不清。

          但是,今天我并不是專門只針對某個店鋪做視覺統一的設計分享,而是想從全局的角度去給大家闡述這個問題,畢竟,你得知道自己為什么需要做視覺統一,你才可能做好視覺統一,所以這個問題就不單單只是指店鋪了,而是關于品牌與用戶之間的問題。

          因為不管是店鋪也好,平臺也好,他們其實都是為賣貨服務的,它們與品牌產品之間其實都是合作關系,最終其實都是要鏈接到用戶身上的,而設計師要做的,歸根結底都是處理好它們與用戶之間的關系,幫助達成交易。

          所以我將要分享的關于視覺統一的方法,就不單止是適用于店鋪了,而是品牌、平臺、店鋪都適合的。

          按照慣例,我還是先給大家列出一個提綱,方便大家理解:

          • 為什么需要統一視覺風格?
          • 統一視覺風格的方法有哪些?
          • 統一視覺風格的注意事項及總結

          接下來我就逐條展開給大家說一下這其中的奧秘吧!

          一、為什么需要統一視覺風格?

          當我們提到統一視覺風格這幾個字,不知道大家能聯想到什么?或者能聯想到什么畫面什么公司什么產品呢?在回答這些問題之前,我還是先給大家舉一些例子也許你就明白了。

          比如前幾天我無意中打開了淘寶app,然后剛好看到了2018年淘寶新勢力周的一系列賣場頁面:

          大家知道像淘寶天貓京東這樣的平臺,每年各種賣場促銷活動是很多的,而且每一場活動都需要容納成千上萬的商家和數以萬計的商品,但是,所有這些東西都卻只是通過一塊液晶顯示屏展現在消費者面前,那么這時候就是我們設計師發揮作用的時候啦。

          這時候設計師需要做的事情就包括以下幾個方面:

          • 要保證活動頁面里能把所有東西都容納進去;
          • 要保證頁面是方便顧客瀏覽的,所以要有規律可循;
          • 要保證頁面是可以吸引顧客一直逛下去的,所以頁面有規律的同時又要有所差異,視覺上不枯燥,不然會視覺疲勞;
          • 要在顧客心里和腦袋里建立某種印象,找到存在感,以免被顧客遺忘;
          • 既要保證平臺活動整體的調性和諧性,又要為不同的商家提供最恰當的展示機會,所以視覺表現形式要合理;
          • ……

          總而言之就是要權衡平臺、商家、顧客三者之間的關系和利益:顧客買的爽,商家賣的爽,平臺名利雙收。

          那么這時候保持頁面視覺統一就很有必要了,因為視覺統一就有以下非常重要的幾點作用:

          1. 強化品牌或事件在用戶心中的印象

          因為幾乎所有的品牌都需要做的一件事情就是占領用戶心智,就是要讓用戶在眾多的品牌選擇里有自己的一席之地,不要把自己遺忘了,所以它需要不斷的出現,保持存在感。

          一個活動每年去做,一個電影每年都出續集,一個產品每年都會出不同的系列等等,都是同一個道理,都是在強化自己在用戶心目中的印象,保持存在感。

          提到這個,我平時每次搞活動都會提醒大家不要經常換頭像或微信昵稱,我讓大家多來留言其實就是這個道理,因為我每天要面對的那么多人的頭像和名字,如果你長期不換頭像并且經常來留言,那我肯定會記得你;但如果你經常換頭像,并且留言次數還少,那我鐵定就不記得你了,因為你沒有強化一個符號在我的腦海里啊,明白了吧。

          2. 讓事件變得有序有規律可循

          就像我們辦運動會,不同的隊穿不同的衣服、喊不同的口號等等,即便是隊里的人走散了,你看一下隊服或對方喊的口號你就能辨別出是自己人還是別人了是吧。

          再比如你去超市貨架上拿飲料,正是因為這種視覺統一的作用,所以你才能很好的辨認出自己要買的品牌產品,而不至于拿錯了,反過來對于品牌也一樣,自己內部的產品之間是有統一的視覺形象的,同時又是跟其他品牌相區分開來的,所以才可以保證顧客不買錯。

          這些道理運用到頁面設計上也是一樣的,讓顧客方便逛,同時別逛錯了地方。

          3. 提高相關人員的可執行性

          因為像這種大型的活動,需要大量的人力投入,就拿設計師來說,一般都是某個主設計師出來一個設計方案,然后這個方案不僅要能達到以上提到的要求,還必須要是能保證其他設計師能夠以這個設計方案的模版,去執行剩余的幾十上百個頁面,工作量非常之大。

          二、統一視覺風格的方法有哪些?

          前面我們講到了統一視覺風格和形象的必要性和重要性,那么接下來就是大家最關心的如何統一視覺形象的問題了,所以我依舊會從好幾個方面以舉例的方式給大家做講解,你就明白了。

          不過在這之前,我還是拿一張圖給大家看,還是淘寶新勢力的這張圖:

          你在這個畫面里看到了什么?這個視覺畫面里都包含了哪些東西?

          嗯,我看到了模特、文字、圖案、各種顏色,還有布局、排版、以及所有上面的內容匯聚在一起所組成的一種風格。

          那所謂統一頁面的視覺風格,也就是說只要保證以上所有提到的這些東西,我在另外的頁面里也至少能找到一項是類似的,那我們就很容易將它們視為是具有共通性的頁面了,也就達到了視覺風格統一的目的。

          以下面這幾個淘寶新勢力分會場的頁面為例:

          你應該注意到了,這些頁面雖然顏色不一樣,但整體看視覺卻非常統一,同時細看又有些差別,其原因就在于以下幾個方面:

          • 不同的頁面對應的色相不同,但是明度和飽和度是近似的;
          • 不同的頁面對應的文案不同,但是文案的字體樣式、布局排版是一樣的;
          • 不同的頁面對應的氛圍點綴元素不同,但是氛圍元素的風格、質感、手法等等是類似的;
          • 不同的頁面對應的點綴元素不同,但是每一個頁面里的點綴元素都是跟相應的主題、模特、文案等等相呼應的。

          所以你才會有這些頁面具有統一的視覺風格的印象,包括其他會場的頁面,雖然做了一些小調整,但是依然可以看得出來是統一的視覺風格:

          因為這里運用到了跟上面同樣的原理。

          不過這種手繪風格與模特相結合的設計形式我以前也給大家分析過,我這里就不深入舉例了,大家可以看看圣保羅藝術家 Ana Strumpf 為很多時尚雜志所做的插畫封面就能有所體會:

          這種手法給人俏皮、時尚、新潮的感覺,非常適合追求趣味個性而又不失品味的心態年輕的群體,所以這一次的淘寶新勢力周大概也是出于這種新潮人群定位考量,才會做這種形式的設計吧。

          而且這種扁平質感半插畫性質的設計形式幾乎是很難過時的,非常前衛和耐看。

          所以到這里你應該就好理解了,一般來說,我們有以下5個途徑可以達到統一視覺風格的途徑。

          1. 提煉某種風格,重復使用

          比如你看今天淘寶新勢力的一些會場頁面,視覺風格就非常統一,一眼就看出是實體模特+手繪圖形相結合的風格形式,在模特臉部做一些圖案輪廓線,然后模特周圍點綴一些手繪圖案做氛圍,有點達達主義的感覺。

          2. 建立某種品牌色,重復使用

          當我們重復看到某種顏色跟某個品牌或產品同時出現,時間久了就會自然而然的把這個顏色和品牌聯系在一起,從而產生條件反射,只要看到某個顏色立馬就會想到這個品牌,只要聽到這個品牌的名字腦海里就會出現某種顏色。

          這其實就是通過建立某種品牌色達到視覺風格統一的目的從而讓品牌在用戶心里建立起了這種色彩印象。

          比如蒂芙尼藍:

          所以,任何頁面,任何場所,任何產品上只要出現了這個蒂芙尼藍色,用戶都會默認他們是相關聯的:

          再比如,可口可樂紅:

          當然了,色彩種類那么多,有的品牌或店鋪的品牌色并不是單一的,而是多彩的,這都沒有什么限定。

          那這個如果是運用到頁面設計或 Banner 設計里的話,這種品牌色是一定都需要出現在畫面里的,至于色彩比例就因需要而定了,而且今后只需要出現這種顏色,就能反過來達到視覺統一的目的。

          3. 提煉某種視覺元素,重復使用

          所謂視覺元素,其實就是指一切你能看到的想到的元素,所以這里的視覺元素也是指多個方面的,比如某種圖案圖形、某個物件、某個文字、產品、模特、logo 等等其實都算是視覺元素。

          那說到視覺元素的運用,我腦海里印象比較深刻的2個品牌就是初語和天貓,前者是店鋪,后者是平臺。

          我們可以看看品牌升級以前的初語,它有一個讓人印象非常深刻的視覺元素,就是她的模特和眼部的妝容:

          所有的模特都保持了一致的妝容特點,氣質也是類似的,當然你也會看到很多他的設計都是會與藝術名畫相結合,這些都是它的特點,并且加以充實用,就給人建立了很深刻的印象,你只要看到這種模特妝容或者畫面,你就知道:「噢沒錯了,這是初語」。

          那天貓也是一樣的,每年雙十一這個天貓頭的元素就會以各種形式露面,而且不止是在雙十一,可以說是相當強大的視覺符號了,你想忘都忘不掉它:

          2017年天貓雙十一宣傳海報

          △ Budweiser 百威

          △ GUERLAIN 嬌蘭

          △ Beats

          這種通過某種視覺符號來統一視覺形象,重復使用從而加深用戶印象的方式在很多其他地方都有用到,比如每一個蘋果手機,每一次開機,都會出現同樣的開機畫面:白底+黑色的蘋果 logo。

          4. 打造品牌專屬的IP或寵物形象,并重復使用

          這就跟品牌給自己找了個的代言人一樣的效果,只要這個形象出現了,你就知道這個是xxx品牌。

          比如店鋪,三只松鼠就是這么干的:幾乎所有的頁面里都會出現三只松鼠。

          比如平臺,京東有狗,天貓有貓,蘇寧也有獅子等等,電商界儼然是一個動物世界。

          再比如珠寶品牌,卡地亞Cartier 有獵豹:

          這只獵豹經常出現在各種品牌宣傳廣告里,或者制作成各種首飾,用戶看到獵豹就會想到卡地亞。

          5. 提煉某一句口號,重復使用

          既然我們前面提到了視覺元素,那么文案或口號其實也是畫面里的其中一種視覺元素,所以我們再以2017年天貓雙十一宣傳海報舉例:

          △ Budweiser 百威

          △ GUERLAIN 嬌蘭

          △ Beats

          這里面的「xxx祝你雙11快樂」 「天貓雙11全球購狂歡節」等等口號文案,重復使用,其實就起到了這種畫面視覺統一的作用。

          而且這種方式也在很多地方有運用到啦,比如你看的很多動漫、電視劇,總會重復出現一些臺詞,嗯,說到這里,我想到了小時候看的一個動畫片《寵物小精靈》,每集火箭隊出場臺詞都是這幾句:

          然后每集結束的時候總會有那么一幕,喵喵被拋到空中然后喊出一句臺詞:「我們還會回來噠~」。

          你看這種重復口號的威力多么可怕啊,一二十年了還讓用戶印象深刻呢。

          不過,其實最后列舉的這三點其實都可以稱作是視覺元素的重復使用啦,至于原因我也在前面作了解釋,而且以上所有的方式其實都是可以結合運用的,并不是孤立存在的。

          還有,大家注意到了嗎?我在每一條后面都加了4個字「重復使用」,因為就算你有了自己特定的視覺元素、有屬于自己的寵物形象、有自己的品牌色、有自己的風格等等,但是你壓根就不露面,你還特別低調藏著掖著不展示自己,那誰還記得你啊。

          說到這個,我想到了異地戀之所以容易失敗,不也是差不多道理嗎?你和男/女朋友三五年不見面沒有關系,沒法手拉手親親嘴也沒有關系,但是如果你們壓根就不聯系,不出現在彼此的視線里,那感情自然會淡的呀,等于是白白給了別人可乘之機。

          所以我一直都覺得品牌和用戶之間其實也是一樣的道理,就是在「談戀愛」,而不是做生意,至于你們之間是談的什么類型的戀愛,那就看自己本事了。

          總結

          之所以我們需要做視覺統一,其實就是為了強化我們在用戶心理的印象,讓他們記住我們,記住我們是很有規范的,靠譜的,可信賴的品牌印象等等,并且還要重復的出現在用戶的視野里,那怎么出現呢?方法就在我上面列舉的幾條內容里啦。

          當然,你也得控制一個度,不要過份的運用這些方法,不然會招致用戶反感的。

          想想有的男孩子可以成功討女孩子歡心,而有的卻被女孩子嫌棄的不行,知道原因了嗎?道理都是一樣的啊。

          你看下面這些世界杯期間的廣告,畫面 low,口號 low,重復次數又很多,用戶記住是記住你了,但真的挺煩的。

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

          日歷

          鏈接

          個人資料

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

          存檔

          亚洲va欧美va天堂v国产综合