老色批在线播放视频网站免费-老色批影院-老色鬼福利 A级黄色片视在线播放_日韩欧美永久中文字幕视频_2

首頁

常見的 10 大圖標設計風格

杰睿

圖標是產(chǎn)品中不可或缺的部分,隨著設計趨勢的不斷變化,圖標設計風格也在不斷豐富。在產(chǎn)品中會出現(xiàn)哪些常見的圖標設計風格呢?結合產(chǎn)品案例體驗,今天黑馬哥為大家簡單梳理一下,列舉出常見的 10 個圖標設計風格。
常見的 10 大圖標設計風格
 
 
 
 
1. 線性功能圖標
線性功能圖標是產(chǎn)品中最常見的風格,設計時控制好圖標規(guī)范即可。常見的多為單色(無彩色系、品牌色等),也有用品牌色作為點綴色的案例。
常見的 10 大圖標設計風格
 
 
 
 
2. 面性功能圖標
面性功能圖標與線性風一樣,也是產(chǎn)品中最常見的風格。有單色單圖形、多色疊加風、微漸變風格等表達形式。
常見的 10 大圖標設計風格
 
 
 
 
3. 磨砂玻璃質感圖標
磨砂玻璃質感圖標是輕質感的表達形式之一,也是近些年較為流行的趨勢??梢员馄揭部梢晕①|感,在立體感圖標上面也可以運用這類效果。
常見的 10 大圖標設計風格
 
 
 
 
4. 微質感圖標
微質感圖標相較于扁平化設計而言,更能突出細節(jié)的深入和真實感的體現(xiàn)。微質感圖標的層次感也更豐富,該技法也是設計師的必備技能。
常見的 10 大圖標設計風格
 
 
 
 
5. 晶白風圖標
晶白風圖標常用于金剛區(qū)欄目,利用白色不透明度關系和背景色關系進行圖標設計,圖標質感、層次感、空間感等都能得以體現(xiàn)。
常見的 10 大圖標設計風格
 
 
 
 
6. 立體感圖標
立體感圖標分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設計趨勢的普及,立體感圖標的運用也逐步普及,也可以利用 AI 工具完成該類型圖標。
常見的 10 大圖標設計風格
 
 
 
 
7. 插畫風圖標
插畫風圖標是插畫風格的簡化融入,以此提升圖標設計的特征感,使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。
常見的 10 大圖標設計風格
 
 
 
 
8. 主題化圖標
主題化圖標設計風格多樣,會結合活動主題或者節(jié)日慶典等內(nèi)容,根據(jù)主題設計圖標更能體現(xiàn)產(chǎn)品溫度。
常見的 10 大圖標設計風格
 
 
 
 
9. 寫實類圖標
寫實圖標是以技法表現(xiàn)實物特征,比較考驗質感表現(xiàn)、透視光影等技法能力。隨著扁平化趨勢,寫實類設計逐步被淡化,但是也有部分產(chǎn)品會局部性運用。
常見的 10 大圖標設計風格
 
 
 
 
10. 實物圖圖標
直接將產(chǎn)品實物圖作為圖標相對較少,但是依然有產(chǎn)品會選擇使用,還原其內(nèi)容表達的真實性。
常見的 10 大圖標設計風格
 
 
 
以上為產(chǎn)品中常見的圖標設計風格,根據(jù)不同需求采用。對于設計師而言,這也是首先需要掌握的圖標技能。
 
本文由 @黑馬青年(heimaui)原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。

作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzMDg3Mg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

小卡片大布局-帶你掌握卡片設計攻略

杰睿

UI界面中的卡片設計是一種常見且有效的設計方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗。通過分割特性,可以賦予界面更多的層次感,為用戶帶來視覺上的愉悅。然而,卡片式設計并不是無懈可擊的,由于其分割的特性可能會對用戶的沉浸式瀏覽體驗產(chǎn)生一定的影響,例如造成橫向和縱向空間的浪費等問題。因此,在決定是否使用卡片式設計時,我們需要根據(jù)實際場景和內(nèi)容形式進行判斷,而不是刻意追求“卡片式”而設計。
卡片在移動端設備上,運用的越來越多,然而,在選擇使用卡片設計、視覺呈現(xiàn)方式以及其優(yōu)點和缺點等關鍵因素方面,仍然存在一些被忽視的細節(jié)。在進行卡片設計時,我們應該注意哪些細微之處呢?以下我們就一起來探討下如何設計卡片。
一、卡片的概念
小卡片大布局-帶你掌握卡片設計攻略
 
 
什么是卡片?
 
