簡介: 按鈕組是把相關的動作組織成一組按鈕的設計模式。按鈕組的內部內容彼此水平或垂直對齊,并采用相似的視覺設計。如果超過三個或四個動作,往往會采取多個分組。
例子: 語雀編輯器的頂部工具欄
按鈕組可以讓界面不言自明。在復雜的布局中,被精心安排過的按鈕組會很容易被用戶感知和使用。一方面,它們在界面上往往非常明顯,用戶能夠一眼看到有這些功能可以進行相關操作。
大家所熟知的格式塔原則(Gestalt principles)也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近,因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的,不同的按鈕分組往往暗示著不同的功能類型,因此彼此間應該保持間距,或用不同的形狀,或用分割線進行區分。
如果你需要在界面上展示許多操作按鈕,且需要確保它們隨時在界面上可見。但同時,你又需要用圖形化的方式組織它們,以使它們看起來不會特別散亂。
這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果,比如,它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。
按鈕組可以用在對產品全局有效的操作上(例如「打開」和「選項」操作),或特定的一些通用操作(「保存」、「編輯」和「刪除」),或特定的某些操作(例如布局的「對齊」、「分布」)。不同范圍的操作不應當被到一個組中。
使用條件:
· 存在大量操作按鈕;
· 希望用圖形化的方式組織這些按鈕;
· 操作按鈕間存在功能相關性和差異性;
這個模式的總結簡單到像是一句廢話:把相關的操作按鈕分成一組。
但如果詳細展開就會有更多的介紹。比如:
· 如果需要包含文本說明,盡量使用兩個字或三個字的動詞短語,不要使用專業術語。
· 不要把不同功能范圍的按鈕放在一個組,應當將它們分成不同的分組。
· 同一組的按鈕應該有同樣的視覺設計:邊框、顏色、高度或寬度、圖標風格、動態效果等。
· 在空間排布上,可以將它們并排起來作為橫排放置,如果空間不太適用的話,也可以考慮一列縱列放置(例如Photoshop的左側工具欄)。
· 如果某一個動作是核心動作,可以將其區別對待。例如網頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要(或期待)執行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風格來讓它在顯得更為突出。
· 如果按鈕足夠多,而且它們都有小圖標,你也可以把它們放在工具條或者像工具條那樣的狹長條上,放置在頁面的頂部。
通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂,也可以避免一長串冗長的動作列表看起來毫無關聯或區別。
通過這一模式,你可以創建一個較為清晰的元素層級結構:用戶可以一眼看出哪些動作是彼此相關的,哪些是重要的。
用戶需求:編輯設計文件中的對象
Sketch 也是個很典型的應用了按鈕組的設計工具。Sketch頂部的按鈕不少于15個, 有很多要理解和追查。 但是得益于精心的視覺和語義組織,界面按鈕始終保持一定的可理解性。
用戶需求:按自己需求對文件進行顯示修改和操作
這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設計傳統,按鈕風格明顯。 導航組是放置在左側中的按鈕組。 布局相關的按鈕組放在了中間,文件操作相關的按鈕組放在了右側。這樣的設計使得界面變得易于理解和使用。
用戶需求:項目執行相關操作
這個案例顯示了 Webstorm 的頂部功能操作區。WebStorm 采用了按鈕組的模式,將項目執行的相關操作和Git相關的操作聚合在一起,中間使用了分割線進行了區分。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在日常工作中,身為設計師的我們時常有這樣的情形:身兼多個業務,但大部分的業務都是小業務,業務方給的需求也是七零八碎的小需求居多。面對該情況設計師有時會覺得沒有一點挑戰,限制自己對美好設計,給用戶創造美好生活的想法,總想要去搞個大新聞。
不妨回頭看看小業務,自己真的對它了解了么?這里提供一種視角,小業務也可以做大視野的事。通過一個小業務的案例改版,講述如何從小項目中出發。
曾經負責過一個基礎模塊支持:設計詳情。它是設計師用酷家樂設計工具設計方案產出的載體。該模塊在之前有過改版迭代,迭代對業務目標(留存活躍)的提升并不理想。那從哪里入手呢?
理清業務目標
挖掘用戶需求場景
梳理產品功能
拆解設計目標
設計策略實施
驗證迭代
相對于大業務(例如網站改版),小業務因為簡單,其業務目標界定常容易被忽略。在日常設計中常會遇見設計師在不知道業務目標是什么、目標模糊、目標不正確的情況,直接從梳理小業務具備哪些功能直接入手,分析下現狀問題后開始制定設計策略,這往往會導致設計出現解決不了關鍵問題、出現偏差情況。產品功能本身只是滿足用戶需求和實現業務目標的服務載體,只是策略的表象。理清小業務所承擔的業務目標是前提,那么如何理清呢?
理清業務目標
小業務目標來自大業務目標,對大業務的業務目標進行一級級向下拆解后,即可獲得小業務對應的目標。目標拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標的拆解有一定難度,)
Dapp設計詳情為例,在酷家樂大增長業務背景下,用戶活躍和用戶留存為核心的目標,設計詳情處于設計路徑的一個節點,拆解得到設計詳情的5個主要業務目標:
設計詳情-用戶周活躍
設計詳情-新用戶留存
設計詳情-老用戶留存
設計詳情-內容投稿數
設計詳情-內容分享數
業務目標可分為2個類別:
第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達成;
第二類別:不符合用戶意愿,如內容投稿、內容分享,用戶不太會主動去完成,需要去創造動機,激勵用戶進行。
有小業務的業務目標后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現業務目標的達成。梳理清楚小業務服務了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?
1. 用戶訪談——獲取相關用戶需求場景
用戶需求場景可以幫我們清晰了解到用戶使用產品的原因。用戶需求場景可以一句話進行界定,包含四個關鍵要素,其中需求本身最為核心,需要挖掘出當前訴求和其背后的潛在需求。
“在【某環境下】,【某用戶】做了【某事】來滿足【某需求】”
用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設計師。梳理出設計詳情相關的8個需求場景
訪談信息整合如下
2. 規整用戶需求場景
在業務訪談中獲取的場景往往都是碎片化的,碎片化場景對設計指導容易出現偏差,需要把場景結構化,為后續的方案設計提供依據。我把獲得的場景按照設計師設計流程進行規整,按設計前、設計中、設計后三個階段進行劃分。
以上梳理了設計詳情相關的用戶需求場景,再來看原設計詳情只基礎滿足了資料管理和方案展示的2個單一場景,在設計師的整個設計流程中只占了一部分。從設計層面來看,該2個場景局限在方案設計大場景中,設計更多做的是對其方案設計操作的體驗優化,在原有較好操作體驗的現狀下,其對給用戶創造價值上沒有很大增量。再從以上業務目標來看,2個單一場景很難去促使用戶對內容進行分享和投稿。
在理清小業務的業務目標和需求場景后,下一步就是按照場景去梳理產品能力。
1. 小業務功能現狀分析
老版app設計詳情的功能進行初步的現狀分析,設計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現,如營銷、談單;從業務目標來看,通過當前功能有較大的優化空間,如當前投稿很難讓用戶知道投稿有什么價值。
2. 產品能力梳理
分析現狀發現功能不足以支撐用戶需求場景,有獲取功能2個方向:
挖掘現有能力:可以擴大梳理范圍,從小業務所在的上一級業務到整個平臺,一級級往上梳理場景對應的現有功能。
打造新能力:圍繞場景,打造出新的功能
挖掘平臺上現有能力,可對業務的能力價值最大化利用,與其他業務形成互通,實現1+1大于2的業務價值。亦可圍繞場景打造新能力,可反推產品去發倔新功能。
以下是設計詳情涉及所有場景的產品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進行了能力拓展。
在梳理出產品能力后,需要通過設計策略把產品能力有效組織起來,讓用戶快速感知快速上手使用。設計策略推導自設計目標,那如何得到設計目標?
基于用戶需求場景將行為事件拆分,提煉行為事件再推導出設計目標,再基于設計目標給出設計策略。
Dapp設計詳情受制于移動端能力,只涉及設計詳情中5個相關場景,其設計目標和設計策略的拆解結果如下
拆解出設計目標后,基于目標分析產品現狀得到存在的設計問題。為什么要基于目標分析現狀?首先需要明確什么是問題,問題是導致目標和現狀不一致的原因。只有明確了目標才可以理性分析與現狀存在多少問題。在日常中時常看到設計師會直接得到問題,很多情況是默認假設了一個預設目標,但這目標得到不嚴謹、不全面,容易導致得到的問題本身也出現偏差。設計策略基于設計目標或問題得出,其最終都來自設計目標。
對老版Dapp設計詳情現狀進行了分析,得到了問題
在上一步得到設計策略后,圍繞著設計策略是設計方案。本段將不全部展開說明,只選3個關鍵點講述設計方案的思考
1. 設計詳情框架的設計
Dapp設計詳情涉及5個場景的承載及產品功能繁多,設計三步思考:
第一步:簡化功能認知,對功能結構化,以場景的維度重組織功能,并以場景打造功能集合的認知,建立場景能力區;
第二步:梳理場景共同涉及的內容,作為聯系的載體承載場景的放置,設計詳情中展示態的方案涉及到了5個場景中的4個場景
第三步:提取場景中即時性和高優先級功能,打造快捷功能區
框架如下
建立框架后,填充具體的能力和內容。如場景入口放置于底部,并根據場景優先級做了主次的區分。
設計詳情框架建立后,打造細分場景中的設計
2. 營銷獲客場景設計
營銷場景的設計,將營銷組成拆分為可營銷內容、營銷的渠道、渠道內容展現三大類,就可以清晰去梳理出現有的功能,以及可從內容、渠道各自去拓展挖掘。內容和渠道清晰后,再傳達各渠道提供的價值激勵用戶去觸發行為。
3. 談單場景設計
談單場景關鍵在方案詳情上,談單面對不同情況,存在多種內容形式去展示方案。在上面內容梳理中最主要是3個內容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解,亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航,可快速切換到需要講解的地方。
上線后數據平穩后觀測,設計詳情的周活提升了89%,每個場景下的功能數據都得到顯著的提升(tips:有部分數據因技術原因沒有采集到)。除了改版了Dapp側的設計詳情,后續對PCweb側的設計詳情進行迭代,同樣起到不錯的結果。數據的結果驗證了方法的可行,并起到了積極的效果。
以上是我應用這套設計方法去做了塊小業務優化,反向推動進入產品迭代,上線后取得了不錯的成績。在本次賦能后,對小業務中多了一些感悟
小業務是大業務的縮影,可以作為去賦能大業務前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業務改動影響面也小
因知識廣度和深度的限制,不是所有設計師都可以一開始就可以把控大業務,小業務可作為打磨設計深度專業度,一些小業務的復雜度并不低于大業務
該設計方法同樣適用于大業務,但方法是死的,不是所有情況都套用,得需要把握重點靈活應用
不要總想著搞個大新聞,在能力未被業務方認可時,小業務的賦能可以成為一個很好的發聲口
不要輕視小業務,有可能是你根本還不了解
近些年,得益于經濟和社會的高速發展,越來越多的中老年人開始嘗試享受移動互聯網帶來的便捷生活。50歲及以上網民在總網民中的占比已經由2015年的9.2%提升至2020年的26.3%,增長接近兩倍。但中老年在融入移動互聯網時仍面臨諸多困難,是需要重點關注的弱勢群體。
隨著各類問題在社會輿論中持續發酵,國家政策也開始關注中老年的互聯網使用體驗,推動各類APP進行適老化改造。2020年12月,工信部發布《互聯網應用適老化及無障礙改造專項行動方案》。2021年3月11日,全國人大發布《十四五規劃綱要》,明確提及“加快信息無障礙建設,幫助老年人、殘疾人共享數字生活”,更是將信息無障礙建設上升到了國家頂層規劃的高度。
為了更好地服務中老年人,百度在2021年上線了百度大字版和百度關懷版APP。對于中老年人來講,視力老化是難以避免的問題。隨著年齡增長,中老年人晶狀體硬化、睫狀肌衰弱,物體不能很好地成像在視網膜上,帶來視覺上分辨物體的敏感度、色彩感、明暗感、空間感的下降。
但是對于中老年人而言,手機APP的字號、行距真的是越大越好嗎?我們首先試圖從現有標準中尋找答案。然而通過梳理,發現行業內已有標準主要是針對各類殘障人士的,并且是原則性的建議,推薦的字號、行距的理想值過于寬泛,對手機APP適老化設計升級的指導意義比較有限。比如W3C發布的《Web內容無障礙指南(WCAG2.1)》,關于行距的要求是“至少為字體大小的1.5倍”。所以我們通過科學、嚴謹的研究,制定了一套設計標準,來指導資訊類/內容類APP全場景文字排版適老化設計升級,為中老年用戶帶去字里行間的關愛和更好的閱讀體驗。
下面就將從研究方法和成果兩個方面做具體介紹。希望能幫助大家掌握相應的研究思路,在后續制定設計標準時可以快速上手,同時也將此次適老化設計標準研究的成果與大家分享,為資訊類/內容類APP適老化設計升級提供參照。
///
研究流程與方法:如何通過用戶研究制定一套設計標準?
| 明確標準的應用方向
為了讓一套標準對設計工作具備實際的指引價值,我們在研究規劃環節充分考慮了設計經驗和迭代需求。用戶研究和設計師一起對資訊類/內容類APP所有涉及文字排版的頁面、模塊進行了通盤梳理,確定了12類應用方向(即用戶的使用場景)。對于這么多使用場景分別做研究費時費力,我們選擇通過洞察背后的用戶閱讀模式,把12類應用方向收斂為4大類閱讀場景:3類主場景(包括長文閱讀、搜索、概覽閱讀)和1類輔助信息場景。針對主場景,研究中老年用戶理想的字號、行距和粗細組合;針對輔助信息場景,研究中老年用戶的最小可辨識字號。這樣研究既能覆蓋各類應用場景、不同的信息層級,又能更聚焦、更高效。
| 構建評估體系
在確定了標準的應用方向之后,評估體系的搭建也參考了過往的設計經驗。我們一方面查找并梳理了學術界在字號、行距方面的研究成果,另一方面也結合了百度已有的設計經驗。最終確定了字號、行距、粗細、顏色四個考察變量在不同研究場景的研究范圍(即自變量選取水平),并綜合主觀體驗指標和客觀眼動數據指標搭建了中老年閱讀體驗的評估體系。其中,主觀體驗指標包括關鍵信息發現、清晰度、舒適度、滿意度;客觀眼動指標包括眨眼頻率、瞳孔直徑變異性和閱讀速度。
| 實驗流程
在實驗中,我們邀請了60位50-70歲中老年用戶參與調研,通過任務模擬他們在真實場景的長文閱讀、搜索、概覽閱讀情況,綜合眼動實驗、問卷調研和訪談方法評估不同字號、行距、粗細對中老年閱讀體驗的影響,探尋不同場景下最適合的字號、行距、粗細方式。在實驗過程中,通過SMI-ETG2w眼鏡式眼動儀測量眼動數據。
///
研究成果:適老化設計標準介紹
通過對各類閱讀場景、設計變量和體驗影響因子的充分分析,本研究形成了一套完備、成體系的適老化設計標準,可用于指引資訊類/閱讀類APP中不同頁面和不同信息層級的適老化設計改造。
| 主場景理想字號、行距和粗細的組合
研究結果明確了資訊類/內容類APP對于中老年人在不同場景里任一信息層級的理想字號、行距和粗細組合。以概覽閱讀場景(Feed列表頁)和長文閱讀場景(圖文落地頁)為例,優化前與預計優化后的字號、行距、粗細組合如下:
概覽閱讀場景
長文閱讀場景
| 輔助信息最小可辨識字號
此外,研究結果也明確了黑色(1F1F1F)字體的全局最小可辨識字號。以75%中老年用戶可以看清的字號作為最小可辨識字號標準,黑色(1F1F1F)最小可辨識字號為36px。
此次研究填補了學術界和業界在手機APP適老化設計領域的空白。在百度,該套標準已落地百度關懷版,未來還會在百度大字版和更多為老年人提供服務的APP上線。面向行業,我們也積極共享研究成果。百度大字版、百度關懷版運營同學牽頭和老齡產業協會合作,設計師結合本次研究成果編寫了《移動互聯網應用適老化設計要求》團體標準,已經于2021年11月10日發布。希望本次的研究成果能幫助更多資訊類/內容類APP完成文字排版的適老化升級,為中老年人帶去更多的關懷和更好的閱讀體驗,為移動互聯網行業的信息無障礙建設貢獻一份綿薄之力。
文章來源:站酷 作者:百度MEUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
課題背景
今年,突如其來的疫情使兒童家庭學習成為重要學習場景,線上教育與家庭早教類產品的需求陡然增加。但線上教育和早教行業已然成為一片紅海,數字化產品和服務的同質化嚴重,各大公司和廠商都希望形成差異化競爭,以在激烈的賽道中爭得一席之地。目前,市面上的早教產品大都聚焦于兒童學習效率提升和內容豐富,卻忽視了兒童對于早教類產品的真實體驗與訴求。
MOMOUX設計團隊致力于創造有溫度的體驗,主張將真實用戶需求帶入產品創新與研發流程,使用系統化的方法重構生活場景并發覺用戶訴求,從而創造貼合用戶的產品及體驗,以解產品創新之困。
在研究中,MOMOUX團隊基于VIP(Vision in design)研究框架,對現有的兒童早教學習情境進行解構與重構。
VIP設計方法框架包含三個關鍵流程:提取因素、構建情境、定義交互。VIP設計方法首先通過深度洞察對現有環境下的產品、用戶、場景與體驗進行系統化因素提取與解構;其次通過提取的因素重構出新的情境,最后在新情境下定義未來產品的交互方式、創造全新產品體驗。通過深度洞察與研究,重新定義了未來兒童早教產品的四個創新情境和交互趨勢,分別是:多孩互動、自然探索、擁抱屏幕、多元關系。
這四個情境反映了未來的兒童早教學習場景中,我們對人與人、人與物、人與環境之間關系的洞見,是我們根據真實用戶情況對未來數字數代早教產品交互方式與情境的大膽暢想。希望此內容能給兒童早教行業帶來一些不同的聲音和啟發,能夠在數字化時代為兒童發聲,回應數字化中兒童學習需求及市場發展的需求。
調研發現,多孩家庭中照顧孩子的任務非常繁重。通常,一部分母親會轉為全職媽媽,爺爺奶奶等長輩分擔部分育兒工作。
學齡前兒童與低幼兒童的互動方式和操作習慣完全不同。要讓兩個孩子同時使用產品進行互動與交流,就需要產品本身的操作特性滿足不同年齡段孩子的行為習慣與互動方式。
其中一個潛在的發展方向是融合AR技術的互動式搭建玩具。該類型的產品既滿足了學齡前兒童需要的產品拓展性、多元化,也能在實體層面滿足低幼兒童在感知運動階段對于實體互動的需求。
OSMO Hotwheel MindRacers
Hotwheel ? MindRacers將現實和虛擬賽車游戲結合在了一起。混合了多模態的交互方式,強調游戲過程中的競技性與可玩性。在游戲過程中還加入了現實中的協作影響游戲進程的模塊,通過互動游戲促進不同孩子之間的交流與溝通。
◆ 思考
◆ 討論
◆ 實踐
傳統的教育與學習活動通常發生在學校或者家中。隨著城市文化活動設施日趨豐富,“戶外教育”等新型教育觀念的倡導,越來越多的家長傾向于在周末組織出行,這衍生出了豐富的戶外親子學習場景。
MITA - 小糖口袋相機
Zigmo兒童戶外玩具
◆ 思考
◆ 討論
◆ 實踐
Marbotic Deluxe 學習套件
◆ 思考
◆ 溝通
◆ 實踐
在兒童帶屏產品開發過程中,需要優先考慮內容是否能于其屏幕進行有效適配,軟硬件的多模態交互會很大程度影響產品的全局體驗。在這個過程中需要盡可能地減少系統的BUG。在軟硬件協同設計中,再小的問題都容易毀掉產品整體的體驗。快速原型與漁網模型是開發過程中不錯的選擇。
社會結構和家庭結構的變化使得親子關系變得越來越多元。有為了陪伴孩子而辭去現有工作,進入幼教領域給孩子更好教育的家長;也有在異國他鄉出差而將孩子交給保姆、老人撫育的家庭……家庭關系多元化帶來的是家長對自己的身份定位也越來越多元化。在調研過程中我們發現母親在家庭關系中的定位從“施教者”轉向了“引導者”。主要體現在:
? 與孩子溝通中更加尊重孩子的行為自主性,希望通過興趣讓孩子主動做喜歡的事情,以此來培養孩子的學習習慣,而不是一味地向孩子灌輸。
? 母親們也會主動地將部分家務工作分配給孩子,通過平等地共同體驗來讓孩子理解自己(自己是誰,母親還是孩子)。
PUPUPULA 兒童學習打卡機
Kitchen Kids 兒童廚房裝備
◆ 思考
◆ 溝通
◆ 實踐
親子家庭學習場景,在互動方式、場景、交互媒介、親子關系構建方面都涌現出了新的趨勢。產品經理與設計師需要結合真實用戶在場景下的需求進行深入思考,才能設計出更加貼合未來場景與用戶需求的產品與體驗。
文章來源:站酷 作者:MOMOUV墨默體驗
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在數字化的浪潮下,政府希望通過人工智能占據智慧城市的發展先機,推動民生改善及產業增長,這離不開政府和科技公司的緊密合作。因此,科技公司不僅面向To B型企業,同時面向政府或相關事業單位,即是稱之為「To G」這種特殊劃分。
鯤云科技(以下簡稱為鯤云)就是這樣一類科技公司,他們作為一家技術領先的人工智能公司,以數據流技術為核心,提供高性能低延時、高通用性、高算力性價比的下一代人工智能計算平臺和軟硬一體化的平臺解決方案,加速人工智能技術在智慧城市、智慧安監、智慧制造、自動駕駛等領域的落地。
當用戶接觸一個產品或物品的第一步,永遠是外觀視覺。固然,企業官網作為互聯網產品,優質的官網必然是為它的用戶有針對性地服務。雖然訪客首先感受到的是網站的視覺設計,但我們不僅要對網站視覺美觀與否有所重視,更好的訪問體驗、更實用的網站功能、更高的網站辨識度,以及通過視覺實現直觀的價值傳遞表達,都需進行深度探討。
網站呈現給訪客的第一印象尤其重要,而網站首屏則會作為傳遞網站風格及功能的媒介。我們從鯤云的品牌設計理念出發,以直觀的視覺形式來體現科技感。
一個視覺效果好的網站,80%以上是靠優質的圖片支撐。我們首先在官網首頁Banner采用產品渲染圖來呈現鯤云核心產品。首屏的功能性常會被忽視,其實,企業官網附帶著商業屬性,商業環境下的視覺應該更注重強化產品,滿足需求的產品力加持。
為了提升banner的視覺質感,我們對鯤云三款主打產品重新建模渲染,通過主要光源及補光掌握好產品形態,在將產品細節充分展現清晰的前提下,產品暗面加入環境光使整個畫面更豐富飽滿。
與此同時,完成產品渲染后結合了場景化的特殊版面來營造氛圍,使整個畫面更具真實感染力。這樣一來,當訪客來到鯤云官網,一個極具科技感和創造力的鯤云會給訪客留下深刻的第一印象。
圖標是比文字更容易理解的可視化語言,它對于信息傳遞十分高效,可以說圖標將這個世界結合起來。鯤云圖標體系由兩部分構成,分別是UI icon和3D icon。
3D icon可幫助訪客更簡易、高效地理解鯤云兩大核心技術的實際屬性。UI icon擁有清晰、簡潔單色線性的特征,其風格符合鯤云品牌氣質,每個圖標特征和細節保持一致,在視覺上呈現出更好的統一性。
我們提煉鯤云logo造型輪廓特征、以及根據產品和服務方向進行圖形發散,提取鯤云品牌基因,進而使圖標實現差異化設計。
一個可以給人留下記憶點的網站,往往需要靠一個個精致到位的細節設計,做到讓網站最終脫穎而出。可以說,細節是構建起整個設計的基本元素,細節不僅是細節。
科技類產品復雜度較高,只查看技術和產品概念往往會感到枯燥,如何做到直觀呈現鯤云核心技術區別于普通技術,還能提升趣味性?
在首頁接著往下呈現鯤云核心技術的第三屏中,我們應用柱狀圖結合交互微動效的方式,將鯤云CAISA芯片與普通芯片進行利用率、性能及延時三方面的對比。
當訪客點擊查看某一維度對比,可觸發柱狀圖由下至上勻速的位置及漸變色變化,更直觀地向訪客表明鯤云此款芯片可提供更高的算力性價比的優勢,同時引導訪客注意力,加強訪客與其互動鏈接。
在網站中較為常用且能保障性能的微動效有四個變化屬性:大小、位置、旋轉、透明度。這四個屬性任何一種或是幾種有所變化時,就能達到交互微動效的目的,如果再加入其它不必要的屬性,則會影響動效的流暢度。
首頁第四屏的四個核心產品展示中,移動鼠標放置各個產品版塊觸發的微動效,緩動的效果能讓版塊更自然順滑,看起來十分舒服和諧,符合訪客認知及預期。
我們明確了鯤云官網文案語言要保證表述清晰明了、詳略得當,直觀地將產品信息及優勢傳達給訪客,便于訪客理解且能產生記憶點。
關于鯤云
---------------------
核心技術
---------------------
產品中心
---------------------
應用案例
---------------------
合作伙伴
我們見過不少企業官網文案,都喜歡用抽象的詞匯來高度概括產品概念。在我們看來,佐證產品使用真實專業的語言搭配數據內容,可體現出產品專業性的同時,用更真實的力量打動訪客。
我們利用響應式網頁設計構建網頁布局,使頁面能夠更好地適配不同尺寸屏幕,進而使網頁體驗更適應用戶的需求偏好。
官網建設需要遵循“不要讓我思考”的原則,這是產品設計中廣為流傳的一句話。網站作為單向信息傳播工具,我們難以左右訪客的瀏覽行為。
我們需確定官網的層級結構,做好訪客整體體驗的宏觀把控,讓訪客按照我們設想的行為去操作。我們除了必須滿足訪客基本瀏覽需求之外,更要主動展示企業核心競爭力的內容,這是最終實現增長的有效途徑。
我們從用戶分層入手,站在各個訪客角色的角度進行審視,使得鯤云官網各版塊頁面設計上不同的展示區、功能區以及CTA按鈕等充分滿足訪客想看到的信息需求。誠然,各版塊信息內容之間存在價值等級,例如知乎的問答會占據首頁較大的空間。
根據鯤云先有技術再有解決方案的底層邏輯,我們將鯤云「核心技術」板塊放置在導航欄第一位,先有「核心技術」,再有「產品中心」,后有「解決方案」及「應用案例」。
路徑1:「核心技術」頁面關聯「系列產品」
路徑2:「產品中心」頁面關聯「應用場景」
路徑3:「解決方案」頁面關聯「應用案例」
通過設計官網層級結構,結合對訪客心智特點的思考和利用,讓訪客更多行為能夠發生在直覺系統的判斷中。當然,降低訪客跳出率、建立起訪客信任都在上述層級結構設計的考慮范圍之內。
對于To B和To G產品,企業更看重的是產品本身能否為企業帶來價值。鯤云的客戶群體角色通常為多層級,他們會從性價比、效率提升、適配企業狀況等多個維度進行篩選和考量,本質既是要優化客戶效率,實現“降本增效”。
基于這一特點,我們在「核心技術」板塊Banner圖設計了下載白皮書的「 CTA 行動號召按鈕」,并確保CTA顏色對比顯眼且目標清晰。
基于鯤云SEM投放需求,我們專門設計了專屬落地頁——「解決方案」版塊,將官網首頁與該廣告轉化頁分開,各司其職。
大家應該多少有聽說過,我們可以通過FABE法則和AIDA模型等經典方法搭建出一個優質的網頁框架。
一個落地頁應該凸顯對訪客有利的信息,當訪客來到廣告轉化頁時,如何快速獲得想要的信息,并為他們建立起對鯤云產品的價值認同進而實現轉化,這時就需重點打造信息分層。
整個頁面采用相對清晰簡約的視覺設計,圍繞「解決方案」這一核心有層次地規劃整個布局及各信息點優先級。頁面Banner作為門面,也是整個頁面氛圍的關鍵所在,我們將重點信息突出,文案傳達簡潔有力,圖片素材的選取兼顧了鯤云品牌形象,整個頁面的營銷屬性做到盡量弱化。
訪客瀏覽頁面時,不一定會經歷完整轉化過程才會轉化,我們設計了及時的行為號召入口,幫助訪客在某一節點做出行動時,實現快速轉化:
......
鯤云面向的客戶群不僅是面向To B,同時面向從To B衍生出To G這一種特殊劃分?;谶@一行業特點,我們在整站設計中有更多精致度和可視化的思考,它不需要五花八門的Banner、會員體系以及炫酷的交互動效。
我們只需要讓訪客“慣性”操作,制定更符合人性的策略來指導設計,讓訪客按照我們設想的行為去操作,這是最終實現增長的有效途徑。當然,提高轉化率是我們引導設計的主要目的之外,降低訪客的跳出率、建立起訪客信任都在我們網站引導路徑設計的考慮范圍之內。
增長超人為客戶做的從來都不僅僅是一個網站,而是為企業提供從營銷策劃到落地的一整套互聯網解決方案。網站只是一個載體,我們真正的價值在于能夠幫助企業找到正確的競爭優勢,扭轉高成本低轉化的現狀,實現營收增長。
文章來源:站酷 作者:增長超人
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
在UI設計中,很多設計師都苦惱于自己的界面設計“沒有設計感”,感覺看起來“不高級”,到底是為什么呢?其實就是在一些細節的處理上略缺火候,掌握下面這15個小技巧,能讓你的UI界面質感翻倍!
1、雙重陰影,突出立體感
設計師在設計時,為了突出里按鈕的立體感,往往會使用陰影效果。但其實在陰影效果上再疊加一層精細的邊框,可以讓陰影效果顯得更清晰,而不會與原本的按鈕混為一體。
2、只用一種字體,保持視覺一致性
為了讓設計更美觀,許多設計師會在一個界面使用多種字體,但實際上,一個界面里只使用一種字體更為美觀,可以幫助界面產生統一的設計效果。
3、一種字體,不同字重
如果選擇一種字體進行設計會稍顯單調,那可以根據內容的輕重優先級,來選擇不同的字重來做以區分。
4、適當留白
當內容豐富時,更需要適當的留白,才能讓設計具有呼吸感,更加舒適。
5、提高文本與背景的對比度
很多過深或過淺的背景圖上添加文本,總會讓人閱讀有困難,可以采取加粗、添加漸變等方式來處理文本,讓字體更清晰。
6、交互按鈕需要著重突出
為了增加用戶選擇交互按鈕的可能性,應該使用顏色對比、尺寸或標簽,來確保該按鈕突出。
7、字號越小,行距應該越寬
字號越小,閱讀起來障礙更明顯,增加行高留出空隙會讓它更易讀。
8、下載頁顯示進度提醒
如果下載頁的軟件或其他安裝包有一定的下載等待時間,建議給出進度提示,讓用戶可以隨時了解下載進度,不會中途取消下載。
9、同個界面,文本長度盡量一致
基于人的閱讀習慣,研究總結出,單列頁面里,45到75個字符是被廣泛認可的長度。
10、元素陰影不要太重
舒服的投影會增加你的設計的質感,和透氣感。太重的投影會顯得你畫面比較臟。
11、使用遞進分類加強對比度
加強對比度,可以明確突出所選元素。
12、標題的行高不要太高
與長格式正文文本(需要足夠的行高以提高可讀性)不同,標題通常要短得多,因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍。
13、大寫標題,提高字間距
當標題全部為大寫字母時,增加字母間距可以提高可讀性,同時又增強了一絲設計感。
14、增添頁面動態
可以在加載中添加一些提醒讓用戶理解當前運行狀態,例如添加“緩沖”符號。
15、不要在下拉列表放置重要操作
用戶需要采取的基本操作(例如,注冊或登錄),應該直接放在醒目位置,而非隱藏在菜單欄中。
一個個看起來精致的頁面也是由這些UI設計細節組成的。對于頁面細節的處理也往往可以體現UI設計師的專業和嚴謹度,本文分享的這些設計細節,不僅新人設計師常常會忽略,就連有經驗的設計師也時常會在這些細節上處理不當。
文字細節
A.文字行距
在做段落文本時,我們很少直接使用默認的文本行距,為了保證閱讀的可讀性和舒適性,必須設置比默認值更大的數值的行距。
具體的數值可以設置在字號的1.3~1.8倍之間,一般情況下,字號越小,需要的閱讀空間會略大一些,特別是在設計一些閱讀類需要閱讀大段文本的產品頁面時,一定要加大行距來提高文本的可讀性和閱讀舒適性。
B.文字對比度
在界面設計中,應該要保證任何文字的可閱讀性,它應該有足夠的對比度,即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A.去掉多余的邊框和分割線
用大量而明顯的分割線和邊框將模塊分開,是UI設計新手常常犯的錯誤,但在設計的同時,可以停下來好好思考:用分割線分開一定是最好的方法嗎?有必要嗎?
有時用1px的邊框和分割線確實是合理的,但也有其他的方法來進行信息的歸類和分割,比如利用陰影和更大的間距。
B.避免不均勻的邊距
在進行卡片式設計時要注意內容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內容,那就讓頂部的邊距比左側的邊距稍大一點,看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現實中,物體的投影絕對不會是黑色的,物體的投影顏色始終會受到其所處在的環境的影響。
應用在界面設計中,物體或是卡片的投影顏色應考慮其背景和環境顏色來進行結合設計,即不應選擇純灰色,而是選擇帶有背景色彩傾向的灰色,同時設置適當的透明度和模糊值,來營造自然舒適的投影效果。
內容填充
重復和隨意的示例文本和圖片放在設計圖中看起來會很不專業,應該避免交付這樣的設計稿,它會讓人覺得你對自己的設計是不專業不用心不愿意花時間的,同時也反應了你對與自己的設計產出的重視程度。
此外,也已經有一部分插件可以自己自動選擇填充內容,為設計師節省了這些素材的填充時間,所以在交付設計稿時,讓自己的設計稿盡量完整專業,哪怕是為了演示效果,也應該放上相應的不同的內容標題、文本、圖片,讓整個設計看起來更加專業和完整。
以上提到的每一條規則都要結合具體的產品來進行具體分析和設計,但是可以適用在在大多數情況下,設計從來沒有一個標準答案,對于設計新手要訓練的是,如何找到那個最合適當前產品的設計方式,希望這篇分享能對你有幫助,感謝閱讀。
界面作為用戶與APP交互的唯一接口,對用戶的情緒和工作效率起著舉足輕重的作用。因此需對用戶界面設計一般原則進行探討。
2、富有吸引力。
用戶界面是由若干界面元素組成的,不是所有元素都一樣重要,要確保重要的元素盡快顯現給用戶。重要的或頻繁訪問的元素應當放在顯著的位置上,而不太重要的或使用頻率小的放到不太顯著的位置上。
一致的外觀可以在系統中創造一種和諧。如果界面元素缺乏一致性,很可能使界面看起來雜亂無章、沒有條理,甚至可能引起用戶對系統可靠性的懷疑,失去對系統應用的信心。
當然此處的“白”并非指白色,而是指界面中沒有被界面元素占用的空白區域。恰當地“留白”有助于突出界面元素和改善可用性,引導用戶在不知不覺中進入系統的思維框架,從而順利地、正確地應用這個系統。
6、保持界面簡單明了。
界面設計中最重要的原則就是使復雜的問題簡單化。如果用戶覺得界面很復雜,則可能會認為系統本身也很難,而望而卻步,所以與大而全的界面設計方案比較起來,簡單明快的界面設計往往更可取。
7、慎重使用顏色。
列表框類元素有一個共同的特點,都可以設置滾動條。使在一個小“框”中閱讀大文件成為可能。但也產生一個問題:如果閱讀一個行列均很多的文件,用戶就會反復拉動水平或垂直滾動條,給閱讀帶來諸多不便。設計時最好只使用一個方向的滾動條,即要么橫向夠寬,要么縱向夠長。
11、控件隱藏。
時我們傾向于將我們的設計視為藝術品。但如果我們用這種方式來思考它們,就意味著它們不會準備好面對“現實世界”的不確定條件。但是,設計一個可以隨時改變的界面也很美 - 而且,讓我們承認它,接口確實一直在變化。我最喜歡設計移動應用程序的一個方面是,從最初的概念到你對所有界面細節進行微調和拋光的時候,這是一個包含許多步驟的過程。
我們是視覺思考者,擁有訓練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設計階段的原因,這也是我們可能對其他任務感到厭倦的原因之一。
這也意味著我們經常推遲工作流程的其他重要部分:定義用戶需求和目標,草擬任務流程,處理信息的所有細節和交互設計等。這些是同樣重要的是,它們更抽象,更難以讓人想象它們將如何成為最終產品的有形部分。
當我們正在進行視覺設計時,所謂的像素完美哲學可能是一個陷阱,使我們花費更多的時間來制作細節,直到最小的細節處于界面的“完美”位置。這導致一代設計師使用Dribbble和Behance主要顯示應用程序和網站的精美屏幕,并且更關注外觀而不是設計實際工作方式。在現實世界中,事情往往不如我們期望的那樣好。
就個人而言,我認為最好的設計(當談到用戶界面設計時)不僅外觀和感覺良好,而且還可以優雅地響應變化的條件甚至不可預測的情況。
在構建產品的漫長道路上,設計師需要更多的協作,而不是專注于視覺設計。這正是我為了這篇文章專注的地方。在接下來的幾段中,我將向你提供一些提示和技巧,說明如何將你正在進行的應用程序設計用于測試,并了解它是否已準備好發布到市場。
在不完美中尋找美
當我在大學學習平面設計時,他們教會了我們平衡,對齊,比例和張力的美感,以及如何在空間中定位元素,使它們和諧悅目。憑借這些知識,我的生活發生了變化,我開始以不同的眼光看世界。后來,我開始設計界面,我試圖將相同的原則付諸實踐,屏幕上的所有信息都應該形成一個非常令人滿意的視覺構圖。
如果你將這些原則應用于移動應用程序設計,那么我們發現必須顯示適量的信息。例如,如果一個屏幕必須列出人們的姓名,設計師通常會選擇一些短而普通的名字,并將它們完美地排列在一起,沒有留下任何可能破壞設計或使其在以后崩潰的意外長名稱的空間。
這種方法基于這樣的假設:在混亂和不完美中沒有美,盡管這兩個方面在現實世界中經常出現。但是視覺界面并不是一件值得欣賞的靜態藝術品; 它們是動態的,功能性的空間,可以改變和適應每個人使用它們。我們不應該屈服于純粹為美學設計的誘惑,因為我們永遠無法控制界面必須呈現給人們的一切。
相反,我們必須設計變革!這就是日本人所說的wabi-sabi,一個“以接受短暫和不完美為中心的世界觀”。
因此,以不同的方式思考和設計是很重要的:
● 嘗試以多種方式在你的設計中呈現數據;
● 盡可能使用真實數據。
當你嘗試以幾種方式呈現數據時,包括一些不可預測的數據,你將能夠測試界面是否已準備好處理超出設計“舒適區”的這些情況。此外,為極端情況做好準備。
如果你已經推出了該產品,這將更容易,因為你可以關注實際數據并將其用于你正在進行的設計過程中作為參考。但是如果你正在研究一些新的東西,那么你將不得不深入挖掘,做一些研究,并嘗試了解以后如何信息。你還可以與后端團隊的開發人員討論此問題,他們將能夠更好地向你解釋將存儲和呈現的數據類型。
我給你一個更具圖形的例子,我的開發者朋友稱之為“漂亮的朋友綜合癥”。當我們設計一個包含人物圖片的屏幕時,如用戶檔案,我們傾向于使用在設計中看起來很好并且很漂亮的人的照片。然而,當他看到這樣的設計時,我的朋友說:“我希望我有朋友這么帥。”
因此,“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣,你就可以測試重疊元素在不同背景下的外觀,讓你可以看到對比度和易讀性是否仍然完好無損。
不要過于樂觀
對于應用程序的工作方式,我們天生就是樂觀主義者。我們認為一切都會快速順利地進行,而且不會中斷,因為......為什么不呢?這就是為什么我們有時會忘記如何設計和處理用戶可能在以后遇到的一些可能不那么好的情況。
列舉幾例,如果突然互聯網連接中斷,會發生什么?或者,如果瀏覽器在執行任務時嘗試連接到API時出錯?如果連接速度太慢,是否會有加載指示器(例如微調器或進度條),或者在加載實際數據時是否會有一些占位符填充顯示塊?那么刷新應用程序的某些屏幕的可能性呢?什么時候(以及在哪種情況下)可能?
正如你所看到的,我不是在談論用戶所犯的錯誤(例如,在填寫表單時犯了錯誤),而是關于不受其控制但仍然發生的錯誤。在這種情況下,與開發人員交談,并了解不同屏幕上可能出現的問題,然后設計一種可以讓用戶輕松解決問題的方法,讓他們可以選擇稍后再試或者執行不同的操作。
無論如何,確定觸發每個錯誤的特定條件并為每個案例設計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當的響應,并知道下一步該做什么來解決問題。即使它有點麻煩,也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素,它們一起形成應用程序的整個布局。然而,當我們把重點放在用戶界面上的一個整體,我們往往忘記了一些元素也有較小的任務來執行的總體目標做出貢獻。
如果有一個觸發某種交互的按鈕或項目,那么請向前看并考慮下一步:在執行操作時是否會顯示加載狀態?它可以因某種原因被禁用嗎?如果用戶按住按鈕一段時間該怎么辦?會有任何反饋意見嗎?就像整個屏幕有不同的狀態一樣,同樣也適用于單個元素。
此外,請考慮產品的邏輯如何與用戶的心智模型相匹配,幫助他們準確有效地實現目標并以有意義和可預測的方式完成他們的任務。
我要做的就是解決所有這些問題,就是停止我正在做的事情,暫停,退后一步,查看整個多屏幕流程的大局,并了解一系列步驟和動作。我將尋找導致該點的多條路徑,以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情,慢慢地,認真地,謹慎地執行動作。如果這對你來說太具有挑戰性,因為你之前可能已經多次這樣做了,現在它變成了一種自動化的任務,并問同事,朋友或活躍用戶看看設計或原型。看到其他人使用并與你的設計進行互動可能很有啟發性,因為我們往往過于接近并且過于熟悉它,因此可能會忽略一些事情。
為您的屏幕設計
當我在設計時,我通常會將手機放在我旁邊,以便我可以預覽我的工作并實時進行調整。
我認為這是一個很好的做法,但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸(特別是在Android平臺上); 試著考慮所有可能的變化。
知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設備。
在為各種屏幕尺寸和方向準備設計時,不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況,以及如何進行必要的調整,即使它意味著偏離原始設計。
在這些情況下,我們之前討論過的相同原則仍然適用:不可預測的情況,不同類型的內容,可變數量的信息,缺少數據等等。你必須針對各種可能的場景進行設計。不要陷入將屏幕設計為產品的單獨部分的陷阱,它們都是相互連接的。
這不僅對你有用,而且對開發人員也有幫助,他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。
今天你需要什么,明天你可能需要
你可能已經注意到,本文中許多要點的目標是減少意外情況。即便如此,在很多情況下你也無法得到明確的答案。開發人員經常會問,“那么,如果我這樣做會發生什么呢?”指出你以前沒有考慮過的潛在結果。
如果發生這種情況,那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考,并考慮如何將該特定問題的答案設計為以靈活的方式工作,以便你以后可以重用它。
畢竟,這就是我們UI設計師所做的 - 我們設計和定義適應未預料到的狀態,條件和流程的靈活系統。將你的界面視為移動,更換智能部件的生動生態系統,而不是單個像素塊的集合。
在此過程的這一部分中,你需要與團隊中的開發人員密切合作,主要是為許多不同情況定義一組行為規則。但保持良好的平衡 - 盡量不要過度設計。用一點常識來設定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住,良好的設計系統是靈活的,并且在某些情況下為規則的某些例外做好準備。
另一方面,想一想你已經設計過的元素如何調整以適應新的情況。如果你創建一個設計組件庫,你將會看到更好的結果,因此,只需快速瀏覽一下庫,你就會知道是否需要從頭開始設計某些東西,或者你可以使用現成的東西。
結論
基于設計系統的優雅解決方案具有明確定義的問題將使我們工作中的視覺設計更加有趣,因為我們可以專注于界面的改進,拋光和愉悅,而無需無休止地迭代。當我們過早地跳到視覺效果時,我們必須同時解決問題并制作界面,這通常會導致沮喪和倦怠。
改變你的工作流程可能在一開始就具有挑戰性,但過了一段時間你會喜歡在限制范圍內工作。這也將改變你的思維方式,并希望幫助你擺脫對視覺細節的關注。你將成為一個更加完善和有能力的用戶體驗設計師,使用適當的可交付成果,而不僅僅是生成無窮無盡的視覺模型和組合。
設計師需要每天解決問題,找到合適的解決方案需要深入研究和精心策劃的測試。我們可能還沒有答案,但我們確實知道我們有時可以采取的某些捷徑。
“啟發式”是一種簡單而有效的規則,可以幫助我們形成判斷并做出決策。我們可以將它們視為UI最佳實踐的一般指導原則。
注意:這些規則有其時間和地點,并不能替代可用性測試。
我們今天要看看八大黃金法則,對設計會產生哪些影響。
1. 爭取一致性
設計“一致的接口”意味著對類似的情況使用相同的設計模式和相同的動作序列。這包括但不限于在用戶使用中在提示屏幕,命令和菜單中正確使用顏色,排版和術語。
請記?。阂恢碌慕缑鎸⑹鼓愕挠脩舾菀淄瓿伤麄兊娜蝿蘸湍繕恕?
2. 啟用常用快捷方式
說到使用UI規則作為快捷方式,你的用戶也將受益于快捷方式,特別是如果他們需要經常完成相同的任務。
專家用戶可能會發現以下功能有用:
· 縮略語
· 功能鍵
· 隱藏的命令
3. 提供信息反饋
你需要讓用戶隨時了解流程每個階段的情況。這種反饋需要有意義,相關,清晰,并符合上下文。
4. 設計對話以進一步溝通
動作序列需要有開頭,中間和結尾。任務完成后,如果是這種情況,請為他們的用戶提供信息反饋和下一步明確定義的選項。不要讓他們疑惑!
5. 提供簡單的錯誤處理
設計一個良好的界面,應該盡可能避免錯誤。但是當錯誤發生時,你的系統需要讓用戶輕松了解問題并知道如何解決問題。處理錯誤的簡單方法包括顯示清晰的錯誤通知以及描述性提示以解決問題。
6. 允許輕松撤銷動作
在發生錯誤后找到“撤消”選項可以立即解決。如果他們知道有一種簡單的方法可以解決任何事故,那么你的用戶就會感到不那么焦慮,更有可能探索各種選擇。
此規則可應用于任何操作,操作組或數據輸入。它可以從簡單的按鈕到整個操作歷史。
7. 支持內部控制點
定義:
“在人格心理學中,控制源是人們相信他們能夠控制事件結果的程度” - Julian Rotter
為用戶提供控制和自由非常重要,這樣他們才能感覺到他們負責系統,而不是相反。用戶應該是行動的發起者而不是響應者。
8. 減少短期內存過載
我們的注意力有限,我們可以做的任何事情都可以讓用戶的工作更輕松,更好。我們更容易識別信息而不是回憶信息。如果我們保持接口簡單和一致,遵守模式,標準和慣例,我們已經為更好的識別和易用性做出了貢獻。
我們可以添加一些功能,以幫助我們的用戶根據他們的目標。例如,在電子商務環境中,最近查看或購買的項目列表。
結論
雖然你應該始終采用基于啟發式的決策,但遵循一系列規則和指南將引導你朝著正確的方向前進,并允許你在設計過程的早期發現主要的可用性問題。這八個原則適用于大多數用戶界面。
你也可以使用它們作為靈感來創建自己的啟發式方法,或者結合現有的示例來解決你自己的設計問題。
藍藍設計的小編 http://www.syprn.cn