<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>

          首頁

          設計的法則【交互篇】

          ui設計分享達人

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

          讓設計更有說服力

          目錄:


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

          交互設計到底是什么?

          用心設計

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

           

          當別人問你什么是交互設計時,你又一臉懵逼了。本篇文章就來好好聊聊什么是交互設計


          工作了很多年,卻依然說不出何為交互設計。一說道理,大家都懂,但是當別人問你什么是交互設計時,你又一臉懵逼了。為什么會這樣呢?因為我們沒有自己去總結,沒有形成自己的知識庫。

          交互設計,它由IDEO的一位創始人比爾?莫格里奇在1984年一次設計會議上提出,他一開始給它命名為“軟面(Soft Face)”,由于這個名字容易讓人想起和當時流行的玩具“椰菜娃娃(Cabbage Patch doll)”,他后來把它更名為“Interaction Design”――交互設計。

          首先,我們來看看權威方對交互設計的定義:

          交互設計協會(The Interaction Design Association (IxDA))解釋如下:

          交互設計師以創造有用且實用的產品及服務為宗旨。以用戶為中心作為設計的基本原理,交互設計的實際操作必須建立在對實際用戶的了解之上:包括他們的目標、任務、體驗、需求等等。以用戶為中心的角度出發,同時努力平衡用戶需求、商業發展目標和科技發展水平之間的關系,交互設計師為復雜的設計挑戰提供解決方法,同時定義和發展新的交互產品和服務。

           

          百度定義如下:

          交互設計(英文Interaction Design, 縮寫IXD),是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系,以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析,關注以人為本的用戶需求。

           

          唐納德諾曼給出的定義:

          重點關注人與技術的互動。目標是增強人們理解可以做什么,正在發生什么,以及已經發生了什么。交互設計借鑒了心理學、設計、藝術和情感等基本原則來保證用戶得到積極的、愉悅的體驗。

           

          首先要知道什么是交互

          交互,及溝通交流,發生互動關系。比如人和人之間的交互就比較好理解,最經典的一幕可以用孫悟空智斗金角大王、銀角大王。金角大王說:孫行者,我叫你一聲你敢答應嗎?然后,金角大王就叫:孫行者。孫悟空回答:爺爺在此。就這樣,孫悟空就被收進去了。這就是一個簡單的交互。

          再比如,我們每天上班,到公司和同事打招呼。你說:“早上好呀”,同事回答“早”。這也是一個常見的交流互動。

           



           

          人和人之間的交互比較好理解,那人和機器呢?其實也是非常好理解的。我們都忘不了微信推出的搖一搖功能,打開搖一搖,搖動手機,就會出現“咔咔”的聲音,然后加載,搜尋出一個和你同時在搖的人。其實,我們和任何機器之間的發生互動關系,都是屬于交互。往更廣的意義上說,如果失去了交互,地球將不再運轉,將毫無生機?,F在,智能時代已經到來,我們除了研究人和人、機器、產品、環境、服務、系統等之間的關系,還要研究機

          器和人、機器、產品、環境、服務、系統之間的關系。

           



           

          總之,當人(或機器)和事物(無論是人、機器、產品、服務、系統、環境等等)發生雙向的信息交流和互動,就是一種交互行為。

           



           

          其次,我們來聊聊設計

          聊設計之前,我們要先說說藝術,原研哉老師對設計和藝術的描述非常精辟,下面就引用他的話。

           


           

          藝術說到底是個人意愿對社會的一種表達,其起源帶有非常個人化的性質,所以只有藝術家自己才知道其作品的來源。這種玄虛性使得藝術“很酷”。當然,解讀藝術家生成的表達有多種方式。非藝術家通過對藝術的有趣闡釋與藝術互動,欣賞之,評論之,在展覽中對藝術進行再創作,或把藝術當做一種知識資源使用。

          而設計,則基本上不是一種自我表達,它源于社會。設計的實質在于發現一個很多人都遇到的問題,然后試著去解決的過程。由于問題的根源在社會內部,除了能從設計師的視角看問題外,每個人都能理解解決問題的方案和過程。設計就是感染,因為其過程所創造的啟發,是基于人類在普遍價值和精神上的共鳴。(來源,原研哉,設計中的設計)

          通過上述的描述,我們不難發現,設計主要表現在發現問題–解決問題。而交互設計就是發現和解決人(或機器)和事物(包括人、機器、產品、服務、系統、環境等等)之間的互動關系問題。

          所以說,交互設計的范圍是非常廣的,和各個學科都有涉及,我們可以通過下面的圖來看看交互設計和各個領域之間的關系。

           



           

          那交互設計主要是做什么工作呢?

          作為交互設計師,也應該好好問問自己這個問題。通常,外界的人就認為我們就是畫畫原型,或者有時候畫畫UI,而我們通常就是這么做的,所以也不得不讓人們這么想。而現在大多數交互設計就是指移動端、網頁端的交互設計。

          那么交互設計的核心競爭力是什么呢?對于很多公司來說,其實是沒有交互設計這個崗位的,交互的工作就由產品經理和UI設計師各自分擔了?,F在產品經理基本都掌握了原型技能,而且產品經理通常在做需求移交的時候已經把交互表達的很清楚了。而且很多UI設計師能力較強一點的,在做設計的時候都會考慮到交互。如果交互設計師在公司就只做做原型,那么,你就會被取代。

          那么交互設計的工作內容到底包含哪些呢?《用戶體驗要素》這本書很好的說明了這些內容。本書把用戶體驗要素分五個層級:戰略層、范圍層、結構層、框架層、表現層。不同層級,表示著你的不同能力,引用一下大眾點評高級交互設計經理范怡的一張圖,比較形象的描繪了交互設計的能力范疇和價值。

           



           

          怎么樣,看到這些是不是有一點點覺悟了呢。如果想做好一名交互設計師,就應該擴大自己的能力范圍,提升自身價值。怎樣做好交互設計呢?如何運用設計原理來做交互設計呢,我們下篇來聊聊唐納德羅曼老師書里的交互設計6要素:示能、意符、約束、映射、反饋、概念模型。

           

          原文地址:站酷
          作者:Luyeelin

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          用一個實戰案例,告訴你如何處理復雜需求!

          資深UI設計者

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

          新人設計師可能都會遇到這樣的問題:在設計一個復雜需求的時候,各種場景、可能性在腦中來回亂竄,常常覺得邏輯不夠嚴密。設計完成后,又被各方質疑,提出各種異常場景,導致頻繁修改,縫縫補補。本文將和大家分享下解決以上問題的小方法。

          本文就以「企業內部權限分配平臺」的需求為案例,整理了之前處理復雜需求的一些思路。講講在交互設計的過程中,如何避免以上兩種情況,讓我們的工作更好地服務用戶,體現價值。

          理解需求

          首先,我想任何設計師在設計產品的時候第一步都是理解需求,這包括了需求的目標背景、角色場景、產品邏輯等,不同的需求側重點會不同。以「企業內部權限分配平臺」的需求為例,目標背景和角色都比較簡單,但是一般涉及權限的產品,背后的邏輯就會很復雜,場景情況也很多。

          和產品溝通,和用戶溝通,甚至網上找資料,都是理解需求的一些好方法。比如本次設計的需求是關于權限分配,這一篇《網易高手:角色權限設計的100種解法》的文章,就很好地幫助我理解權限分配背后的設計邏輯。

          包括理解需求內的專有名詞,為其建立特殊的標識樣式,也是幫助自己、團隊、用戶更好地理解產品需求的一種方式。

          △ 名詞解釋

          需求結構化

          我們在最初思考需求的時候,肯定會從場景/問題出發,思考怎么去解決這個問題,是以「人」的思維來思考這個問題的,這是必然的,也是正確的。但此時我們的思維是散點式的,例如當我們想到權限分配的需求時,可能會說:這次我們要新增一個「崗位」的概念,讓權限和崗位綁定,不要和人綁定。對了,還有人員離職這個問題困擾業務很久了,我們這次要在人員離職的時候進行……

          所以,在最初的需求框架確定后,我得到的是這樣兩段文字:

          看上去已經非常全面了,但由于我們是散點式地收集需求,很多時候可能還是會有遺漏,或者說錯誤關聯了內在邏輯,導致一些邏輯沖突、漏洞。

          此時,我們需要將我們的思維從「散點式收集」轉為「結構化梳理」。從需求說明里抽絲剝繭,我們可以得到:

          • 用戶角色有三類:超級管理員、業務管理員、HR;
          • 操作對象是:部門、崗位、人員、權限包;
          • 可執行的操作包括傳統的:增、刪、改、查,還有和本次業務相關的「關聯」,即權限的賦予。

          各個對象之間的關系又是怎樣呢?我們把所有的對象兩兩組合,再把沒有關系的刪掉。

          也就是:

          • 在部門可以下設立崗位,崗位必須從屬部門;
          • 人員必須從屬某一部門;
          • 人員必須從屬某一崗位;
          • 權限包可以賦予給部門;
          • 權限包可以賦予給崗位;
          • 人員和權限包沒有任何直接關聯,這也是本次權限分配的核心。

          這個具體的業務邏輯并不重要,不需要去費心理解,重要的是這樣一種結構化思考的方法,可以應用在后續各種各樣的設計中。

          對象間的關聯,再和我們剛才梳理的人物、操作相結合,就可以還原成一系列的需求描述:「角色」可以在「A對象」下「操作」「B對象」,例如:超級管理員可以在部門下新增崗位。

          至此,我們已經可以建立「需求→功能對應表」:

          其中,紅色部分都是在之前散點式的需求羅列中沒有考慮到的功能點,通過結構化的梳理,我們可以提前把它們都一一補齊。

          這個過程可以減少我們最小顆粒功能點的遺漏,避免在做完大部分設計后,突然發現遺漏了某個功能,任務時間點又已經到了,慌慌忙忙地加功能,就可能會影響整體的設計思路和框架。

          設計的減法:只考慮主流程

          完成了功能點的整理歸納后,就可以開始我們的界面設計了。在最初的界面設計中,這三點需要做減法:

          • 優先進行框架設計,不要在一開始就考慮細節;
          • 優先完成主流程,再考慮異常場景;
          • 按照功能對應表將各個模塊獨立設計完成,再添加快捷操作。

          當然,可以先把可能存在的異常、細節都記錄下來,以便后續補充。

          比如,在人員權限分配的界面結構中,分為三個大模塊:

          在有了界面框架和功能對應表后,我們做設計會變得比較簡單,按照之前整理的「需求→功能對應表」,把每個小顆粒的功能細節填充到界面框架內即可。

          設計的加法:回歸場景,考慮細節

          當主流程設計完畢之后,我們就要開始做加法了,在之前,我們一直是用一種純理性的視角來完成我們的設計,保持純理性的設計會有兩個問題:

          • 很多業務場景靠邏輯思維是無法想象的,必須設身處地站在用戶的角度去思考,才能理解場景,進而補充可能的體驗細節。
          • 純理性的設計,可能在功能點上是完整的,但在用戶體驗上是缺失的。

          例如,純從邏輯思維角度你能想到在一個企業里有人是沒有任何部門歸屬的嗎?然而現實中就存在這樣的情況──外包人員。不結合實際場景,我們也不知道用戶一天需要處理多少次重復操作,目前的設計對他是否足夠便捷。

          作為一個企業內部權限分配平臺,我們可以把部?、崗位、人員等對象作為初始線索,站在不同的用戶使用角度,沿著線索去全面地思考場景,修改功能。有一些實在難以理解的業務,找用戶聊聊也是一個好方法。

          很快,我們就找到了下面這些特殊場景。

          1. 人員變動

          • 新增人員流程:找到新加入部門→找到崗位→添加人,由于企業內部還有一個最基礎的 OA 系統,那么HR是否會需要重復操作,一個人員在不同平臺添加兩次?是否增加了他的工作成本?
          • 人員變動頻繁,是否容易遺忘?

          處理方法:行政架構自動同步,紅點待辦。

          我們與 OA 系統數據打通,自動形成四類待辦紅點:人員新增、人員離職、行政部門新增、行政部門刪除。

          這樣 HR 就不需要重復做新人員的添加操作,只需要業務管理員把 OA 內無法覆蓋的人員崗位設定好就可以,也不會出現遺漏的情況。

          2. 高管兼職

          例如某位高管:本身為 A 部門負責人,臨時兼任 B 部門負責人,那么當他不再負責 B 部門時,該如何處理他的崗位?離職?轉崗?似乎都不合適。

          處理方法:新增崗位移除功能。

          3. 外包人員

          了解到現實情況中,外包人員是沒有部門歸屬的,但是實際上他們肯定也有自己負責的業務范圍和崗位,在初始化時如何安置沒有部門的人?

          處理方法:新增一個部門,叫做「無崗位人員」,并且標紅作為待辦,提醒操作者去處理這些「無崗位人員」。

          4. 人員離職/轉崗

          在進行功能設計整合時,我考慮是否「人員離職」應該叫「人員刪除」更系統化?是否可以直接整合為一個「人員編輯」的功能,將離職、轉崗的操作合并?(實際上這2個功能操作起來確實比較相似)

          處理方法:最終我依然保留了「人員離職」、「人員轉崗」的功能,因為這樣更場景化,用戶清晰地知道自己當前該操作什么。

          目前對一個人進行離職操作的路徑是:找到原部門→找到崗位→找到人→處理離職,而我們的企業有 2500+ 員工,對于離職操作者 HR 來說,這個路徑是否現實?是否快捷?

          處理方法:新增搜索功能,直接搜索人名→處理離職,這個功能也方便了其他找人的場景。

          5. 更多

          諸如此類的考慮還有很多,例如新建部門的時候是否會有空部門,在企業進行組織架構重組時是否會有大批量的人員、組織變動,進而需要有批量操作等等。找到最初的線索,站在用戶的角度沿著線索思考,進行全局掃描,就會發現很多需要做加法的地方,發現的方式可以是觀察、訪談、思考等任何方式。

          在已經保證了主流程的簡潔、清晰后,再用全局掃描的方式去搜集特殊場景,給我們的設計做加法,可以保證我們整體的設計框架是清晰可用的,而特殊場景是散落在骨干上的各種小分支。

          如果我們可以做到,對所有的主干場景、分支場景了然于心,并且有自己的優先級考慮,那么對于項目成員、用戶提出的質疑,我們也有足夠的理由來證明自己設計的合理性。

          當然,場景基本考慮全面后,還有最后一步,就是統一交互,完善細節,這一步也是設計上的加法。

          總結

          以上,就是一個針對復雜需求的加減設計法案例,總結來說有四個大步驟:

          • 從實際場景出發,發現問題,理解需求;
          • 需求結構化:把本源的場景、需求結構化成功能對應表;
          • 設計的減法:先解決最根本的問題;
          • 設計的加法:回歸場景,全面考慮。

          所以,交互設計師是需要理性和感性的結合,要有抽絲剝繭,提煉總結的能力,也要有貼近用戶關注情感的細膩。把自己的工作規范化,減少無效付出,也是我們的一種能力。希望本篇文章對新人設計師有一些幫助,也歡迎大家一起探討交流。

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

          怎樣回應不好的設計建議?

          用心設計

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

           

          一位高管在餐巾紙上畫了一個新的主頁原型來演示她使用和喜歡的網站。一個開發人員晚上在公司呆到很晚,并添加了一個他認為很酷的新功能?;蛘弋a品經理堅持采用與競爭對手相同的設計模式。

          如果這些故事聽起來很熟悉,那么你并不孤單。大多數設計師都會收到這種“幫助”。

          你的第一直覺可能是以平淡無奇的方式回應“不”。但是,一個用戶體驗建議是否來自一個關鍵的利益相關者或項目周邊的人,應該仔細處理。在您做出反應之前,請考慮以下步驟:

          你的第一反應可能是利索地對對方說“不”。但是,無論UX建議是來自關鍵的利益相關者還是項目的外圍人員,都應該仔細地處理它。在你做出回應之前,考慮以下步驟:

          一、消除主觀意識

          第一步是將消除自己的主觀意識;你可能擁有豐富的設計經驗,但不排除會有更好的想法。不要僅僅因為它是在PowerPoint文件而不是Photoshop原型中呈現,所以不要認為一個想法是壞的。

          觀點的多樣性可以更有效的構思:即使提出建議的人缺乏設計知識,他們可能會有不同的專業知識或經驗,并且可能會為您正在嘗試解決的問題帶來寶貴的不同視角。

          你如果像設計的上帝一樣扼殺了他人的創造力,最終會導致更糟糕的結果。

          二、聽他們的想法

          不加考慮就無情地否定別人的想法會阻礙人們在未來提出其他(有價值的)想法。即使一個想法對你來說顯然是錯誤的,但請記住,這個人也試圖讓設計變得更好,盡管他可能對“更好”的含義有不同的看法。通過允許他們:

          • 解釋這個想法
          • 解釋一下推理
          • 向您展示草圖或案列

          三、將建議與問題分開

          您可能會發現,雖然提出的解決方案并不合適,但需要解決的問題很重要。

          問問這個人他的設計理念想要達到什么目標。他在考慮不同的用戶群或業務需求嗎?繼續問“什么?”和“為什么?”(可能以不同的方式),直到你明白他考慮的問題及思考方式是什么。

          四、評估潛力

          確定建議和問題和好處。即使是一個壞主意也有一些好處。

          例如,在大屏幕版本的網站上使用漢堡包菜單不利于用戶輕松找到導航。這是不使用它的一個非常重要的原因。然而,桌面上的漢堡也有一個視覺上吸引人、整潔的標題。確認想法的成本和收益,以便更準確地評估權衡,可以通過不同的方法犧牲或實現哪些目標。

          考慮舉行設計原型會議(一個設計原型會議是短,會議期間,團隊成員迅速協作和草圖設計,以探索和分享的設計思路廣闊的多樣性),一起觀看用戶研究視頻,或舉辦其他類型的用戶體驗工作坊,以便這個想法的支持者可以繼續為這項想法解釋。

          五、花點時間進行研究和探索

          解釋一下,現在做一個設計決定意味著跳過構思、研究和用戶反饋。在理想的情況下,轉向設計思維過程,為所解決的問題找到正確的解決方案。

          根據您對目標用戶及其任務的了解程度,確定一個想法的優缺點可能需要:

          • 回顧以前的研究,看看這個想法是否已經過測試,結果是什么。
          • 搜索可用性指南和最佳實踐,以獲得類似想法的案列。
          • 在可用性測試或A / B測試中構建和測試該想法的原型。

          論證該想法的成本可能會由于潛在的用戶混淆,而導致的用戶體驗問題,以及諸如可能延遲發布其他更重要功能的開發計劃中斷等后勤問題。要評估大量想法,請使用對其進行優先級排序。

          六、如何說“不”

          如果您評估確定不應該實施該想法,您可以以積極的方式拒絕。

          承認其貢獻

          你不必著急全盤否定,但不要愚蠢的全去試一遍。找到您相信的有關他們建議的真實或有效的內容,并將其標注出來。這可能是這樣的:

          • “這種設計對于[角色類型]用戶可能有意義,因為他們需要[此功能]?!?
          • “聽起來你想要解決與重要用戶任務相關的[特定客戶投訴]?!?

          由于這些短語之后都會出現“but”,因此請確保您在所提出的觀點中是真實的。否則,說它們根本不值得。

          分享您的評估理由

          當人們投入足夠的時間來提出建議時,就是幫助他們學習更多關于用戶體驗的知識,并在整個團隊中傳播更多用戶體驗知識的理想時機。利用這些時間,交流你評估的理由,而不是僅僅告訴他們一個“不”。

          1. “這種設計對于[persona type]用戶可能有意義,因為他們需要[此功能]。但是我們的主要角色可能會有這個問題,因為[原因]?!?

          2. “聽起來你想要解決與重要用戶任務相關的[特定客戶投訴]。確定信息的優先順序可能會有所幫助,但要使其更大,顏色不同可能會導致橫幅失明。我想在第二天做一些調查,并提出一些替代解決方案的原型?!?

          考慮提供原型,案列,設計原則,模式或研究發現,以幫助他們理解為什么一個設計可能會導致問題,以及為什么不同的設計會更好地工作。把每一次互動都看作是灌輸貢獻者設計理念的機會——這是對未來的一種投資。

          七、對強權講真話

          當客戶或強大的同事發出特定請求(或要求)時,即使您給出了解釋,也很難說“不”。但這并不意味著你應該放棄自己的觀點并同意有害的建議。相反,與他們討論如何將想法背后的目標和資源結合在一起,而不必直接實施。

          合氣道是一種試圖和平解決沖突的武術,它依靠轉彎和樞軸等動作來融合對立的能量。同樣的原則可以應用于處理圍繞設計的沖突:與其直接拒絕一個想法,不如同意繼續探索這個建議,而不是明確地承諾實現它。

          建議召開一次工作會議,在會上你可以提出既能獲得同樣好處又能避免成本的選擇。例如,你可以說:

          • “我明白你想達到的目標。讓我把它與一些用戶體驗研究和模式進行比較,看看我們如何能夠在我們的約束條件下提供最好的解決方案來實現你的目標?!?
          • “我想看看我們的一些競爭對手是如何做到這一點的,并確保我們做得更好,或者至少做得一樣好?!?
          • “讓我們按照這些思路勾勒出一些東西,以及一些相關的替代方案,并獲得一些用戶反饋,這樣我們就能實現你的目標?!?

          八、通過尋求早期設計輸入來預防這些問題

          比優雅地轉移壞主意更好的方法是主動引導合作進入更有效的軌道。您可以通過在結構化的、戰略性的時間(例如預定的研討會)尋求輸入,最大限度地利用每個人的貢獻。這種主動的方法減少了在無法有效評估或合并意外更改請求時感到意外的可能性。

          九、結論

          每個人都對設計都自己的看法,這使得UX設計師的工作充滿挑戰。有些人總喜歡在界面中添加一些令人困惑的元素,比如原型、這會影響產品開發進度(可能包含UX迭代),以及那些喜歡設計(甚至認為自己是設計師)但缺乏任何真正的UX設計專業知識的人。

          但是,如果您與您的合作者進行深入交流,向他們灌輸設計理念并引導他們發揮自己的長處,這種“設計幫助”的多樣性將是一種寶貴的資產。

          最有成效的用戶體驗設計師在設計過程中會和許多人合作。他們與各種團隊成員和主要利益相關者討論業務目標,發展機會和約束,優先級,要求和設計理念。這些人來自許多職能團體;具有不同的UX專業知識,想法和思考。

          要想成為一名優秀的用戶體驗設計師并創作出優秀的設計作品,培養必要的溝通技巧來利用這些信息來源和輸入是必不可少的。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          這樣設計按鈕,會提高轉化率哦

          用心設計

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

           

          是能點還是不能點呢?”這是當用戶在面對一些操作按鈕時,大腦中所遲疑的問題。

          按鈕越多,做決定的時間就越長。用戶必須仔細看每個按鈕,才能確定哪個是他們需要的。對于按鈕的任何不確定性,都可能會導致他們不敢操作或誤操作。

          設計師可以把按鈕的優先級設計的更加直觀以減少這樣的情況發生。當用戶注意到哪個按鈕與他們的任務目標更契合時,就能幫助他們快速做出決定。這篇文章就是介紹一些這樣的設計技巧,通過簡單的調整使得按鈕變得更加直觀有效。

          1、根據閱讀習慣設計按鈕

          在App中,一個常見錯誤就是按鈕的排列順序偏離了用戶的閱讀習慣。他們將優先級最高的按鈕放在最前面,期望用戶能首先注意到它。但其實只要按鈕足夠突出,視覺分量夠重,用戶就會注意到它,而無視它的排列順序。

          按鈕順序不是為了提供可視性,而是為了要提率。在最前面放高優先級的按鈕會導致用戶自上而下的閱讀習慣被打斷,看到按鈕后還會繼續閱讀下面的文字,然后再回過頭來找前面的按鈕進行操作。

          不要讓用戶返回再次檢查按鈕,而是讓他們以自然的閱讀習慣看完所有的內容后,按視覺比重快速進行選擇。

          通過將優先級高的按鈕放在底部,讓它處于視覺阻力最小的路徑上,這使得這個按鈕可以更有效率的被點擊。此外,底部位置是手指最容易達到的區域,這進一步提高了效率。

          2、區分帶形狀按鈕和純文字按鈕

          App上的另一個錯誤是只使用文字來表示按鈕。設計師使用文字按鈕來表示優先級較低的操作。但是對于用戶來說,這是一個糟糕的選擇,因為純文本沒有一個按鈕的外觀,這可能導致用戶會忽略了這些操作。

          純文本按鈕會讓用戶遲疑到底是按鈕還是內容,從而造成混淆。這種不確定性可能會導致他們直接跳過這些按鈕。

          純文本按鈕不僅讓人感到疑惑,在操作上也不容易點擊。將文本內容放在按鈕框中,可以使得按鈕更容易被點擊和注意到。

          與純文本相比,描邊形式的按鈕是降低優先級的更好方法。它們使每個選項都易于識別,以便用戶能選擇他們所期望的目標。

          3、為主要按鈕加上顏色

          高優先級的按鈕應該是最容易被識別到的,它是直接指向用戶最需要的目標操作。如果不確定優先級,請考慮哪些操作會使得用戶朝著目標前進,哪些操作會使得用戶回退。

          在這個例子中,”付款”具有更高的優先級,因為它順應著用戶的目標流程。但不大清楚”查看購物車”還是”繼續購買”的優先級是如何。

          “查看購物車”操作讓用戶查看已經在購物車的商品,然后繼續結賬?!崩^續購物”操作將用戶帶回到遠離結賬的產品頁面。

          通過思考這些操作,可以清楚的看到”查看購物車”具有中等優先級,而”繼續購物”具有較低的優先級。判斷的理由是哪些操作使用戶朝著他們的目標前進,哪些操作使他們遠離目標。

          前進的操作總是會比回退的操作優先級更高,因此,它們應該被設計地有更強的視覺重量和更高的顏色對比度。

          顏色是一種增加按鈕權重的有效方法,因為它從文本顏色中脫穎而出,吸引了用戶的注意力。當按鈕的顏色與文本的顏色相同時,提示性就沒有那么強了。為優先級更高的按鈕使用不同的顏色來輔助用戶進行快速決策。

          如果對每個不同優先級按鈕使用相同的顏色,用戶將不知道哪個優先級更高。而使用不同的顏色只會讓用戶更加困惑,不知道這些顏色到底意味著什么。不僅如此,每個按鈕使用不同顏色,還會讓視覺權重重新變得一樣。

          秘訣就在于使用相同的色相顏色,但改變飽和度和亮度就能改變這個按鈕的優先級了,使得它比高優先級的按鈕更輕?,F在按鈕的視覺比重有了區分,一下子就變得清晰了很多。

          為了增加對比度,可以使用反色。在主按鈕的深色背景上使用淺色文本,而在中等優先級按鈕上使用淺色文本。這樣就使得高優先級的按鈕具有最亮的文本和最強的對比度。

          4、改變文本的粗細

          用之前說的幾個方法,已經足以區分優先級,但還可以做的更好。每個按鈕設計的越直觀,讓用戶的思考就越少。

          在每個按鈕文本上使用相同的粗細以表示相同的重量,最好根據優先級不同去強調不同的文本。嘗試改變文本的粗細,優先級越高的按鈕使用最粗體,而優先級的文本則不加粗,這樣,按鈕文本也有了不同的優先級,用戶在閱讀這些文字內容的時候就能感知到。

          在這個例子中,我把”付款”這個按鈕文字使用了粗體,使它變得更加醒目和明亮?!辈榭促徫镘嚒笔褂昧税氪煮w,”繼續購物”使用了中等。所以,按鈕文本此時也有了一定的視覺權重?!辈榭促徫镘嚒敝械摹?項”沒有加粗,因為它是補充信息,不代表具體的操作。

          5、給高優先級的按鈕增加圖標

          最后一個技巧是一種更加全面的思考,它將使按鈕可供盲人使用。色盲的人是無法通過顏色來區分按鈕的視覺重量的,他們還需要清晰的視覺符號。

          給高優先級的按鈕加上一個圖標能夠起到強調作用而與其他按鈕區分開。當用戶瀏覽時,他們往往更關注視覺元素而不是文本。使用圖標按鈕的方式能夠確保引起用戶足夠的注意力而快速選擇到高優先級的按鈕。

          如果刪除了顏色和外框,用戶仍然能夠識別付款按鈕,圖標與文本一樣,也能夠起到說明的作用。

          你的按鈕設計的直觀嗎?

          如果用戶要花很長時間在操作按鈕上,或者按鈕的點擊率很低,那就可能是按鈕設計的不夠直觀。如果遇到了這樣的情況,請嘗試使用文中所說的這些技巧來優化操作按鈕,或許你將會在前后版本中看到非常大的差異。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          指尖上的UI設計:移動端UI設計中的手勢交互

          用心設計

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

           

          通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎?它們不再是唯一的交互方式,一起來了解一下~


          還記得瀏覽網頁時,只能通過點擊、滑動、滾動和鍵盤快捷鍵來交互的日子嗎?而現在,它們不再是唯一的交互方式,當蘋果推出第一款iPhone時,多點觸控技術成為了主流,用戶們了解到,他們不僅可以在界面上指向、輕點還可以捏合、展開和滑動。手勢成為新的操作方式。



          一、UI中手勢的力量

          手勢非常自然和直觀,他們與真實世界反應類似。

          對于使用手勢,這里有三個主要的理由:


          ● 干擾少

          App內,手勢控制使用地越多,在屏幕上出現的按鈕就越少,這樣可以留出更多空間給更有價值的內容。這使得app以內容為重點,并讓用戶在沒有障礙,或者在分心的情況下也能進行最重要的操作。

          ● 使用簡單

          一個手勢一旦被用戶發現和學習使用就會讓用戶在體驗感到愉悅,而且手勢可以減少步驟,來達到提高交互體驗的目的。例如,當你需要刪除一些項目時,用“一次點擊刪除一個”的方式的很浪費時間的,但是如果使用“滑動一下,刪除一個”的滑動手勢,就更簡單快速,讓用戶更加愉悅。

          ● 無縫交互

          雖然按鈕看起來對于觸發響應更加有用,但手勢具有更大的潛力,使內容的交互更加直觀。

          二、手勢的缺點

          但同時,手勢也存在難規范、易混淆等缺點。


          ● 增加用戶負擔

          大多數手勢學起來或者記起來不自然也不簡單。舉個例子,在大多數APP,一個手指的手勢就對應一件事,用兩個手指做一個同樣的手勢意味著另外一件事,其他對應事件的手勢還有很多。

          ● 缺乏反饋

          在大多數情況下,手勢不會留下任何路徑記錄。這意味著,如果做一個手勢但沒有得到反應或者得到錯的反應,這樣就只能獲得很少的信息或者不能獲得有幫助的信息去解釋為什么這么做。

          ● 缺乏一致性

          大多數手勢在app中還不是標準統一的。他們對于用戶不總是顯而易見的。甚至一個簡單的滑動手勢,在眾多郵箱app內的郵件項目中也有著不同的工作方式。例如,在Apple Mail 中,刪除一個未讀項目,你應該向左滑動這個沒有打開的郵件,然后界面會出現選項來刪除這個項目。在Gmail里,向左滑動可以把郵件標記為未讀狀態。

          三、手勢成為移動端UI成功的關鍵

          1.如何選擇好的手勢

          如果你的界面里要使用手勢,那你就必須要去了解你所在的市場以及你的目標用戶會去使用的app。要嘗試在你的app里使用和它們相同類型的手勢。這樣,你不僅基于你的目標市場的用戶的行為優化了你的界面,還讓用戶從一開始就能舒適的使用你的app。



          2.手勢教學

          雖然每個移動端app都必定會用到手勢,但是要讓用戶很自然的就能知道如何操作(使用什么手勢可以干什么)卻一個挑戰??捎|摸的界面提供了很多條件來使用自然的手勢,例如輕點、滑動和捏合來完成任務,但是不同于圖形界面的操作,手勢的交互用戶往往是看不到的。

          因此,要讓用戶能發現手勢是很重要的。你需要確保你提供了正確的線索----通過視覺引導來幫助用戶更容易的發現如何與界面進行交互。



          3.如何在情境中教育用戶

          教程和演示的做法相當流行。在許多app中加入教程意味著要想用戶顯示一些說明內容來介紹界面。然而,UI教程不是介紹app的核心功能的最優雅的式。

          良好執行的UI手勢總是可以在易于實現視覺提示和漸進式披露的游戲中找到。這顯而易見,最好的游戲可以使人們隨著時間的推移來學習到技巧,而不是靠指導他們。例如,PuddingMonster 的游戲機器完全基于手勢,但是他們允許用戶得到基礎的信息,他們不需要做很多的猜測。他們可以展示動畫場景,讓用戶馬上知道要做什么。


          四、使用動效來傳達手勢

          手勢總是與移動app中的動效相關聯。動效在維護用戶體驗中起著非常重要的作用。作為設計師,你可以利用動效來傳達出用戶可以進行某個操作。當動效與手勢一致時,用戶就會意識到自己與該物體正在相互作用。

          動效在向用戶提供視覺反饋上是非常重要的。沒有動效,用戶就不能獲得足夠的信息反饋,不能確定他們是不是成功地完成了手勢動作。



          這里有三種流行的基于動效來幫助用戶學習手勢。

          第一種:動效視覺提示

          顯示一個在執行某個操作時如何和某一個界面元素進行交互的預覽。它的目的是在手勢和操作之間建立聯系。例如下圖中的這個游戲app是完全基于手勢操作的,這個app讓用戶不用去猜測就能知道該如何操作。用動畫來傳達功能信息能立即讓用戶清晰的知道該怎么做。


          第二種:內容的梳理

          內容梳理是通過微妙的視覺線索來暗示用戶進行手勢操作。例如下圖中卡片的展示,它表明這張卡的背后還存在著其他的卡片,這清晰的表明了可以滑動卡片。



          第三種:功能可見性

          你可以讓你界面里的某些元素具有很明顯的可供性來讓用戶知道這個是可以進行某種操作的。例如下圖中點擊相機icon后鎖屏就會從下往上彈起,展示出在下面的相機功能。


          五、總結

          手勢是一種強大的互動模式。移動設備已經從磚塊發展到由我們手指驅動的復雜計算器。觸摸和手勢交互在使移動體驗更加簡便有趣方面,有很大的潛力。

          設計一款移動端的app一定要思考手勢設計。手勢應該起到協調和節約時間的作用。為了設計一個有意義的手勢,你應該規定一個動作以及與其配套的一個手勢。提供反饋意見也非常重要,對于可能要進行的行動要有明確提示,并進行手勢的引導。



          作者:young68
          鏈接:https://www.jianshu.com/p/7132d7e6220f
          來源:簡書
          簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權并注明出處。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          UX七大黃金定律在UI中的運用

          用心設計

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

           

          好的UI設計師應該是理論結合實踐,好的理論是指導實踐,所以今天我帶來了這一篇文章。講講什么是黃金ux七大定律以及它們如何在UI中的運用。

          1、費茲定律

          費茲定律(fitts’law) 是心理學家 paul fitts 所提出的人機界面設計法則,主頁定義了游標移動到目標之間的距離,目標的大小和所花費的時間之間的關系。

          定律內容是從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定,到目標的距離和目標的大小

          用數學公式表示為 時間T=a+blog2(D/W+1)

          用這張圖來說明,當d(起始點到目標之間的距離)越長,使用者所花費的時間越多;而當w(目標物平行于運動軌跡的長度)越長,則花費的時間越少,使用的效能也比較好。

          我們來看新浪微博的轉發功能,因為隨著功能的復雜性,轉發功能包含了下一層級三個子功能,分別為快轉,轉發,分享。這個轉發icon一觸發,在很近的距離,3個點擊目標也設計的很大這樣容易很快的操作,利用費茲定律,提升了用戶的效能。

          2、席克定律

          當你走近一家餐廳,你看著琳瑯滿目的菜品是不是無從下手。在生活日常中你會對各種各樣的選擇而困擾,其實有時候不是你的問題,而是對方給予你的選擇太多。

          Hick’s Law (席克定律)中說道:“一個人面臨的選擇(n)越多,所花費做出決定的時間(T)就越長。

          用數學公式表達為 RT=a+b log2(N)

          • RT:反應所需時間
          • a:與做決定無關的花費時間(閱讀,操縱花費的時間)
          • b:根據對選項認識的處理時間
          • n:具有可能性的相似答案總數

          劃重點

          當選擇增加時,我們做決定的時間就會相應增加

          如果在你的服務,產品中“時間就是關鍵”,應該將做決定的選項減少到最少,以減少所需反應的時間,降低犯錯的概率。也可以對選項進行同類分類和多層次分布,提高用戶的使用效果。

          3、奧卡姆剃刀原則

          奧卡姆剃刀原則也被稱為:“簡單有效原理“,由14世紀哲學家,圣方濟修士奧卡姆.威廉(William ofOccam)提出。這個原理告誡人們“不要浪費較多東西去做用較少東西也可以做好的事情。”筆者認為和后來包豪斯密斯.凡德羅提出的:“少就是多”有異曲同工之妙。

          一個簡潔的網站能讓用戶快速找到他們所找到的東西,當你在銷售產品時候尤為關鍵。如果你的網站充斥著很多無關緊要的東西。比如小彈窗,無用鏈接。用戶會因為不能快速找到自己想要的東西而關閉網站。

          合理的使用奧卡姆剃刀原則,能更好的傳達你想要表達的內容,更容易吸引廣告投放者,給訪客帶來更好的用戶體驗。

          4、泰思勒定律

          泰思勒定律又被稱為:“復雜不滅定律”

          中心思想是:“每一個程序都有必然有其與生俱來,無法縮減的復雜度,唯一的問題,就是誰來處理它?!?

          泰思勒定律定律認為每個過程都有其固有的復雜性,存在一個臨界點,超過這個點過程就不能再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。

          從手機的演變過程來看,智能手機簡化了物理操作按鍵,通過技術手段降低了手機操作的復雜度,尤其是復雜的交互手勢操作,雜度的降低是通過大量的技術和資金投入解決,體現了復雜守恒定律。

          5、神奇數字7±法則

          1956年喬治米勒對短時間記憶能力進行了定量研究,他發現人類大腦最好的狀態能記憶含有7(±2)項信息塊,在記憶里5-9項信息后人的大腦后開始出錯。

          6、防錯法則

          防錯原則是通過設計來將過失降低到最小化。該原則及時地告訴用戶哪里操作錯了。比如在填寫表單時,系統給出及時地報錯提示;重要、謹慎的操作,系統通常會有二次確認;為用戶提供撤銷的機會;為用戶提供糾錯的機會

          7、接近法則

          接近法則是格式塔理論中我們最熟悉的,也最常運用的一項法則。當對象離的太近時候,意識會覺得它們是相關的

          我們來看看利用接近法則在移動端的案例,相同的模塊這兩款app都用空間間隙來做出了區分,讓人在移動的場景更能快速的尋找想要的信息。

          總結

          在UI設計中,不僅僅是為了美觀的界面,更要有有理有據,在設計時應該學會運用這些法則,不僅可以讓你的界面更專業,同時也更有說服力。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          Material Design 之響應式柵格布局

          用心設計

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

           

          Material Design 響應式布局柵格適應屏幕尺寸和方向,確保布局的一致性。

          列、間距和邊距

          Material Design 布局柵格由三個元素組成:列、間距和邊距。

          內容放置在包含列的屏幕區域中。

          列寬是使用百分比而不是固定值來定義的,以允許內容靈活地適應任何屏幕大小。網格中顯示的列數由查看屏幕的斷點范圍(預定屏幕大小的范圍)確定,無論是移動設備,平板電腦還是其他尺寸的斷點。

          間距

          間距是列之間的空間,它們有助于分離內容。

          間距在每個斷點范圍內的值是固定的。為了更好地適應屏幕,間距寬度可以在不同的斷點處改變。更寬的間距更適合大屏幕,因為它們在列之間創建了更多的空白。

          邊距

          邊距是內容和屏幕左右邊緣之間的空間。

          邊距寬度定義為每個斷點范圍的固定值。為了更好地適應屏幕,邊距寬度可以在不同的斷點處改變。更寬的邊距更適合更大的屏幕,因為它們在內容的周邊創建了更多的空白。

          自定義柵格

          可以調整布局柵格以滿足您的產品和各種設備尺寸的需求。

          自定義間距

          可以調整間距以在布局的列之間創建更多或更少的空間。

          自定義柵格

          可以調整頁邊距,以在內容和屏幕邊緣之間創建或多或少的空間。頁邊距對每個斷點使用固定值。

          正文副本可讀性的理想長度是每行40-60個字符。

          間距和邊距

          在同一斷點內,間距和邊距寬度可以彼此不同。

          水平柵格

          Material Design布局柵格可以被水平滾動的觸摸UI自定義。列、間距和邊距從左到右排列,而不是從上到下排列。屏幕的高度決定水平柵格中的列數。

          在非觸控和web平臺,水平滾動的UI并不常見。

          可以定位水平柵格以適應不同的高度,從而為頂部的app欄或其他UI區域留出空間。

          斷點

          斷點是具有特定布局要求的預定屏幕大小的范圍。在給定的斷點范圍內,布局將根據屏幕大小和方向進行調整。

          Material Design基于以下列結構提供響應式布局。使用4列,8列和12列柵格的布局可用于不同的屏幕、設備和方向。

          每個斷點范圍決定每個顯示大小的列數、建議的邊距和間距。

          柵格特點

          彈性柵格

          彈性柵格使用可縮放和調整內容大小的列。彈性柵格的布局可以使用斷點來確定布局是否需要顯著更改。

          固定柵格

          固定柵格使用固定大小的列,具有流體邊距,以在每個斷點范圍內保持內容不變。固定柵格的布局只能在指定的斷點處更改。

          UI(用戶界面)區域

          布局由多個UI區域組成,例如側面導航,內容區域和應用欄。這些區域可以顯示操作、內容或導航目標。UI區域應跨設備保持一致,同時適應不同屏幕尺寸的不同斷點。

          為了提高設備之間的熟悉度,為桌面設計的UI元素應該以與移動UI一致的方式進行組織。

          永久UI區域

          永久UI區域是可以在響應柵格之外顯示的區域,如導航抽屜。這些地區不能重疊。

          持久UI區域

          持久性UI區域是可以隨時根據命令顯示的區域,或者它們可以保持可見。它們可以打開或關閉,出現或消失。當它們出現時,它們會壓縮內容和柵格。

          當持久性UI區域可見時,其可見性不受與屏幕上其他元素交互的影響。

          臨時UI區域

          臨時UI區域暫時出現,當它們出現時,它們不會影響響應式柵格。當它們可見時,可以通過點擊其區域中的項目或其區域外的任何空間來隱藏它們。

          當UI區域可見時,其他屏幕元素不是交互式的。

          原型

          原型是結構化布局,為布局、分層和陰影提供一致的方法。它們是一個起點,旨在在進行修改以滿足產品的特定需求。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          日歷

          鏈接

          個人資料

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

          存檔

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