在日常生活中,一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片,這些卡片主要是用來傳遞卡片本身的一些信息。例如使用者可以從銀行卡上獲取卡片的所屬銀行、卡號等信息;可以從名片中知道卡片所屬人以及此人的一些基本信息等。
UI界面中的卡片設計是一種常見且有效的設計方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗。
小卡片大布局-帶你掌握卡片設計攻略
 
 
卡片出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標簽、便利貼、會員卡..等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實生活中的某個特定信息。卡片,通常包含圖片或文本信息,是一種有效的信息承載方式。UI界面中的卡片設計是一種常見且有效的設計方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗。
小卡片大布局-帶你掌握卡片設計攻略
 
 
卡片式設計是一種常見的UI組件,它能夠將不同的內(nèi)容分層次組合在一起,從而讓頁面看起來更有秩序感??ㄆǔS蓸祟}、內(nèi)容描述、圖像、按鈕等元素組成,自帶簡約和易用的屬性,方便用戶快速理解和操作。
小卡片大布局-帶你掌握卡片設計攻略
 
 
二、卡片的交互設計
小卡片大布局-帶你掌握卡片設計攻略
 
 
當用戶與卡片進行交互時,卡片需要星現(xiàn)特定的視覺反饋。常見的卡片狀態(tài)包括默認、
懸浮(pc端)、激活、選中
等。
小卡片大布局-帶你掌握卡片設計攻略
 
 
為了更好的區(qū)分卡片和背景,可以用填充底色、措邊、添加陰影來讓卡片與背景有區(qū)分。
小卡片大布局-帶你掌握卡片設計攻略
 
 
卡片的可讀性主要取決于字體的選擇和字號的大小,例如,即使兩個卡片具有相同的布局,但如果選擇的字體和字號不同,它們的可讀性和視覺效果可能會有很大的差別。
小卡片大布局-帶你掌握卡片設計攻略
 
 
卡片上的文字間距最好有一定的規(guī)律,這里可以按網(wǎng)格法來規(guī)劃,比如8px網(wǎng)格,10px網(wǎng)格等等。網(wǎng)格的使用其實可以很靈活,比如我這里的卡片其實就用到了8px網(wǎng)格,各間距就會用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理,這樣做目的一方面是為了讓界面有秩序,另一方面是提升決策效率。
小卡片大布局-帶你掌握卡片設計攻略
 
 
在設計卡片布局時,通常會將多個卡片以網(wǎng)格的形式排列在頁面上,以保持水平方向和垂直方向的對齊,這樣可以使頁面看起來更有序、更規(guī)范。
小卡片大布局-帶你掌握卡片設計攻略
 
 
當卡片中包含標題、內(nèi)容、圖片和按鈕等多種元素時,需要考慮到標題與圈片的位置關系以及標題和內(nèi)容的長短等因素。例如,如果卡片的頂部是標題,由于標題字數(shù)可能不確定,我們可以在卡片上方保留至少兩行的空間以容納標題,而保持卡片內(nèi)的圖片和按鈕位置不變。
三、常見的卡片樣式
小卡片大布局-帶你掌握卡片設計攻略
 
 
小卡片大布局-帶你掌握卡片設計攻略
 
 
邊距卡片,
這種類型的卡片在UI設計中最為常見,柔和的固角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。
小卡片大布局-帶你掌握卡片設計攻略
 
 
懸浮卡片
并非模態(tài)彈窗,與模態(tài)彈窗相比,懸浮卡片無需主動操作觸發(fā),可作為臨時控件或長期固定顯示。此外,懸浮卡片能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,多則展示全部內(nèi)容,少則僅顯示關鍵信息,非常靈活。
通欄卡片
具有更強的視覺阻斷,對區(qū)分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背最色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。
四、卡片、列表、無框設計的區(qū)別
什么是卡片設計
卡片式設計借用了現(xiàn)實世界中的卡片的特征,就像一張信用卡或名片,它承載了圖片、文字、按鈕等元素,以一個縮略的形式提供了快速瀏覽信息的模塊。在視覺表現(xiàn)形式上,卡片式設計可以分為扁平式卡片和通欄式卡片,前者更像傳統(tǒng)意義上的卡片,上下左右都留有空隙:后者僅在上下留有空隙,甚至無空隙。
卡片式設計的優(yōu)點
1.獨特的設計語言
,卡片本身是一種設計語言,就像面形圖標一樣具有矩形的形狀,帶著圓角或直角,甚至還有輕微的陰影。這種獨特的設計語言可以快速地從扁平化設計中區(qū)分出來,帶給用戶強烈的辨識度。例如 Google 將卡片作為 Material design 的設計語言,運用到 Android系統(tǒng)所有的移動設備上,形成了獨一無二的視覺風格。
小卡片大布局-帶你掌握卡片設計攻略
 
 
2.靈活的空間擴展
,相比傳統(tǒng)的列表式設計只能縱向滾動瀏覽,卡片式設計的空間擴展性更加靈活多變。由于每一個卡片都是獨立存在的因此既可以縱向滾動,也可以橫向滑動。例如馬蜂窩的卡片式設計通過橫向滑動在狹窄的屏幕上展示更多內(nèi)容,花瓣的兩列卡片式設計也為界面空間提供了更多的展示內(nèi)容,這些都大大提高用戶的瀏覽效率。
小卡片大布局-帶你掌握卡片設計攻略
 
 
3.清晰的視覺呈現(xiàn)。
卡片化繁為簡,將不同類型的元素有效地組織!在一起,形成一個封閉式的視覺形式。每一個卡片之間都具有獨立性不會相互干擾,它們保持著一致的外觀,讓界面看上去干凈和簡潔。例如 App Store 和去哪兒賦予每一個卡片一個主題,以簡單明快的內(nèi)容表現(xiàn)形式吸引用戶的注意力,簡潔、連貫的卡片也避免了因為內(nèi)容太長讓用戶產(chǎn)生畏懼心理。
小卡片大布局-帶你掌握卡片設計攻略
 
 
4.易于的內(nèi)容整理。
卡片是一個容器,將不同緯度的內(nèi)容進行區(qū)分或將相同緯度的內(nèi)容歸納在一起,形成一個獨立的模塊,能有效地避免信息散亂和分類不清晰的狀況發(fā)生,讓界面的視覺層次變得清晰。例如途牛在一個界面中展示了多種不同形式的卡片式設計,通過卡片的大小顏色、圖文組合進行區(qū)分,視覺層次清晰明了。再例如騰訊視頻將相同功能的列表進行分組,有助于用戶快速獲取信息。
小卡片大布局-帶你掌握卡片設計攻略
 
 
5.特殊的功能屬性。
卡片不僅是內(nèi)容的容器,同樣也是操作和交與的載體,由于它的視覺表現(xiàn)是獨立存在的,因此可以用于背景之上的對話框設計,以強烈的視覺表現(xiàn)力尋求一次互動。例如進入后彈出一個對話框,請求用戶開啟通知。再例如滴滴出行和美團外賣將一次活動推廣展現(xiàn)在卡片上,以此快速吸引用戶的注意力。
小卡片大布局-帶你掌握卡片設計攻略
 
 
什么是列表式設計
列表式設計是 App 中最常見的表現(xiàn)形式,它使用分割線對不同的元素進行有效的組織,幫助用戶理解界面的視覺層次。在視覺表現(xiàn)形式上,列表式設計根據(jù)分割線的不同長度可以分為半分割線式列表、縮進分割線式列表和通欄分割線式列表。
列表式設計的優(yōu)點
1.輕量化的設計。
列表式設計是真正意義上的扁平化設計,不像卡片式設計那樣有著清晰的視覺層次,它讓所有的信息內(nèi)容處于同一個平面。這樣的好處是干凈的界面可以減少對用戶的視覺干擾,以便用戶順暢的進行瀏覽。親切和友好的用戶體驗是列表式設計的最大優(yōu)點,它非常適合于形式簡單的信息內(nèi)容。例如網(wǎng)易云音樂和今日頭條的每一條動態(tài)都有著相似的形式,輕量化的列表式設計讓用戶的瀏覽變得輕松和優(yōu)雅。
小卡片大布局-帶你掌握卡片設計攻略
 
 
2.提升瀏覽效率。
列表式設計沒有寬厚的空隙作為信息內(nèi)容的區(qū)分而是使用一條細窄的分割線。它非常適合于非常多的同類的信息內(nèi)容、可以極大地節(jié)省界面的空間,讓狹小的屏幕顯示更多內(nèi)容,在無形中就提升了用戶的瀏覽效率。例如 微博 和騰訊新聞的商品都是左圖右文的結構,使用簡單的列表式設計,有助于用戶快建地進行瀏覽。
我們再來試看分析微博動態(tài)為什么使用卡片式設計,而不是列表式設計。首先,微博強調每一個動志的豐富內(nèi)容和獨特個性,希望用戶進行分事、評論和點贊操作,卡片式設計有效地將用戶的注意力停量在當前的卡片上;其次,五花八門的內(nèi)容形式使用卡片式設計易于整理,可以保持清晰的視覺層次。
什么是無框式設計
無框式設計是一種去形式化的設計,它強調化繁為簡,去除一切與內(nèi)容無類的裝飾性元素,旨在突出內(nèi)容本身、好讓重要的信息及功能更容易被關注,讓用戶更加清晰和直觀地進行瀏覽。在無框式設計中,你幾乎看不到區(qū)分內(nèi)容的分割線,它通過大間距就完成了視覺層次的劃分留白是它的最大武器。
小卡片大布局-帶你掌握卡片設計攻略
 
 
無框式設計的優(yōu)點
1.極簡主義風格。
相比卡片式設計追求“多”,無框式設計則追求“少”,即用最簡單的形式和最理性的設計創(chuàng)造最深入人的藝術感受例如余音使用白色的背景,左小右大的邊距和大量的留白,呈現(xiàn)出一種獨特的產(chǎn)品氣質。列表設計去掉分割線,干凈到一塵不染的界面讓用戶產(chǎn)生極為深刻的印象。
2.掌控注意力
。無框式設計最顯著的特征就是去除裝飾性的分割線通過間距的親密和疏遠對比進行視覺層次的劃分。大量的留白設計把空間留給內(nèi)容,把內(nèi)容留給用戶。使用了無框式設計沒有了那些分割線的干擾,有效地掌控了用戶的注意力,讓用戶把目光集中在內(nèi)容本身。
3.保持界面整潔。
設計是連貫、統(tǒng)一的,沒有了邊框可以讓界面保持干凈、整潔的畫面。而一旦有了邊框,這種簡潔的設計就會被打部精王德商處可見那些細碎的分副線或描邊,使得界面變的擁擠不堪。大部分用戶都喜愛干凈、整潔的畫面,微博和騰訊新聞就是這樣的設計。
五、卡片的應用場景
小卡片大布局-帶你掌握卡片設計攻略
 
 
瀑布流
瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設計,它最大的優(yōu)點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。
信息流
信息流主要通過文字、圖片或視頻等媒介來展示較長的內(nèi)容,這需要用戶花費一定的時間進行滑動和瀏覽,才能篩選出對自己有用的信息。
左右滑動
在音樂、視頻等以圖片為主要內(nèi)容的產(chǎn)品中,卡片式左右滑動的設計最為常見。這是因為卡片式設計能夠更好地展現(xiàn)內(nèi)容的層次感和吸引力,尤其對于以圖片為主的產(chǎn)品來說,卡片式設計可以提供更豐富的視覺效果,增強用戶的瀏覽體驗。
頁面頭部
卡片式設計是一種有效的布局方式,它可以在個人中心、個人主頁、會員等頁面中,將關鍵信息進行整合和概括,從而形成清晰、連貫的視覺結構。
 
六、卡片的設計原則
在UI界面中,卡片設計是一種重要的布局方式,它以其簡潔性、模塊化和可自定義特性而備受設計師與使用者青睞。以下是卡片設計時需要遵循的一些關鍵原則:
小卡片大布局-帶你掌握卡片設計攻略
 
 
一、簡潔清晰原則
信息精煉:每張卡片應僅展示關鍵信息或功能,防止信息負荷過大,確保用戶能夠快速獲取所需內(nèi)容。
視覺元素簡潔:避免在卡片上添加過多的裝飾性元素,保持設計的簡潔性。
二、一致性原則
視覺風格統(tǒng)一:不同卡片之間應保持一致的視覺風格,包括顏色、字體、圖標等,以提高用戶識別及使用效率。
布局規(guī)范:卡片的布局應遵循一定的規(guī)范,如邊距、圓角大小等,以保持整體的一致性。
三、層次性原則
信息層級明確:通過字體大小、顏色、圖標等方式明確信息的層級關系,引導用戶按照重要性順序瀏覽信息。
視覺空間感:利用投影、前后顏色設定等手段提升整體設計層次感,使卡片看起來更加立體和自然。
四、交互體驗原則
操作便捷:為用戶提供充足的操作空間與方式,如點擊、滑動等,鼓勵用戶深度參與信息生成與傳播過程。
反饋及時:在用戶與卡片進行交互時,應提供及時的反饋效果,如顏色變化、動畫等,以增強用戶的交互體驗。
五、適應性原則
響應式設計:卡片設計應能夠適應不同屏幕尺寸和設備類型,確保在各種環(huán)境下都能保持良好的顯示效果。
內(nèi)容靈活:卡片的內(nèi)容應具有一定的靈活性,可以根據(jù)實際需求進行調整和更新。
六、設計細節(jié)原則
圓角設計:圓角的設定應符合整體的風格調性,大圓角表達柔和,小圓角表達硬朗。
邊距與留白:合理的邊距和留白可以提升整體設計的層次感,使內(nèi)容更加突出且易于閱讀。
標題與正文:標題應簡短明了,用于說明卡片的內(nèi)容;正文部分則應簡潔精煉,避免冗余信息。
卡片設計在UI界面中扮演著重要角色,它不僅能夠提升用戶體驗,還能增強信息的可讀性和可理解性。因此,在進行卡片設計時,應遵循簡潔清晰、一致性、層次性、交互體驗、適應性以及設計細節(jié)等原則,以確保卡片設計的質量和效果。
總結
隨著科技的不斷進步和用戶需求的變化,卡片設計也在不斷發(fā)展和創(chuàng)新。未來,卡片設計將更加注重個性化和智能化。通過用戶行為分析和機器學習等先進技術手段,可以為用戶提供更加精確和個性化的推薦和服務。同時,虛擬現(xiàn)實(VR)和增強現(xiàn)實(AR)等新技術的發(fā)展也將為卡片設計帶來更多元化的應用場景和更豐富的用戶體驗。
綜上所述,UI界面中的卡片設計是一種重要且有效的設計方式。通過遵循設計原則、掌握設計技巧并借鑒優(yōu)秀案例,可以設計出既美觀又實用的卡片界面。


作者:蘑菇小象117
鏈接:https://www.zcool.com.cn/article/ZMTYzNjU2MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

B端基礎 | 彈窗設計基礎知識

杰睿

建筑設計師尤哈尼·帕拉斯瑪說、簡約并非簡單,它是通過深思熟慮后對事物本質的準確把握。知其然、知其所以然。這次文章會盡量簡潔一點。
 
奔跑的日子、總是希望優(yōu)秀的你和我一起同行。讓我們一起在藝術的環(huán)境里生菌、知識的海洋里狗刨~
 
B端基礎 | 彈窗設計基礎知識
 
 
第一部分 | 彈窗基礎知識
如果你只是想了解一下彈窗的基礎知識,那么看這部分就夠了。只需3分鐘無痛、來去自如不影響上班哦。
彈窗定義;彈窗來歷;彈窗拆分;彈窗分類;彈窗尺寸;
B端基礎 | 彈窗設計基礎知識
 
 
1、彈窗定義
彈窗是用戶和系統(tǒng)交互信息的容器
。(在網(wǎng)上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個定義絕對靠譜。站的維度高,從人機交互工程出發(fā)。這定義沒錯的妥妥的。說出去基本不會有人反駁你(如果有人敢反駁你把我的名字告訴他,反正我他也不認識我哈哈哈)
 
2、彈窗來歷
彈窗最早的起源可以追溯至上世紀90年代。當時,互聯(lián)網(wǎng)廣告的投放形式主要是將廣告嵌入在頁面內(nèi)容中,但這種方式存在一些問題。廣告商擔心消費者在瀏覽負面內(nèi)容時,會將廣告與負面信息聯(lián)系在一起,從而對品牌造成不利影響。因此,網(wǎng)頁托管網(wǎng)站trippod.com利用網(wǎng)頁腳本程序,發(fā)明了一種在新開窗口發(fā)布廣告的方法,這就是網(wǎng)絡彈窗的起源。
B端基礎 | 彈窗設計基礎知識
 
 
3、彈窗拆分
整體的去分析、在大部分的彈窗類型里都會包括
關閉、內(nèi)容區(qū)、模態(tài)層
(非模態(tài)類別的沒有個元素)
B端基礎 | 彈窗設計基礎知識
 
 
3.1、模態(tài)層
模態(tài)層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強打斷的不適和跳出當前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內(nèi)容。
B端基礎 | 彈窗設計基礎知識
 
 
我個人在設計時模態(tài)層基本都是50%的純黑,但并不是一定要用50%的純黑,要結合自己的平臺業(yè)務、設計風格等方面去制定。偷偷的告訴你這個模態(tài)層加入一點微微的色彩傾向在視覺上往往會更好一點。
3.2、關閉
彈窗的關閉是用戶退彈窗的重要途徑、一般都會在彈窗內(nèi)容右上角。彈窗關閉按鈕也有在彈窗范圍外的。我們要保證彈窗關閉的清晰明確,來方便用戶操作。
在彈窗中、關閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
3.3、內(nèi)容區(qū)
內(nèi)容區(qū)的內(nèi)容是根據(jù)彈窗類型的不同,內(nèi)容就會有所不同。什么都可能有、圖標、確認信息、選擇框、輸入框。只要是頁面上能出現(xiàn)的都可能會出現(xiàn)在彈窗的內(nèi)容區(qū)域。
B端基礎 | 彈窗設計基礎知識
 
 
4、彈窗分類
彈窗的分類從交互形式差的差異。我們可以將其分為
模態(tài)類和非模態(tài)類
。這兩個大類就比較好區(qū)分,看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認等。
B端基礎 | 彈窗設計基礎知識
 
 
4.1、模態(tài)類
模態(tài)是目前我們比較常見的類型、模態(tài)類彈窗打斷用戶的操作行為,用戶必須對其進行操作才能解散彈窗,否則不能進行其他操作。模態(tài)類最常見的就是、
表單彈窗、確認彈窗
。當然還有其他的文件選擇、信息展示、等等。
B端基礎 | 彈窗設計基礎知識
 
 
4.1.1、表單彈窗
這彈窗在B端設計里是最最最常見的一種彈窗。雖然我們現(xiàn)在的系統(tǒng)大部分是很智能的。但是復雜的業(yè)務就意味著你會和系統(tǒng)產(chǎn)生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。(煩死個人)不過在你制定好一套規(guī)使用規(guī)范后?;具@樣的彈窗是不太需要設計介入的,產(chǎn)品和FE兩人一對使用模版就上了。
4.1.2、確認彈窗
這種彈窗就比較好理解了。承載較為緊急的信息,讓用戶快速處理;如:用戶未保存,就點擊離開當前頁面,通過對話框讓用戶做出選擇。在執(zhí)行一個重要信息的刪除時,通過二次詢問引起用戶的注意,讓用戶再次做判斷;這類彈窗;
4.1.3、優(yōu)點/缺點
優(yōu)點:
強不會讓用戶忽略或跳過,確保信息的交互響應;引導用戶操作;增加用戶的參與度,可以提升用戶的活躍度和參與度。
缺點:
01、會中斷用戶的操作流程,打斷用戶的思路或行為。
02、可能會影響用戶體驗,因為用戶需要等待關閉彈窗后才能繼續(xù)其他操作。如果彈窗內(nèi)容過多或過于復雜,用戶可能會感到困惑或不知所措。
03、如果過度使用模態(tài)類彈窗,例如頻繁彈出廣告或無意義的信息提示,用戶可能會對其產(chǎn)生反感甚至抵制使用相關軟件或平臺。
4.2、非模態(tài)
可以不打斷父應用程序,無需停止進度,用戶仍可以對父級內(nèi)容進行交互。大部分應用于信息的反饋和提示。常見的非模態(tài)類彈窗大概有、警告提示、全局提示、通知彈窗、氣泡確認框;
B端基礎 | 彈窗設計基礎知識
 
 
4.2.1非模態(tài)優(yōu)點/缺點
優(yōu)點:
不打斷操作流程;不會干擾用戶操作用戶體驗更好;常用于輕量級的信息或提示。
缺點:
可能會被忽略,導致信息傳遞不暢;不適合展示重要信息;形式通常比較單一,不能滿足復雜的展示需求
4.3、其他
林子大了什么鳥兒都會有,一定會有我沒有接觸到的前沿交互方式。所以這個其他留給未來更優(yōu)秀的我們?nèi)グl(fā)現(xiàn)。
5、彈窗尺寸
彈窗的尺寸和電腦屏幕分辨率是有關系的。主流的分辨率1920*1080像素。其他的還有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在設計界面是一般用的是1440*900的設計尺寸。在做彈窗的時候已經(jīng)不考慮1366*768分辨率以下的屏幕了。多以彈窗的安全高度要小于600px
彈窗的寬度還是要根據(jù)自己業(yè)務需求去定義的。比如我們的業(yè)務最寬的彈窗1280像素。像站酷的查看作品他是整屏的寬度。
模特還怪好看的
模特還怪好看的
 
我在我們平臺定義的表單彈窗寬度雖然很不嚴謹、好像也沒有什么理論支撐。但是確一直再用。尺寸分別為、400、600、800、1000、1280。之后還是要細化的。這樣的定義彈窗尺寸導致的結果是,開發(fā)還原想過不是太好。
B端基礎 | 彈窗設計基礎知識
 
 
第二部分 |彈窗2.0項目里
承載內(nèi)容、為什么會有這么多的彈窗類型。問題不在于彈窗,而在于合適的承載內(nèi)容和交互類型。
B端基礎 | 彈窗設計基礎知識
 
 
1、彈窗、抽屜、界面
在項目里我們應該怎么去選擇這三種內(nèi)容呈現(xiàn)方式呢。如果你只是設計師大部分時間你也不用選。你只有建議的權利沒有決定的權利。如果產(chǎn)品原型是彈窗、你給做了個抽屜。你可以從下面幾方面去找支撐點去和產(chǎn)品撕逼、干翻他的原型用你的效果圖。
AI的提高畫面質量還是有待提高呀
AI的提高畫面質量還是有待提高呀
 
1.1、內(nèi)容
彈窗和抽屜或界面他們承載的內(nèi)容量是不一樣的。所以在選擇用那種交互方式時可以從我們業(yè)務需要展示的內(nèi)容量來考慮。簡單的確認或通知適合用彈窗、需要展示大量內(nèi)容或進行復雜的功能時就適合用抽屜或者界面了。
1.2、體驗
我們可以從用戶體驗方面出發(fā)、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進程的成本。一致性、確保與其他業(yè)務模塊交互方式保持一致,為用戶提供一致的體驗。
1.3、效率
考慮到用戶的使用成本、B端設計中效率的提升優(yōu)先率老高了??紤]系統(tǒng)的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的??偟膩碚f核心是提升效率、保證我們用戶好的體驗。
2、彈窗交互優(yōu)缺點
當涉及到B端彈窗的交互方式時,有以下幾點核心優(yōu)缺點:
B端基礎 | 彈窗設計基礎知識
 
 
2.1、優(yōu)點
提供及時反饋
彈窗可以快速向用戶顯示重要的信息或請求,使用戶能夠即時了解系統(tǒng)的狀態(tài)或需要執(zhí)行的操作。
簡化操作流程
對于某些復雜的操作或任務,彈窗可以提供直觀的界面和簡化的步驟,使用戶更容易完成目標。
吸引用戶注意力
通過使用彈窗,可以確保用戶在操作過程中不會被其他界面元素分散注意力,從而更專注于當前的任務。
提供額外的信息或功能
彈窗可以包含更多的詳細信息或額外的功能選項,使用戶能夠更深入地了解或操作某個特定內(nèi)容。
2.2、缺點
干擾用戶操作
過度或不合適的彈窗可能會干擾用戶的正常操作,打斷用戶的工作流程,影響用戶體驗。
誤導用戶
不清晰或誤導性的彈窗信息可能會使用戶產(chǎn)生困惑或誤解,導致錯誤的操作或決策。
影響性能
彈窗的彈出和關閉可能會增加系統(tǒng)的負擔,影響性能和響應速度。
不符合用戶習慣
對于習慣于傳統(tǒng)界面的用戶來說,過于復雜或與眾不同的彈窗交互方式可能會造成使用上的困擾和不適應。
3、我的一些設計
我們項目里把升級彈窗做成了模版、廣告彈窗也是模版。當然像二次確認這樣的彈窗是組件,上貨看東西。
B端基礎 | 彈窗設計基礎知識
 
 
這個是系統(tǒng)的一個展示彈窗、和一個從彈窗形式優(yōu)化到抽屜的模塊界面。
B端基礎 | 彈窗設計基礎知識
 
 
這個就是一個在線聊天界面。是從SaaS里跳轉新建頁面。
大概是想了想、平時做的項目確實比較碎、最近也沒做整理盒復盤。所以界面的展示就不放太多了。而且有的信息頁模糊了。不是我不信家人們。是我不信自己、朦朧也是一種美吧。哈哈哈
 
B端基礎 | 彈窗設計基礎知識
 
 
最后
我大學設計史陳老師告誡過我們。她說同學們,我其實不怕你們眼高手低。我怕的是你們眼都不高。和優(yōu)秀的人一起前行、希望和優(yōu)秀的你們一起去經(jīng)歷設計、生活、工作的美好。
期待你的加入、我們的大伐木累。我可以作品集指導反正閑著也沒事不要錢。我和群里的小伙伴都是多年一線設計師來自于天南海北,不乏有互聯(lián)網(wǎng)大廠設計師。再次
期待你的加入...
 
參考
優(yōu)設網(wǎng):4個方面層層遞進,分析如何設計B端產(chǎn)品的彈窗
知乎:B端設計指南04-彈窗
知乎:運營彈窗的設計要點拆解
知乎:淺談B端產(chǎn)品彈窗一級設計方法
人人都是產(chǎn)品經(jīng)理:WEB端彈框掌握著幾天就夠了
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

設計的兩面性:理性決策與感性表達

杰睿

引言
設計應該是感性的還是理性的?設計是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會引起爭議無數(shù),每個人對此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點看似正確,卻缺乏任何實質性的指導價值。
實際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設計”?有些人認為是設計決策的過程,而有的人則認為是最終產(chǎn)出的設計作品。大多時候,理性和感性兩種觀點看似針鋒相對,實際上是站在設計的不同層面進行討論。
設計的兩面性:理性決策與感性表達
 
 
 
01|設計決策
從設計決策的角度來看,感性設計指的是設計師在設計過程中主要依靠個人情緒或情感進行創(chuàng)作。許多人誤認為,只要在設計時能與用戶產(chǎn)生共情,理解其情緒波動,并將這些喜怒哀樂、喜好厭惡融入設計作品,就算是感性設計了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對外界事物產(chǎn)生的直接感受和情緒反應,強調的是個人視角。
在藝術領域,感性占據(jù)主導地位,但設計并非藝術。設計的主要目標是解決問題和滿足特定需求,而藝術更多地關注自我表達和情緒傳遞。設計始終受到客戶需求、商業(yè)目標、市場趨勢和技術可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設計與藝術的顯著區(qū)別。
設計的兩面性:理性決策與感性表達
 
 
站在感性“對立面”的理性,將設計視為一項工程或科學,力求流程化和系統(tǒng)化,講究方法論,注重各方面的調研,一切動作因問題存在而起,以問題解決而終
。甚至在實際場景中持續(xù)觀察作品表現(xiàn),以期得出可復用的設計模型或定律,為后人更加高效地解決類似問題提供幫助。
所以,從解決問題的本質屬性出發(fā),理性應該才是設計的底色。數(shù)據(jù)驅動、方法論支撐、可用性測試、競品分析、用戶研究等都屬于理性思維的具象化體現(xiàn)。
由于大部分設計師的出身多以藝術打底,所以一旦設計與藝術的界限在心中變得模糊,會習慣性地
將產(chǎn)品看作自己的"作品",而非用戶的"解決方案"
。如此一來,當面對來自各個方向的邊界與不確定性,本能的反應就不是思考了,而是抵觸,尤其是“完美”的方案已在腦中形成,如果突如其來的新要求打亂了這一切,哪怕假以用戶之名也要選擇懟回去,并不斷美化、合理化自己的設計理念。對設計師來說,這是一種自私、不負責任和缺乏職業(yè)素養(yǎng)的表現(xiàn)。
設計的兩面性:理性決策與感性表達
 
 
接下來,想象一下你的手中有一把槍,準備射擊某個目標。你的第一個動作是什么?大概率是瞄準。因為大家都知道,射擊前通過瞄準鏡或者準星,先對目標位置進行瞄準校正,射擊時才能提高命中率,這也正是理性對于設計的重要性所在。
理性在設計中的作用類似于瞄準動作,它幫助我們在設計過程中做出科學的決策,確保設計方案的準確性和可執(zhí)行性。未經(jīng)理性思考的設計,就像是不瞄準就立即開槍,其結果往往難以預測。當然也可能會擊中目標,這基本上取決于兩個因素:
  1.  
    目標遠近:
    近處的目標,即使不瞄準,也很容易擊中;但對于遠處的目標,命中率則必然大幅下降。我們可以把目標遠近理解為設計需求的難易程度,對于簡單需求,不用過多的理性分析,直接設計也能完成任務,但面對復雜的設計項目,如果不進行充分的理性分析上手就畫,大概率就要偏離產(chǎn)品目標了。
  2.  
    個人經(jīng)驗:
    經(jīng)過反復練習,可以練就不瞄準也能遠射的本領,隨著經(jīng)驗積累還能不斷提升距離值;在經(jīng)驗不足的情況下,還不瞄準,就只能選擇一些近距離的射擊目標了。設計也是這樣,對于某類產(chǎn)品的設計經(jīng)驗較多,不用太多理性的分析決策,也能達成設計目標;缺乏經(jīng)驗時,還憑借直覺草率地進行設計,再簡單的項目也可能會搞砸。
設計的兩面性:理性決策與感性表達
 
 
所以,沒有理性支撐而完全依賴直覺經(jīng)驗的設計,一個致命性的問題就是
不穩(wěn)定
!日常工作中,設計師的有效輸出和穩(wěn)定輸出至關重要。
 
02|設計表達
假設經(jīng)過瞄準后的射擊都能順利擊中目標,那么接下來要關注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設計作品。在這一環(huán)節(jié),理性設計指的是方案完全圍繞產(chǎn)品功能來呈現(xiàn),追求效率與極簡認知,較少運用裝飾性設計元素,即使使用,也大多兼具輔助內(nèi)容理解的功能性目的。
而感性設計,我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強調的是個人出發(fā)的情緒表達。其實,“情感化設計”才更負荷大家口中常說的“感性設計”所想表達的含義,相比“理性”的設計作品,情感化設計更具有“一擊必殺”的效果。
在滿足基礎功能需求的基礎之上,通過色彩、排版、圖像、動畫等元素給予用戶充分的情感體驗,也可以利用敘事、對話、情景、微交互等策略引發(fā)共鳴。豐富多樣的情感化設計策略,讓用戶與產(chǎn)品之間更容易建立情感連接。
設計的兩面性:理性決策與感性表達
 
 
在設計決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設計表達具有深入人心的穿透力和影響力。典型設計案例如Apple、Tesla等產(chǎn)品設計無一不是理性決策和感性表達的充分結合。因此,回到開篇提出的問題,設計應該是感性的還是理性的?我的回答是:
作為設計師,要
堅持理性的設計決策
,同時
追求感性的設計表達
。
設計的兩面性:理性決策與感性表達
 
 
 
03|兩者關系
很多人認為,不同的設計領域對理性和感性的要求有所不同,在B端產(chǎn)品中,理性占據(jù)主導地位,而C端產(chǎn)品更強調感性。從設計最終所呈現(xiàn)的效果來看,這種觀點在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場景,因此關注體驗的愉悅感受。兩者往往在風格調性上差異化很大。
但是,對于設計決策來說,無論C端、B端還是G端,都屬于設計項目,都要進行理性的需求分析和策略制定,即使某些產(chǎn)品類型最終選擇了偏感性的或情感化的表達手法,也是
基于理性決策后的一種選擇
,是實現(xiàn)目標的一種手段。
所以我想說的是,理性和感性兩者既不是對立關系,也不是并列關系,而是先后關系或嵌套關系:
理性是設計的基礎和第一步,感性則是在理性之上的選擇和展開
。
 
最后的話
作為設計師,對于設計中的理性與感性之問,不應停留在非此即彼或既要也要的簡單認知里,任何深入的思考都是有意義的。在這個存在分歧的問題上,希望我的觀點可以為你提供一點點啟發(fā),也希望各位設計師既能夠通過理性的分析制定出有效的設計策略,又能夠通過感性的表達手法創(chuàng)造出動人的設計作品,不斷提升自身的設計價值,與產(chǎn)品實現(xiàn)共贏


作者:設計來電
鏈接:https://www.zcool.com.cn/article/ZMTYyNjY2MA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

動效讓這些設計更驚艷

杰睿

微動效在產(chǎn)品設計中的運用已經(jīng)非常普及了,無論是在圖標還是界面場景中,都運用得很普遍。通過動效的輔助不僅可以提升設計情感化,也能解決更為復雜的交互場景,讓設計更驚艷。
 
最近在體驗一些產(chǎn)品的過程中,黑馬哥也發(fā)現(xiàn)了幾個借助動效表達的設計方案,效果十分的驚艷,分享出來和大家一起學習一下。
動效讓這些設計更驚艷
 
 
 
 
目錄
一、3D 動效呈現(xiàn)會員等級
二、情感化 IP 提升搜索關注度
三、結合場景的情感化動效
四、3D 空間感的 Banner 設計
五、通過動效引導用戶操作
六、微動效引導 VIP 續(xù)費
七、動態(tài)還原實時天氣
八、動態(tài) IP 引導按鈕設計
九、微動效賦予品牌活力
 
 
 
一、3D 動效呈現(xiàn)會員等級
會員中心通常會通過 3D 圖標來助力會員等級設計,除了靜態(tài)的表達也會通過動效和新穎的交互形式呈現(xiàn),以此提高會員中心的視覺表現(xiàn)力。
 
最近在體驗騰訊視頻 APP 時,會員專區(qū)在表現(xiàn)用戶會員等級的設計中,沒有使用傳統(tǒng)的徽章形式,而是以 3D 數(shù)字結合動效的形式表達。3D 動效的設計使得會員等級區(qū)別于常規(guī)形式,更有吸引力。 
動效讓這些設計更驚艷
 
 
 
 
二、情感化 IP 提升搜索關注度
IP 形象是成就品牌的關鍵因素之一,被廣泛運用到產(chǎn)品感官體驗的設計中,帶來的情感化共勉也是顯而易見的。
 
在使用悟空瀏覽器 APP 時,啟動產(chǎn)品進入首頁后搜索框上方出現(xiàn)悟空的 IP 形象,悟空呈現(xiàn)出左右環(huán)顧、上下打量,最后看向搜索框的系列動作等表現(xiàn)。不僅提高了搜索功能的關注度,也使得產(chǎn)品設計更具情感化。
動效讓這些設計更驚艷
 
 
 
 
三、結合場景的情感化動效
根據(jù)不同的業(yè)務場景進行設計表達,可以更好的服務目標用戶,而情感化的設計提升,可以拉近產(chǎn)品與用戶之間的親和力。
 
為了降低用戶等餐過程中出現(xiàn)的負面情緒,餓了么 APP 下單之后在詳情頁中根據(jù)點餐的不同設計了情感化的動效表達。無論是快餐還是冷飲等,都針對性地設計了微動效的元素,以此來表現(xiàn)當前狀態(tài)。
動效讓這些設計更驚艷
 
 
動效讓這些設計更驚艷
 
 
 
 
四、3D 空間感的 Banner 設計
通過突出設計、交互、布局結構等的創(chuàng)意性,可以使得 Banner 具備更強的差異化,以此來突出 Banner 的存在感。
 
騰訊視頻 APP 首頁的 Banner 布局也會經(jīng)常呈現(xiàn)出一些很有創(chuàng)意的方案,比如之前體驗到一個結合 3D 空間感營造的設計案例,就非常有吸引力。通過動態(tài)過度到立體空間,再恢復到默認形式,這個動態(tài)的過程演變就能讓用戶過目不忘。
動效讓這些設計更驚艷
 
 
 
 
五、通過動效引導用戶操作
針對一些使用頻次不高或者過于隱藏的功能,為了提高用戶的操作概率,會通過一些特殊的設計表達來提升用戶的關注度,引導用戶進行相關操作。
 
比如麥當勞 APP 首頁中,為了吸引用戶下拉進入二層樓,通過動效的形式設計了一個搖擺的鈴鐺,以此來吸引用戶的注意力。用戶看到像是隨風飄動的鈴鐺,就會忍不住去拉動,這就達到了引導用戶操作的目的,提高了二層樓內(nèi)容的曝光度。
動效讓這些設計更驚艷
 
 
 
 
六、微動效引導 VIP 續(xù)費
針對一些無法通過占比面積進行突出的元素,運用微動效的形式設計是常見的設計手法。
 
網(wǎng)易云音樂 APP “我的”板塊中,為了突出 VIP 續(xù)費按鈕,黑膠唱片以動效的形式在按鈕中來回滾動,以此強化續(xù)費按鈕的關注度。
動效讓這些設計更驚艷
 
 
 
 
七、動態(tài)還原實時天氣
天氣類產(chǎn)品從簡單的靜態(tài)預告升級為動態(tài)實時還原,可以讓用戶更加直觀的判斷天氣變化,也能提高界面設計的感官體驗。
 
比如 iPhone 自帶的天氣 APP,以動態(tài)還原實時天氣作為界面背景,不僅便于用戶識別天氣,也使得產(chǎn)品設計更具情感化體驗。
動效讓這些設計更驚艷
 
 
 
 
八、動態(tài) IP 引導按鈕設計
按鈕設計樣式可以發(fā)揮的空間很大,除了在造型、配色、空間感等方面突出設計以外,也能通過按鈕微動效或者動態(tài)引導等形式強化。
 
比如智行火車票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動效 IP 引導進行設計。不僅使得按鈕更突出,設計感也顯得俏皮可愛,凸顯親和力。
動效讓這些設計更驚艷
 
 
 
 
九、微動效賦予品牌活力
立足于品牌做設計是突出產(chǎn)品差異化的關鍵,這也是產(chǎn)品設計未來的演變趨勢之一,如何提高品牌的曝光度和記憶度,成為設計師不斷探索的方向。
 
最近在使用夸克 APP 時,微動效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節(jié)慶等時間段,夸克也會以動效的形式賦予品牌更多變化,不僅使得產(chǎn)品更具年輕化屬性,也能更好的傳遞品牌基因。
動效讓這些設計更驚艷
 
 
動效讓這些設計更驚艷
 
 
 
 
小結
動效使得產(chǎn)品具備更多的變化,也能輔助解決更多復雜功能的交互場景,探索動效的場景運用可以提升設計靈感,希望本期的分享可以帶給大家更多設計靈感。本文描述屬于個人體驗總結,不足之處我們努力改進。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

7大色彩技巧讓你界面更吸睛

杰睿

色彩在我們?nèi)粘TO計中起著定生死的作用,它是設計的靈魂,舒適的色彩搭配可以讓設計師一遍定稿,感覺在自己的設計生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設計至關重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應用
五、 不同場景下的色彩應用
六、 色彩在B端設計中的作用
七、 B端色彩設計使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學角度
色彩是光的屬性,當光波通過物體時,物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
 
2、心理學角度
色彩是人腦對光波長的視覺感知,不同的波長刺激視網(wǎng)膜上不同類型的感光細胞,進而產(chǎn)生不同的色彩感覺。
 
3、 藝術學角度
色彩是藝術創(chuàng)作的重要元素,它不僅關乎視覺感受,還與情感、文化、象征意義相關聯(lián)。
 
4、 設計學角度
在設計領域,色彩是傳達信息、影響情緒和創(chuàng)造美感的關鍵工具。
 
5、 計算機科學角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導致飽和度和明度發(fā)生變化;通常,照明光線的性質、物體表面結構對光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調節(jié)S和B的百分比數(shù)值來達到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設計項目中,運用該色彩模型做的一個實戰(zhàn),項目中用到了一個圖形,需要用同色系來表達,我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵大家多在實戰(zhàn)中運用這樣的色彩模型,簡單實用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發(fā)光的原理來設計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍三個顏色通道每種色各分為256階亮度,在0時“燈”最弱——是關掉的,而在255時“燈”最亮。當三色灰度數(shù)值相同時,產(chǎn)生不同灰度值的灰色調,即三色灰度都為0時,是最暗的黑色調;三色灰度都為255時,是最亮的白色調。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數(shù)值(0-255)表示
G綠:Green,以數(shù)值(0-255)表示
B藍:Blue,以數(shù)值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
 
記得之前自己從事平面工作的時候,就經(jīng)常要用到CMYK模式,因為印出來的效果偏差是最小的,是最靠近設計效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過對比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語意及應用
1、紅色的語意及應用
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應用
橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應用
綠色代表平靜、和諧與生機。綠色常與大自然相關,給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關注,同時綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應用
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業(yè)感、信任感,也有綠色的生機感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍色的語意及應用
藍色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關,能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍色,藍色符合社會的普遍審美認知,接受度比較高;其次,藍色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語意及應用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時也帶有神秘莫測的氛圍,與夢幻、創(chuàng)造力等情感相關。
美柚的主要用戶是女性,紫色在色彩心理學中常被認為具有優(yōu)雅、神秘、浪漫的特質,這些特質與女性的審美和情感需求相契合,能夠吸引女性的關注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場景下的色彩應用
 
1、商場的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場所中脫穎而出,色彩鮮艷的商場外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實多彩的顏色更加容易引起我的關注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強可見性
即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。
多彩的配色,讓我遠遠的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關聯(lián)。當顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設計很好,墻面采用極具誘惑力的顏色與美食,把小小實物十倍放大,增加了視覺看點,讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設計,引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導消費行為
商場通常會使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點商品,對于一些重點推薦的商品或促銷活動,商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導他們進行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達個性和風格
不同的商場可能有不同的品牌定位和目標客戶群體。通過選擇特定的色彩組合,商場可以傳達出自己的個性和風格,吸引與之相符的顧客。
 
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫,來引導用戶消費。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍色在B端設計中廣泛應用?
? 視覺特性方面
1.1 穩(wěn)定性
藍色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務數(shù)據(jù)和進行復雜的操作,藍色的穩(wěn)定性可以讓用戶感到安心,增強對產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業(yè)性
藍色通常與科技、專業(yè)領域相關聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達出專業(yè)、高效的形象,藍色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時間使用產(chǎn)品,藍色的舒緩效果有助于提高用戶的使用體驗。
 
2.2 提高專注度
藍色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務。對于B端用戶來說,高效完成工作是首要目標,藍色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗,跟教育有著異曲同工之處,就像這個易貝樂少兒英語一樣,用大面積的藍色,希望孩子在這里能很快的安靜下來學習、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習慣方面
3.1 科技行業(yè)引領
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍色,逐漸形成了一種行業(yè)習慣。其他企業(yè)在設計B端產(chǎn)品時,也會傾向于選擇藍色以符合用戶的認知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過去的設計中,藍色在 B 端領域的成功應用使得它成為了一種傳統(tǒng)選擇。設計師們在延續(xù)這一傳統(tǒng)的同時,也不斷優(yōu)化和創(chuàng)新藍色的運用方式,使其更符合現(xiàn)代設計趨勢和用戶需求。
 
嘉為科技是一個有著20多年技術沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風格一直是沿用著科技藍的風格,應該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍色可以提高產(chǎn)品的復用率
很多用戶都能接受藍色的B端界面,當面對有差不多需求客戶時,同一套UI,可以多次復用,可以減少開發(fā)成本和設計成本,這也是自己通過長期實戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個UI風格,用在了兩個項目中,不同的用戶,趨向同樣的風格,說明藍色在大家心目中的接受度是非常的高,用藍色可以促進設計的多次復用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設計,色彩對比非常的強烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風,探索一種大膽的色彩風格時,雖然風格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習慣進行設計時,就很好,客戶一致認同。
 
可見每個領域都有自己的色彩運用習慣,商場需要吸引人眼球、刺激消費,越大膽越好,可是B端設計需要提供一個讓人平靜去處理工作事項的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設計中的作用?
1、通過色彩向用戶反饋操作結果及當前狀況
比方在日常設計當中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結果和狀況方面,色彩起著非常重要的作用。
 
下面這個IDC運營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進行品牌傳達
B端設計中大面積使用品牌色,可以強化品牌形象,使用與品牌標志風格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。
 
例如我給湖南高速設計的一套B端界面設計,用戶強烈要求改變傳統(tǒng)的藍色風格,要求整套界面設計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進行信息區(qū)分
在B端界面設計中,顏色在幫助信息區(qū)分起著非常重要的作用,通??梢酝ㄟ^不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結構和布局,例如,導航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設計的天翼寫作,就是這樣的設計思路,導航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗
選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。
 
我參與的這個后臺界面,就是通過合理的色彩搭配來引導用戶使用的,當用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實色彩也是有性格的,不同的色彩也有不同的性格,當我們對色彩的性格有足夠多的了解,在面對不同的客戶時,我們對色彩的拿捏以及設計需求的把握時,會更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實是在做設計,但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設計,少受加班之苦。
比方說我之前給云門戶設計的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風格;而我負責的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調,不同的決策層客戶,就會帶來不同的設計結果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設計使用的原則
1、B端設計中,色彩設計應遵循6:3:1原則
在這個登錄頁面中,我就是運用的6:3:1原則,60%的主色,30%的次要色,10%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關系。
 
比方說我參與的星辰大模型AI文檔生成能力的應用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩
比方說,日常我們設計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內(nèi)容都是比較重要的信息,需要用一個亮度比較的高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內(nèi)容進行傳播。
 
比方說我設計的這個IT運維監(jiān)控平臺的首頁,物理主機、網(wǎng)絡及安全設備、工單、在途工單這幾個指標是非常關鍵的,所以他們的圖片底色用了純度比較高的有彩色來標識。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設計前一定要有定色調的意識
作為設計師,我們的設計工作其實就是在設計一種感覺,一種情緒,設計前定調的意識真的太重要了,感覺對了,什么都就對了。
 
比方說我前段時間接到了一個B端的大屏可視化需求設計,客戶說之前的大屏設計不喜歡,希望重新出一個新的設計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設計試試。
 
以我的職業(yè)直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍色調的還是別的?果然一問,客戶說不希望再用常規(guī)的藍色的,希望新的設計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風格來出圖。
 
在出稿之前,通過自己反復的溝通確認,發(fā)現(xiàn)設計前的定調意識真的太重要了,要不是有出圖前一波三折的反復確認以及需求的細化,就不會有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設計的灰色盡量使用帶有色彩偏向的灰
不管我們設計什么色系的界面,都避不開用到灰色,在設計中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調與美觀,注意好了這個小細節(jié),會給我們的設計加分不少。
 
下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調藍色相呼應,灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設計就非常的注重細節(jié),灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。
 
一個微小細節(jié)的在意,在無形中拉高了設計的高度,十個細節(jié)乃至更多細節(jié)的在意,就會帶來更多意想不到的結果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結:
以上就是我最近對色彩的一些頓悟、感受和學習收獲,在不斷的復盤總結中,我們總會收獲一些新的認知,通過這次色彩的復盤之旅,發(fā)現(xiàn)色彩對設計師真的太重要了,希望我的分享對大家有啟發(fā),不足之處也歡迎大家留言交流。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

以用戶為中心的交互設計思維

杰睿

 
聊聊關于設計思維的內(nèi)容,會從產(chǎn)品設計、體驗設計、交互設計三個方面入手。
目前是第三篇,關于交互設計思維的內(nèi)容。到這里設計思維的內(nèi)容全部結束了。
感謝
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維
 
 
以用戶為中心的交互設計思維


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

B端基礎 | 52000余字總結 B 端基礎設計知識

杰睿

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設計文章的初衷。
 
慢慢發(fā)現(xiàn)其實分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設計的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結是對我寫的這個系列文章每一篇文章內(nèi)容和核心的小總結。第二部分這個系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、內(nèi)容總結
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結一下讓你盡量一次看完。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化?;仡^我會寫一個項目總結給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現(xiàn)在主流的布局就那幾個。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導航高度:68px或48px、文字大小:14(大部分)16(也可以)
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸??梢愿鶕?jù)自己和領導的喜好決定。對還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機號、賬號、第三方
標題切換字號:我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景可以是配的插畫(這種最簡單)、一般都是科技風
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型:基礎篩選組件(就是我們常見的頁面頂部的篩選)、高級篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側
 
篩選樣式:平鋪;折疊;Tab篩選;單側選擇;表頭;綜合
 
1.3、柵格
 
這里其實還簡單的、首先你要明白柵格在我們的設計里面很重要。你不用當然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點:不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對來說是我自己的弱項、在寫當時的文章的時候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設計規(guī)范的。也清楚了自己應該怎么去規(guī)定自己的設計規(guī)范。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯?。我在自己的工作中色彩的應用就參考了ant Design的色彩應用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設計一款自己的字體。還有后臺字體規(guī)范的制定
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會采用黑體、可讀性強、親和、現(xiàn)代、清晰。
 
字號:最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長規(guī)律
 
行高:通過邏輯得到這樣一個公式:「 行高 = 字號 + n 」,8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應用的。根據(jù)字體樣式的設計原則,制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結合,文字顯示色彩對比滿足至少1:4.5( AA級別)。且驗證了其中的實用性,共分為亮暗兩種模式,4 個色階。
 
1.6、ICON(圖標)
 
你要統(tǒng)一風格成套的去找參考和應用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
設計原則:準確、簡單、節(jié)奏、愉悅。
 
設計實戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設計規(guī)范、因為我要傳到這個平臺應用
 
ICON分類:交互性圖標、裝飾性圖標、說明性圖標
 
1.7、按鈕
 
按鈕我覺得這部分是相對簡單的、也是要做到風格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風格、不如圓角的大小其他的倒是沒什么了。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認為尺寸「中」。
 
樣式:各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺彈窗是一個很復雜的內(nèi)容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
彈窗是一個我頭痛的問題因為不太好規(guī)范。但是我還是把這個彈窗系統(tǒng)、在我們的體系中形成了一個小的規(guī)范。感謝領導、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設計時要遵循的原則、簡潔明了、清晰高效、適應業(yè)務、即時反饋。
 
表單的構成結構、基本都是由、標簽、域、提示、操作按鈕這四個部分構成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標簽頁、分步驟。
 
1.10、表格
 
B端設計中,對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質疑了。因為結構簡單、精準高效、數(shù)據(jù)形式豐富。
 
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細的我的文章11表格設計和12表格優(yōu)化項目實戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個小廠B端設計師、剛好沒有自己平臺的設計規(guī)范。那就去直接用的場的設計規(guī)范。去用沒問題的。大廠那么多的牛逼設計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
在使用大廠的設計規(guī)范時然后慢慢的積累自己平臺的設計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務的高質量設計規(guī)范了。
 
2、計劃
 
這個基礎系列的文章就這樣寫結束掉吧、希望可以對你的B端設計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設計。
 
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
第一個系列是B端基礎設計的加強版、B端高手。B端高手是會寫我的實戰(zhàn)里是怎么去做的。其實就是我的設計項目復盤。
 
第二個系列就隨便的去分享一些設計知識。比如哪些什么什么原理呀、什么什么法則呀、在設計里的應用。而且會提出和討論一些設計問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING(國王)
 
B端基礎 | 52000余字總結 B 端基礎設計知識
 
 
新的開始見.......
 
注解:標題的40000余字也好、50000字也好都是說的我這個系列總計的字數(shù)、因為想讓你們看到。

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

UI 設計的 10 個細節(jié)

杰睿

俗話說:“細節(jié)決定成敗”,細節(jié)的把控至關重要,這也是設計師能力的代表。隨著項目經(jīng)驗的積累和專業(yè)能力的成熟,我們對于設計原則、設計細節(jié)和設計經(jīng)驗的沉淀也會越來越多,設計輸出也會因為這些細節(jié)而顯得更優(yōu)秀。
 
黑馬哥結合職場經(jīng)驗和教學經(jīng)驗,總結了 120+ 設計原則、設計細節(jié)和設計經(jīng)驗的案例分析。案例內(nèi)容涉及布局、圖標、按鈕、文本、配色、配圖、規(guī)范、交互和設計經(jīng)驗等,目的是為了讓我們的設計更規(guī)范、更專業(yè)、有細節(jié)、有亮點、有思維。
 
今天先挑選其中的 10 個案例和大家一起交流一下。
UI 設計的 10 個細節(jié)
 
 
 
 
分享目錄
 
1. 圓角圖片對齊時不要完全左對齊
2. 同屬性版塊統(tǒng)一圖標設計規(guī)范
3. 數(shù)據(jù)表達特殊化
4. 預估好信息呈現(xiàn)的最大值
5. 慎用高飽和度的顏色
6. 通過蒙版降低信息干擾度
7. 利用背景色突出小圖標的空間占比
8. 漸變最好選擇近似色
9. 保持按鈕可讀性
10. 淺色背景不適合添加投影
 
 
 
1. 圓角圖片對齊時不要完全左對齊
 
設計中遇到圖片帶有圓角時,文字排版不適合完全基于圖片左對齊,視覺上會顯得文字太靠左,失去視覺平衡度。適當預留間距視覺上更平衡,版面結構也會更穩(wěn)重。
UI 設計的 10 個細節(jié)
 
 
 
 
2. 同屬性版塊統(tǒng)一圖標設計規(guī)范
 
同屬性版塊需要統(tǒng)一圖標設計規(guī)范,不要出現(xiàn)風格混搭,遵循圖標設計的十大統(tǒng)一性:風格、大小、粗細、圓角、比例、透視、角度、疏密、間距、正負形。
UI 設計的 10 個細節(jié)
 
 
 
 
3. 數(shù)據(jù)表達特殊化
 
在可視化的場景中,針對一些特殊數(shù)據(jù)展示的時候,可以選擇特殊字體增加設計感。再通過字體大小對比、字重對比、顏色深淺對比等來突出數(shù)據(jù)。
UI 設計的 10 個細節(jié)
 
 
 
 
4. 預估好信息呈現(xiàn)的最大值
 
在進行 UI 設計時,需要預估好當前位置所能承載的最大值,不能只在理想化的狀態(tài)內(nèi)設計。雖然簡化的內(nèi)容看起來更美觀,但是最大值下的設計思考才能避免上線后的誤差。
UI 設計的 10 個細節(jié)
 
 
 
 
5. 慎用高飽和度的顏色
 
界面設計配色需要考慮用戶長時間的預覽體驗,高飽和度的配色不適合長時間觀看,容易造成視覺疲勞。適當降低飽和度使得配色更加舒適,有利于提升用戶預覽體驗度。
UI 設計的 10 個細節(jié)
 
 
 
 
6. 通過蒙版降低信息干擾度
 
在圖片上面展示文案時,需要考慮圖片對于文案信息的干擾度。為了防止復雜場景的圖片干擾信息傳遞,需要在信息區(qū)域添加漸變蒙版,以此來降低對于信息的干擾度。
UI 設計的 10 個細節(jié)
 
 
 
 
7. 利用背景色突出小圖標的空間占比
 
需要突出圖標的空間占比時,放大圖標會顯得視覺焦點太強,也容易暴露圖標繪制的缺點而顯得粗糙。添加統(tǒng)一的造型和背景色,可以突出小圖標的空間占比,提升感官體驗。
UI 設計的 10 個細節(jié)
 
 
 
 
8. 漸變最好選擇近似色
 
在主界面或者一些特殊場景中,需要對按鈕添加漸變色時,最好選擇近似色等鄰近范圍的配色,會使得視覺效果更加和諧、舒適。
UI 設計的 10 個細節(jié)
 
 
 
 
9. 保持按鈕可讀性
 
按鈕設計需要考慮在不同環(huán)境下的適應度,確保用戶可以一目了然的發(fā)現(xiàn)它。在白色背景、淺色背景、深色背景中都要形成配色對比,始終保持按鈕與背景的高對比度和可讀性。
UI 設計的 10 個細節(jié)
 
 
 
 
10. 淺色背景不適合添加投影
 
淺色背景的卡片、按鈕、標簽、圖片或者其他元素等,在白色背景中都不適合添加投影。投影使得視覺效果對比模糊,畫面表現(xiàn)不夠干凈、通透,去掉投影反而更加清晰自然。
UI 設計的 10 個細節(jié)
 
 
 
 
小結
 
以上案例屬于 120+ 案例中隨機挑選的 10 個作為示意,該系列案例也會持續(xù)更新。希望大家可以從這些案例中獲得一些設計經(jīng)驗,助力設計輸出,能夠做出更好的設計作品。經(jīng)驗屬于個人職場和教學中的沉淀,如有不足歡迎留言補充。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYyNjg0NA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

如何從產(chǎn)品角度發(fā)起交互設計?

杰睿

本文從產(chǎn)品角度出發(fā),深入探討了如何發(fā)起交互設計。通過明確產(chǎn)品目標與用戶需求、進行用戶研究、構建信息架構、設計流程與界面、進行原型測試以及持續(xù)優(yōu)化等關鍵步驟,闡述了如何打造出滿足用戶期望、提升用戶體驗并實現(xiàn)產(chǎn)品目標的交互設計。
 
一、引言
 
在當今數(shù)字化的時代,產(chǎn)品的成功不僅僅取決于其功能的強大,更在于能否為用戶提供流暢、愉悅且富有價值的交互體驗。從產(chǎn)品角度發(fā)起交互設計,意味著將用戶置于核心,以實現(xiàn)產(chǎn)品的商業(yè)目標和用戶需求的完美融合。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
二、明確產(chǎn)品目標與用戶需求
 
(一)定義產(chǎn)品目標
產(chǎn)品目標是交互設計的起點,它決定了設計的方向和重點。產(chǎn)品經(jīng)理需要與團隊共同明確產(chǎn)品的定位、市場需求以及預期的商業(yè)成果。例如,是旨在提高用戶活躍度,還是增加用戶轉化率,或者是提升品牌形象。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
 
(二)挖掘用戶需求
通過市場調研、用戶反饋、競品分析等手段,深入了解目標用戶的行為習慣、痛點和期望。這不僅包括對用戶顯性需求的捕捉,還包括對潛在需求的挖掘。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
 
三、進行用戶研究
 
(一)用戶畫像創(chuàng)建
基于收集到的數(shù)據(jù),構建詳細的用戶畫像,包括用戶的年齡、性別、職業(yè)、教育背景、使用場景等特征,以便更精準地理解用戶的行為和需求。
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
 
(二)用戶場景分析
模擬用戶在不同場景下與產(chǎn)品的交互過程,發(fā)現(xiàn)可能存在的問題和優(yōu)化點。
舉例說明:
我們要知道,地鐵周邊美食,這是一個解決方案。真正的需求是什么?一個字一個字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個和線下場景很相關的項目,我們要把不同目的核心用戶的主要使用場景寫出來。經(jīng)過分析,我們得出了用戶會選擇我們產(chǎn)品,且產(chǎn)品未來可能存在的各種場景A、B、C、D、E。如下圖所示:
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
如果按照目標人群所在場景分類,進行細分,則為下圖:
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
乘地鐵去地鐵站和附近地鐵站區(qū)別:前為用戶會乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團購產(chǎn)品有競爭力。
上班族和普通大眾區(qū)別:上班族工作日使用固定地鐵站上下班,時間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達某目的地,就近享受目的地美食。
朋友們和個人區(qū)別:朋友們一起吃飯,容易出現(xiàn)喝多、吃過點等異常行為,并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上,較為自由。
 
市場定位
經(jīng)過領域場景的分析,我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統(tǒng)計學類的細分:
如何從產(chǎn)品角度發(fā)起交互設計?
 
 
  • 上圖為前期定位的目標大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個影響因素:時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較??梢钥吹胶痛竺缊F有相同和不同維度,這就是產(chǎn)品最初冷啟動時期的差異化!也就是我們的前、中期場景的主要目標用戶類型。
  • 紅色部分即種子用戶群,以這些群體為冷啟動階段,可以更快的向四周擴張。因為他們有使用地鐵的時間屬性,同時有較高的美食熱愛程度,有利于帶動其他時間+熱愛程度的用戶加入產(chǎn)品,實現(xiàn)快速并有質量的拉新、活躍的目標。
  • 低端直接競品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競品即注重社交、ugc為起點,逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
 
結合上圖和要做的場景,我們得出了產(chǎn)品具體目標用戶:乘坐地鐵快速到達并尋找目的地美食的大眾用戶(上班族休息日,大學生,個人或一起),要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
 
(三)用戶測試
邀請真實用戶進行產(chǎn)品試用,觀察他們的操作行為,收集反饋意見,為后續(xù)的設計提供依據(jù)。
1、需求接受
需求很有可能是在線上接到的,并不是面對面交流傳遞的,并且還會遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產(chǎn)品等同事進行面對面的交流和溝通。
詳細了解測試目的和關鍵點,確定用戶配比。
最好是讓交互帶著跑一下整個程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認知,并把相應關鍵點對應上去。同時把大致的用戶配比情況敲定一下,后續(xù)就可以直接招募用戶了。
了解demo的完成進度,相應確定具體測試時間。
交互、視覺等完成demo的時間具有太多不確定因素,因此我們需要及時了解整個demo的完成進度,在盡可能快的情況下保險安排測試時間,如果邀請的是外部用戶,結果用戶到了而demo還沒出來,那也是夠了。
2、方案撰寫和確定
讓交互稿幫助自己。在完成測試方案撰寫的過程中demo還未誕生,具體程序細節(jié)記憶又很模糊,不好寫測試方案,怎么辦?不要慌,去看交互稿吧。
及時溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時候還不是很理解某個具體操作過程,或者自己對產(chǎn)品有疑問的也可以跟交互等溝通,因為自己會遇到的問題,很有可能在測試用用戶也會遇到,這樣子用戶如果問到了,就可以相應作出解釋。
核實確定方案。完成方案后,可以在公司溝通交流工具上和交互及產(chǎn)品等同事再確認一下,是否有什么地方遺漏或有不妥之處。
3、用戶招募
這是一個大多數(shù)人都頭疼的一個過程,希望看完了以下幾點,可以稍微緩解一下大家的癥狀。再次確定測試時間。
方案定下來后,再跟交互確認測試時間,了解是否有變動和調整,盡量避免用戶來了demo或者測試環(huán)境還不ok的情況。
 
撰寫招募文案。需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么,以及報名方式等表達清楚。有以下幾點可以注意一下,方便我們自己招募:
  • 詳細列出測試安排的時間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時間段,這樣就不用事后再協(xié)調不同用戶測試時間了;
  • 優(yōu)先人力、信息管理、行政等崗位同事。盡量避免相關產(chǎn)品人員、設計崗等同事。
  • 制作簡單的招募海報,并檢查??梢允孪葘?ldquo;海報”用word或者ppt做好,然后保存成圖片格式,記得檢查核實一下是否有錯。因為在公司IM群上直接黏貼確實方便,但是其排版往往不利于閱讀,導致用戶會遺漏重要信息。而制作成圖片格式,可以更好地去避免這個問題,同時還可以顯得整個招募過程比較正式,突出了對用戶的尊重,也能在一定程度上體現(xiàn)我們用研工作的規(guī)范性。
 
多渠道投放招募海報。內(nèi)部用戶可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時未嘗試,公司論壇應該也可以,不過隱約感覺效率會比較低。外部用戶可以在朋友圈試試,效果還不錯,大家都很熱情幫忙轉發(fā),群眾的力量大無窮。也可以相應去搜索一些QQ群,加入并發(fā)布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對具體招募情況,大家就盡情發(fā)揮吧~
 
用戶多了留到下次用。海報發(fā)出去后,有時也會出乎意料用戶數(shù)量超過預期了,這是好事,不要擔心,也不要急著拒絕,平和的跟對方說明情況,強調下次還會有測試,把用戶相應信息了解一下做個記錄,下次招募的時候可以直接先聯(lián)系這幾名用戶。當然前提是你真的有下次測試需求,如果沒有那還是老老實實說明情況。
 
確保自己和用戶能彼此聯(lián)系上。跟用戶強調測試時間和地點,尤其是外部用戶,如果招募和正式測試隔了幾天,最好在測試前一天再通知一下。給出自己的聯(lián)系電話,同時詢問用戶的聯(lián)系電話。
 
第一個用戶盡量安排公司內(nèi)部同事。很多時候demo的完成情況會出現(xiàn)意外,到了測試時間demo還不能用,內(nèi)部用戶可以方便取消或者更換。另外,在第一次測試前誰都不確定用戶會有什么反應,第一個測試是可以起到試水效果,而外部用戶成本高,用來試水太奢侈。
4、測試準備
 
材料準備。需要準備的內(nèi)容有:量表、報酬簽收表、記錄筆記本、錄音筆、會議室借用,以及記錄表格,如果是外部用戶過來,相應準備一杯水,人家大老遠過來也不容易。
 
測試內(nèi)容準備。其實每次訪談用戶自己都會挺緊張的,不知道用戶是不是也很緊張(PS:好想當一回用戶,體驗一下被訪的感覺)。為了消除這種緊張,同時也是為了更好的完成訪談,可以有嘗試以下幾點:
  • 盡可能多的去了解所需測試的產(chǎn)品。有時候demo出來的晚,下午要測試,demo中午才出來,自己都沒玩過,測試還怎么搞?之前也說了,那就使勁去看交互稿吧,雖然比不上實際操作來的真實,但是也能有不小幫助,但也要給自己留足熟悉demo的時間。
  • 按照模塊來列提綱。其實相當于組塊策略,把同一個模塊的問題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發(fā)現(xiàn)遺漏點。但模塊不要太大,如果太大了就相應拆分一下。例如,在考拉新版測試的時候,有“首頁”、“活動”、“購物車”等測試,但是光是首頁內(nèi)容也很多,作為一個模塊還是太大了,可以拆分成“首頁整體感知”、“商品詳情”等幾個方面來整理提綱。
  • 根據(jù)任務演練提綱。有了提綱后,按照任務大致過一下所有列出來的問題,這個過程會打亂按照模塊列好的提綱,有一次這樣的排練,在測試的時候更不容易漏掉題目,而且也相當于模擬了一下測試,自己心里會更踏實一點,在實際測試過程中也能有更好的應對。
 
相關人員通知。通知交互和產(chǎn)品的同事具體測試時間和地點,邀請他們一起參與。不建議交互和產(chǎn)品只是后期測試查閱報告,如果他們參與到測試中,能更近距離和用戶接觸,并能更加深刻感受到產(chǎn)品存在的問題,也能更好的推動產(chǎn)品的改進。
5、正式測試
主持人需要注意的點:
  • 劃分我們和產(chǎn)品的關系。在測試之前跟用戶說明清楚,我們并不是產(chǎn)品的設計者和開發(fā)者,我們只是受產(chǎn)品方委托來進行測試,以免用戶不好意思當面如實評價產(chǎn)品。
  • 強調測試的是產(chǎn)品,而不是用戶。要跟用戶說明產(chǎn)品尚處于不完善階段,因此邀請用戶過來進行測試,幫助發(fā)現(xiàn)問題和改進產(chǎn)品設計,但請注意不是為了評價產(chǎn)品。
  • 注意訪談技巧。這個就不用多說了。
  • 盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面,更進一步去追問,用戶為什么會這么說或這么問,例如,很多時候在測試中會碰到用戶說“哦,原來這個按鈕是xx功能,我還以為是xx功能“,這個時候可以再推進一步,了解用戶為什么會這么認為。
  • 給其他在場的同時發(fā)言的機會。主持人如果覺得自己訪談的差不多了,可以詢問一下記錄者以及交互、產(chǎn)品等同事,了解他們是否還有問題需要補充。
  • 記得量表評分和報酬簽收。長時間的測試和訪談后容易忘記量表評分和報酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個招呼,幫忙提醒自己。
 
記錄人員需要注意的點:
  • 仔細觀察用戶行為并記錄。記錄不僅僅是用戶的觀點、想法等,更重要的是記錄用戶的實際行為。
  • 按照模塊記錄。記錄者可以按照測試方案中的模塊來相應記錄用戶的行為和言語表述。
  • 查漏補缺。主持人可能會遺漏一些點,記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內(nèi)容需要補充。
 
6、測試結束歡送用戶。對用戶表示感謝,并開門送一下用戶,對于外部用戶,最好能送到大樓外面可以看見出口的地方。
測試后及時討論。這個是重點!
在每一名用戶測試后及時和交互、產(chǎn)品等同事快速過一下主要發(fā)現(xiàn)的問題點,這樣做有以下優(yōu)點:
  • 有效達成共識,確定解決方案。剛訪談結束印象最深刻,因此能快速有效達成對主要問題的共識,并討論確定相應的解決方案。
  • 體現(xiàn)敏捷優(yōu)勢。確定了一些比較嚴重的問題后,交互和產(chǎn)品的同事就可以相應去改進產(chǎn)品設計,做到了邊測邊改,加快迭代速度。
  • 幫助優(yōu)化訪談提綱,和測試用戶安排。有些問題在事先撰寫方案的時候可能沒涉及到,在討論后可以補充進去,而有些問題確定后則不需要再測。另外,也可以通過討論對事先安排的測試用戶進行相應調整,例如增刪用戶,或者調整新老用戶測試順序等。
  •  
    事后幫助我們自己快速撰寫方案。通過討論確定了關鍵問題,并且,交互和產(chǎn)品的同事也相應清楚了,因此在最后可以快速形成報告。
再次感謝用戶。所有用戶測試結束后,可以花幾分鐘時間簡單感謝一下用戶。
 
7、報告撰寫
針對不同大小項目的用戶測試,在完成報告撰寫過程中有兩種具體方式:
  • 小測試項目簡單快速撰寫報告。對于那些1-2天的小測試項目,由于在每次測試后都有討論,已對主要問題達成共識,因此在報告撰寫的時候就可以快速地將主要的問題和風險點呈現(xiàn)出來。
  • 大測試項目每天總結并反饋主要問題。大的測試項目持續(xù)時間比較久,針對每天的測試及討論,簡單總結一下主要發(fā)現(xiàn)的問題,并反饋給相關人員,如果到了最后再總結,容易遺忘掉一些內(nèi)容,并且這樣子也方便自己最后撰寫報告。
 
四、構建信息架構
思考信息架構有三個核心關鍵詞:用戶角色、產(chǎn)品價值、使用場景。
1、明確用戶角色
用戶角色清晰揭示用戶目標,幫助我們把握關鍵需求、關鍵任務、關鍵流程,看到產(chǎn)品哪些是主要的事,哪些是次要的事。我們應該盡可能豐富、形象化我們的用戶角色,讓它在設計決策過程中發(fā)揮作用,設計出更符合用戶場景的產(chǎn)品。
2、了解產(chǎn)品的目標價值
作為產(chǎn)品的設計師一定要理解產(chǎn)品的價值,知道用戶想要什么,把最重要的優(yōu)先級提到最高,盡量移除無關緊要的信息,或降低其他優(yōu)先級的權重,以免對用戶造成干擾。
3、提煉產(chǎn)品的使用場景
要了解產(chǎn)品的業(yè)務流程,比如目標用戶是誰、什么場景、如何使用,要把產(chǎn)品業(yè)務流程上的節(jié)點一個一個梳理出來,還要考慮這個產(chǎn)品對用戶的價值是什么,不要僅僅考慮界面的元素規(guī)范、設計細節(jié)等等,要知道產(chǎn)品的目標價值體系。
4、信息架構優(yōu)先級
基于三個核心點(用戶角色、產(chǎn)品價值、使用場景)分析,把目標用戶人群核心價值的功能點業(yè)務流程梳理出來,分清主次關系,切忌功能堆砌,具體方法可以把所有功能業(yè)務邏輯的主線列出來,然后根據(jù)業(yè)務的優(yōu)先級做評級,分清楚這些功能哪些是主要的,哪些是次要的,然后通過數(shù)字做排序,這樣我們就知道哪些功能設計需要明顯,哪些功能設計需要低調。
5、信息歸類及整合
從整體上思考信息類產(chǎn)品的分類及整合,比如用戶資料相關的產(chǎn)品會有用戶信息、資料、等邏輯,這樣就要把所有跟用戶相關的信息都歸在同一個分類菜單下,不要讓他們分散在各個頁面中。也就是所謂的一級菜單、二級產(chǎn)品的處理邏輯。
6、要定期審視與迭代
隨著產(chǎn)品規(guī)模與復雜度的提升,要隨時關注信息架構是否滿足當前的產(chǎn)品框架,不要等需要時候再去孤注一擲的全盤優(yōu)化,這樣會讓項目陷入被動的局面,可以逐漸增強,循序漸進的優(yōu)化,從小的細節(jié)對信息架構進行調整,提升產(chǎn)品的易用性。
 
六、進行原型測試
1、制作原型
使用快速原型工具制作可交互的原型,以便更直觀地展示設計方案。
 
(二)內(nèi)部測試
團隊內(nèi)部進行初步測試,檢查功能的完整性和流程的合理性。
 
(三)用戶測試
邀請外部用戶進行測試,收集他們的意見和建議,發(fā)現(xiàn)潛在的問題和改進空間。
 
七、持續(xù)優(yōu)化
 
(一)數(shù)據(jù)分析
通過收集和分析用戶的使用數(shù)據(jù),了解用戶的行為路徑和偏好,為優(yōu)化提供數(shù)據(jù)支持。
 
(二)用戶反饋處理
及時響應用戶的反饋,將有價值的建議融入到后續(xù)的優(yōu)化工作中。
 
(三)迭代更新
根據(jù)數(shù)據(jù)分析和用戶反饋,不斷對交互設計進行迭代更新,以適應市場和用戶需求的變化。
 
八、結論
 
從產(chǎn)品角度發(fā)起交互設計是一個綜合性的過程,需要充分考慮產(chǎn)品目標、用戶需求、信息架構、流程界面、測試優(yōu)化等多個方面。只有以用戶為中心,不斷追求卓越的用戶體驗,才能打造出具有競爭力的產(chǎn)品,在激烈的市場競爭中脫穎而出。
 
在未來的產(chǎn)品開發(fā)中,隨著技術的不斷進步和用戶需求的不斷變化,交互設計也將面臨新的挑戰(zhàn)和機遇。產(chǎn)品團隊應保持敏銳的洞察力和創(chuàng)新精神,持續(xù)探索和優(yōu)化交互設計,為用戶創(chuàng)造更多的價值。
 


作者:Charlotte的嘻醬
鏈接:https://www.zcool.com.cn/article/ZMTYyNzM1Mg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

日歷

鏈接

個人資料

藍藍設計的小編 http://www.longkoushi.net

存檔

巴彦淖尔市| 新巴尔虎左旗| 溧水县| 平南县| 高邑县| 嵊泗县| 左权县| 怀化市| 平度市| 资溪县| 扎赉特旗| 静安区| 富川| 行唐县| 福州市| 天镇县| 香格里拉县| 遵化市| 黔南| 木兰县| 德安县| 石景山区| 南投市| 德清县| 新津县| 女性| 女性| 正蓝旗| 河池市| 东安县| 南丰县| 阜新市| 北碚区| 新龙县| 大名县| 团风县| 双城市| 龙泉市| 碌曲县| 盐津县| 巴彦淖尔市|