国产成在线人视频免费视频-国产成综合-国产床上视频-国产大臿蕉香蕉大视频女-国产大尺度pr社18福利在线

首頁

設計的意義

藍藍設計的小編 設計思維

保羅·蘭德說:“設計是一種行為,是想象力馳騁的過程和產物。”

作為設計師,設計是我們的專業,也是我們用來解決商業問題的工具。

我們過去也許都曾思考過類似設計的價值、意義或是本質之類的問題。思考這類問題在某種意義上或許都是為了當我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。

設計師在從業的不同階段,對設計的理解不同。從追求工具技能到表現力、方法論、風格到影響行業甚至社會審美意識等等。不斷的錘煉之后,對設計意義也會有不同理解。

我們奉為的大師,都擅長用自己的知識架構定義對設計的理解。

保羅·蘭德就是一位我們公認的設計大師、藝術家。他是當今美國乃至世界上最杰出的圖形設計師、思想家及設計教育家之一。他最出名的企業標志設計,包括IBM,UPS,ABC標志以及為史蒂夫·喬布斯設計NeXT.那段經典橋段。

去研究這些前輩們如何看待設計、理解設計以及如何與設計相處一生,是另一種設計哲學的思辨。

保羅·蘭德說:

“設計是一種行為,是想象力馳騁的過程和產物。”

設計表現可能看似是簡單的組裝、排序或是美化的過程,但設計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后,設計就是把散文變成詩歌的過程。

設計師是孤獨的,大部分時候他們是一個人在戰斗。

設計是個人行為,即便在設計成熟度較高的國家、企業或是大型團隊,設計師仍需在一線才能真正掌控在這場戰斗中可能遇到的極其細節的變化和給人傳達的感受。

設計需要沖突來加深傳達的“戲劇性”。但設計過程也面臨種種沖突。這是設計的商業價值與藝術價值平衡的過程。正是因為這種關心很難平衡,才會出現雇主與設計師之間的沖突。

企業的目標是達到商業、經濟、政治甚至社會性目的。對設計師而言,設計是一種創造和實驗行為。通過這種行為來平衡之前的目標。

設計品質最終決定設計師與核心決策者之間的關系。關心越是緊密,設計的產出就越有可能出彩。這其實并不難理解,對設計完成度有高追求的企業,CEO也大多都跟設計團隊或是設計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認的CEO與設計師高緊密度關系的典范。

當今社會,市面上依然存在太多糟糕的設計。

一來,核心的決策者對設計專業的理解度不夠。

二來,很多決策依賴于市場調研,既得利益的權重大于長遠利益。

再就是我們回避不開的話題,設計師在某種意義上話語權不夠。

抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見,他們有評價權,但卻缺乏對設計專業知識的儲備。所以就會普遍出現外行指導內行的情況。過往(現在好一些),他們將設計師看做一套繪圖工具,一個合作供應商而不是一個業務團隊里重要的組成部門。

體系完整的企業可能會引入市場調研團隊,調研團隊為營銷提供定位信息,設計師來解讀和演繹那些信息。如果調研團隊能理解設計師的工作過程與其產生共鳴,就有可能促成正確決策甚至產生驚喜的創意作品。

但很多時候,我們聽到了太多這樣的回復:

 

我喜歡它;

我不喜歡它;

它太簡單了;

它太復雜了;

它讓我想起某某...

常常一句“我不喜歡”就可以終結任何設計作品。就像當初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

每個人所能感知的信息都不盡相同。

有人既看不到logo的意義,也看不到它的功能。也正因為過于用喜好而不是專業去評判,才讓糟糕的設計一直留存于我們的世界。而大眾對糟糕的設計要比對好設計更加熟悉,于是大家習慣于選擇不好的設計,因為和他們朝夕相處。

新事物讓人感受到威脅,而舊事物讓人安心。

要判斷一個設計的內在價值,決定性因素不是使用期,而是它所設定的“品質預期”。這是設計師的價值,也是設計師該練就的“知覺”。

何為知覺?

我們可以把知覺暫定為“瞬間的洞悉”。設計師在做設計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試,都是通過瞬間對各方向的可能性判斷。

本能、預感、沖動、洞悉之后的綜合“洞悉”,這就是知覺。

說到logo,我們常把logo當成品牌價值傳遞的重要符號。

它是一面旗幟、一個簽名、一個路標。大部分時候,雇主期待logo能描述一個行業,但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認的是它們都是歷史上最成功的logo,但它們卻無法做到能傳遞它們的行業屬性。因為logo遠不如它所代表的產品重要,它所代表的比它看起來的樣子更重要。


因為只有logo與它所屬的公司、產品、服務聯系起來時,它才具備真正的意義。一流的產品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的,那么它的logo最終也會被歸為二流。

 

 

logo首先要告訴人們“是誰”,而不是“是什么”。這才是它最基礎且最重要的功能。它所扮演的角色就是“指示”。“簡潔”是達成指示的手段。所以設計過程中的特點、好記以及清楚都是需要設計師在打磨細節前首先要做好的決策。一個復雜、挑剔、模糊的設計潛藏著自我毀滅性的風險。

 

“好的設計帶來好的生意”。但不可否認,即使不好的設計,也可能帶來好的生意(比如下圖)。如果這樣,還需要好的設計么?

好的設計可以增添額外的附加價值,很多時候,也許光看著它就能給人們帶來快樂。它們更尊重感官,并通過這種友好的感官體驗,給企業帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全,目標明確的企業,反映了它的產品或者服務的品質。所以,這個世界需要好的設計,設計師要做的就是用設計向世界傳遞一些更有價值的觀點。這是設計師的工作,也是設計該有的意義。

「大寶推薦閱讀書單之《設計的意義》」



作者:大寶頻道
鏈接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

 

優秀的設計就是帶給用戶驚喜!

藍藍設計的小編 設計思維

優秀的產品設計是能帶給用戶驚喜的,在不經意間讓用戶感受到溫度,也是提升用戶體驗的關鍵。
 
隨著行業的進步,產品設計師也在不斷優化體驗,輸出一個一個優秀的解決方案。近期黑馬哥也發現了一些比較驚喜的設計,來和大家一起欣賞一下吧!
優秀的設計就是帶給用戶驚喜!
 
 
 
 
體驗目錄
一、降落傘帶來的營銷廣告
二、動效反饋商家備餐過程
三、這個廣告驚不驚喜意不意外
四、Banner 廣告的視覺沉浸感
五、待機狀態下的實時動態
六、小圖標里的細節反思
七、輪播式的懸浮設計
八、氛圍熱烈的底部標簽欄
九、收縮式交互設計
十、形象化的進度設計
 
 
一、降落傘帶來的營銷廣告
在這個廣告滿天飛的年代,用戶已經逐步開啟廣告免疫模式,如何提高用戶對廣告的關注度至關重要。
 
近期在體驗餓了么時,等待送餐界面中空降一個降落傘,從左上角飄到右側懸浮,彈出紅包懸浮廣告。降落傘飄浮的動態過程吸引了用戶的關注度,進而提高了營銷廣告的點擊率,雖然廣告大家都比較反感,但是一個伴隨著驚喜的廣告也會讓你放下戒備心理。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
二、動效反饋商家備餐過程
提升等待過程對于用戶體驗來說尤為重要,降低用戶等待過程中的焦慮感,才能讓用戶愿意為此停留。
 
通過餓了么點餐之后,商家需要一定的時間完成餐飲的制作,必然需要用戶等待一些時間。在這個備餐過程中,當前界面以一個翻炒動效表達,情感化的動效不僅提示用戶當前狀態,也提升了設計表達的感官體驗。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
三、這個廣告驚不驚喜意不意外
意料之外的廣告是帶給你驚喜還是反感呢?平臺為了提高變現能力,各種層出不窮的廣告玩法也讓你猝不及防。
 
之前在體驗騰訊視頻 App 時,從閃屏廣告過度到 Banner 圖的過程中,經歷了多個廣告新花樣。首先從閃屏切換到自動輪播的彈窗模式,再演變到放大版的多個廣告切片(占 Banner 位呈現),最后再恢復到 Banner 的正常布局中。這個過程無疑是把廣告的存在感拉滿了,讓你對廣告的記憶形成硬性要求。
 
無論這個廣告設計方案是否讓用戶反感,但是這個呈現的互動方式還是比較新穎的,相信廣告的點擊率必然有所提升。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
四、Banner 廣告的視覺沉浸感
Banner 圖在產品中是非常普及的,各類形式的演變也層出不窮,產品設計師都在探索更多可能性。
 
在騰訊視頻 App 動漫欄目中,發現一例很有想法的 Banner 表現。Banner 上面新增了一個懸浮的火焰燃燒的動效,提升了整體的氛圍感,動效與 Banner 畫面完美貼合,視覺沉浸感十足。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
五、待機狀態下的實時動態
隨時讓用戶感受到你的存在,才能讓人感到安心,服務過程中狀態實時可見至關重要。
 
通過餓了么點餐之后,就算處于待機狀態時,只要點亮屏幕即可看到當前出餐狀態。可視化的圖形結合時間提醒,讓狀態一目了然,使得點餐到用餐之間的過程更有用戶可控性。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
六、小圖標里的細節反思
產品中有很多輔助功能/信息等表達的圖標,既要能準確表達主題,也要讓用戶易于理解。
 
在汽車之家 App 發現了一個值得反思的圖標案例,在掃一掃的圖標中結合了汽車外形輪廓,不僅不會影響掃描的功能表達,也進一步表達了該功能的差異。和別的產品掃描功能不同,這個是對準汽車進行掃描,體現出了業務的差異化。一枚小小的圖標體現出了設計師的能力,用最簡單的方式表現自身產品的差異,以此提升用戶的操作體驗。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
七、輪播式的懸浮設計
懸浮設計非常普及,因為占比小和滑動頁面會隱藏,對用戶的干擾比較小。
 
最近在芒果 TV 首頁發現了懸浮窗口的輪播式表達,芒果卡和活動中心會自動輪播顯示(也能手動切換)。讓我們對懸浮窗口的設計又多了一種設計理解,可以呈現更多不同內容的表達,提升了窗口的利用率。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
八、氛圍熱烈的底部標簽欄
底部標簽欄的設計在圖標創意層面發揮較多,各類風格的圖標讓該欄目更加豐富多彩,除此之外也有在背景層渲染氛圍的案例。
 
近期恰逢芒果 TV 十周年之際,在底部標簽欄背景層也加強了氛圍感。豐富多彩的元素和配色,結合主題化的圖標設計,使得整體氛圍感拉滿。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
九、收縮式交互設計
通過交互方式應對用戶操作過程,特別是在滑動界面時,交互方式的優化可以降低干擾,提高當前界面的利用率。
 
在 Blurrr App 創作界面,默認以 3D 動態圖標展示“開始創作”按鈕,當滑動界面時按鈕會收縮展示。通過收縮式的交互設計,讓界面可以展示更多內容,也不會影響用戶點擊按鈕進行創作。即通過 3D 動效加強了功能的曝光度,又通過收縮式交互提高了內容的展示空間,可謂是一舉多得的設計解決方案。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
十、形象化的進度設計
進度設計是反饋狀態變化的關鍵,通過可視化的表達讓用戶一目了然,提高用戶對服務過程的把控。
 
當用戶通過攜程旅行 App 訂票后,在行程訂單界面可以看到列車行駛狀態的進度提示。通過可視化的列車形象的表達了行駛狀態,讓用戶清晰的看到行駛方向和抵達站點示意。不僅信息傳遞高效,形象的表達也使得感官體驗更佳。
優秀的設計就是帶給用戶驚喜!
 
 
 
 
小結
優秀的產品總能在細微之處帶給你驚喜,讓你感受到產品服務的情感化和溫度。本文觀點僅代表個人體會,希望可以和大家一起共勉。
 
作者:黑馬青年
本文由 @黑馬青年 原創發布。未經許可,禁止轉載。


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

每個設計都讓你感受到個性化

藍藍設計的小編 設計思維

隨著同類型產品越來越多,更有體驗感和個性化的設計才能打動用戶,成為被選擇的對象。作為產品設計師我們在不斷探索和創新,希望以更好的設計表達來解決業務場景,為提升用戶體驗而助力。
 
本期以個性化設計為出發點,給大家帶來十個不錯的設計方案,希望可以帶給大家更多設計靈感。
每個設計都讓你感受到個性化
 
 
 
 
體驗目錄
一、讓你感受溫暖的年度報告
二、趣味性的圖標設計
三、通過 AI 重新定義搜索體驗
四、動態化功能引導產品升級
五、動態優惠券更有吸引力
六、人性化的溫馨提示設計
七、自定義形象的年度報告
八、個性化的主界面設置
九、情感化的表情設置
十、空間感的 Banner 輪播體驗
 
 
 
一、讓你感受溫暖的年度報告
這段時間相信大家經常使用的產品都曬出了年度報告,設計風格與互動形式也層出不窮,哪一個產品的設計風格最打動你呢?
 
在我刷到的年度報告中,攜程旅行的年度旅行報告印象最深刻。毛茸茸的設計風格在寒冷的冬季顯得格外溫暖,圖標、字體、背景、按鈕等都以此風格進行設計,整體效果非常細膩柔軟,你也去體驗感受一下吧!
每個設計都讓你感受到個性化
 
 
 
 
二、趣味性的圖標設計
圖標在產品中主要以各種設計風格形成差異,打造出匹配品牌風格的個性設計,除此以外,我們也要多在圖形創意表達層面進行探索。
 
最近在使用極兔速遞小程序時,除了圖標設計的風格獨特以外,多個場景的圖形創意也很有意思。比如下單寄件、掃碼寄件和個人中心的圖標等,趣味性的設計表達讓人印象深刻,以個性化的圖形創意吸引用戶的注意力。
每個設計都讓你感受到個性化
 
 
 
 
三、通過 AI 重新定義搜索體驗
AI 化已經成為眾多行業未來需要對接的方向,任何行業都可以通過 AI 進行重新定義,帶給用戶 AI 化的體驗。
 
以前在騰訊視頻 App 搜索時都是以關鍵詞為主,現在可以通過 AI 搜與騰訊元寶 AI 助手交流,以對話式的方式找到感興趣的影片。通過 AI 重新定義了搜索方式,讓用戶感受到屬于 AI 化的體驗感。
每個設計都讓你感受到個性化
 
 
 
 
四、動態化功能引導產品升級
引導用戶升級產品才能帶來新的功能和服務升級,如何吸引用戶進行升級變得至關重要。
 
高德地圖為了引導用戶點擊升級,以升級后帶來的更優功能和服務為吸引點,通過動態輪播的形式表現升級彈窗。動態化的功能引導可以讓用戶提前了解新版本的信息,提高用戶升級的選擇性。
每個設計都讓你感受到個性化
 
 
 
 
五、動態優惠券更有吸引力
各種優惠券、打折券、新人紅包等讓用戶開始有點麻木,也不一定會領取和使用,如何增加其吸引力就變得越來越重要了。
 
近期高德地圖打車欄目的營銷活動中,為了展示更多類型的打車券、打車金等,通過動態輪播的方式進行設計表達。相較于靜態展示而言,不僅解決了內容展示的數量問題,動態的方式也更有吸引力,增加用戶的參與概率。
每個設計都讓你感受到個性化
 
 
 
 
六、人性化的溫馨提示設計
溫馨提示雖然不一定管用,但是依然可以讓用戶感受到人性化的服務,增加用戶對產品的好感度。
 
在比較晚的時間段使用洪恩識字 App 時,會出現溫馨提示的彈窗,勸導用戶注意休息時間。人性化的設計可以輔助家長管理孩子的使用習慣,提醒注意時間管理和作息規律。
每個設計都讓你感受到個性化
 
 
 
 
七、自定義形象的年度報告
年度報告的形式豐富多樣,都是以用戶個人數據生成,如何才能更加個性化,成為了設計表達的重點。
 
網易云音樂的年度聽歌報告可以自定義形象,可以針對身體的上中下三個部分進行定制,以個性化的形象開啟專屬的聽歌報告。整體表達很有設計感,圖形、排版與配色都很不錯,快去生成屬于你的聽歌報告吧!
每個設計都讓你感受到個性化
 
 
 
 
八、個性化的主界面設置
對于感官體驗每個人的喜好各不相同,為了滿足各自的選擇需求,個性化的設置變得尤為重要。
 
體重小本 App 的主界面,可以通過主題皮膚設置背景、配色等,提供了煥彩粉和清爽藍的多款選擇,用戶也可以自定義圖片進行設置。通過個性化的設置帶給用戶更多選擇性,滿足不同的感官體驗需求。
每個設計都讓你感受到個性化
 
 
 
 
九、情感化的表情設置
通過表情設計輔助可視化表達,其中表情符號的運用較為常見,豐富多樣的表情選擇更能滿足用戶需求。
 
體重小本 App 體重數據展示中,以不同表情來體現體重數據的變化,情感化的表達讓變化的呈現更加貼切。產品提供了多款表情供用戶選擇,用戶也可以設置自定義表情,情感化的設置讓體驗感變得更加豐富。
每個設計都讓你感受到個性化
 
 
 
 
十、空間感的 Banner 輪播體驗
輪播 Banner 圖在設計表達、布局結構、輪播形式等層面都可以進行創意發揮,有特點的形式更能吸引注意力,以此提高 Banner 的點擊率。
 
最近在體驗芒果 TV 時,發現首頁 Banner 的表現形式以分層式表達,輪播過程中更有空間感。將人物與背景進行分層設計,輪播時分前后入場,伴隨著縮放等動效表達,營造出更強的空間感。
每個設計都讓你感受到個性化
 
 
 
 
小結
設計思維的轉變離不開大量優秀案例的輔助,對于產品設計師來說,體驗和總結的訓練至關重要。希望本期的分享可以帶給大家一些啟發,觀點屬于個人見解,不足之處歡迎大家留言補充。
 
本文由 @黑馬青年 原創發布。未經許可,禁止轉載。
 


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

設計方法論 I 超全面的頁面分割設計指南

天宇

 
設計方法論 I 超全面的頁面分割設計指南
 
當你打開一個頁面,首先映入眼簾的是豐富多樣的內容和信息。如何在有限的空間內,既保證內容的完整性,又讓用戶能夠輕松理解和瀏覽,這背后的奧秘就在于頁面分割。今天,我們就來一起
探討頁面分割的藝術與技巧,看看它是如何為你的設計增添魅力,提升用戶體驗的。
 
在設計中,頁面分割不僅僅是一種技術手段,更是一種藝術表現。它如同一位細心的畫師,巧妙地運用線條、色彩、空白等元素,將頁面內容劃分為一個個清晰、有序的區域。
通過這些分割,用戶能夠更快速地找到所需信息,更輕松地理解頁面內容,從而享受到更加愉悅的閱讀體驗。
頁面分割的魅力在于其多樣性和靈活性。不同的頁面可以采用不同的分割方式,如線條分割、卡片分割、留白分割等,以滿足不同的設計需求和用戶習慣。同時,頁面分割也需要根據內容的實際情況進行合理調整,既要保證信息的完整性,又要避免過度分割帶來的混亂感。
 
在本文中,我們將一起探討頁面分割的原則、技巧和應用實例。我們將學習如何運用不同的分割方式來優化頁面布局,提升用戶體驗。同時,我們還將分享一些成功的頁面分割案例,以激發你的設計靈感,為你的界面設計注入新的活力。
 
分享目錄:
一、分割的常見樣式
二、線性分割
三、卡片分割
四、留白分割
五、總結
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割:通過使用線條來劃分頁面的不同區域,以達到組織內容、引導用戶視線和提升整體美觀度的目的。這種分割方式簡單明了,能夠清晰地展現出頁面內容的層次和結構。
 
卡片分割:卡片式設計是一種流行的界面分割方法,通過將內容劃分為獨立的卡片或區塊,使用戶能夠更清晰地理解信息。每個卡片通常包含相關的內容,如文本、圖片或按鈕,以便用戶快速瀏覽和交互。
 
留白分割:主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),自然地將信息進行分組。這種留白的方式能夠為頁面增加呼吸感,降低視覺噪音,使設計看起來更簡潔。
設計方法論 I 超全面的頁面分割設計指南
 
 
近年來,設計趨勢從“卡片式設計”轉向了“去線化設計”,即傾向于使用留白分割而非過多的線條分割,以實現更為簡潔清晰的界面效果。設計師在選擇分割方式時,應優先考慮留白分割,其次是線性分割,最后是卡片分割。這個選擇順序反映了設計界的一般原則,即在不影響信息傳達的前提下,盡可能保持設計的簡潔性。
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割的定義:
線性分割設計是一種在視覺設計中使用的技巧,它使用線條、邊框或細線等元素來劃分、區分或連接頁面上的不同內容區域。這種設計手法主要用于提高頁面內容的可讀性和組織性,幫助用戶更好地理解和瀏覽頁面信息。
 
線性分割設計具有以下優勢:
 
1.劃分區域:線性分割可以將頁面劃分為不同的區域或模塊,使得每個區域的內容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息,提高閱讀效率。
 
2.區分內容:線性分割可以用來區分不同類型的內容,如文本、圖片、圖表等。通過線性分割,可以將這些內容進行分組或歸類,使得頁面更加整潔、有序。
 
3.引導視線:線性分割可以引導用戶的視線,幫助他們更好地理解頁面內容。通過合理的線性分割設計,可以突出顯示重要的信息或元素,引導用戶關注到關鍵內容。
 
4.增強層次感:線性分割可以增強頁面的層次感,使得頁面內容更加豐富、有深度。通過不同樣式的線性分割,可以區分不同的信息層級,幫助用戶更好地理解頁面結構和內容關系。
 
使用原則:在使用分割線時,我們應遵循一些原則,以確保其有效地幫助用戶理解頁面的組成,同時避免過度使用帶來的視覺干擾。
 
1.分割線應當微妙而不過于顯眼。
它們在布局中應該容易被用戶注意到,但又不應成為焦點,以免分散用戶的注意力。
 
2.分割線應被視為次要的元素。
只有在留白等其他設計手法無法有效起到分割作用時,才考慮使用分割線。它們應當是布局中的輔助工具,而不是主導元素。
 
3.謹慎使用分割線。
過度使用分割線可能會導致頁面顯得混亂和復雜。相反,我們應該用分割線來創建信息分組,而不是簡單地分割每一個條目。通過審慎而恰當地使用分割線,我們可以有效地提升頁面的可讀性和用戶體驗。
圖片來源于參考文章
圖片來源于參考文章
 
線性分割三種類型:
通欄分割線、內嵌分割線和中間分割線。
 
1.通欄分割線(Full-bleed Dividers):通欄分割線通常橫跨整個頁面寬度,用于分隔彼此完全獨立的內容區域。這種分割線在視覺上非常顯著,能夠清晰地劃分出不同的內容區塊,使用戶能夠迅速區分不同部分的信息。通欄分割線通常用于區分文章、產品列表、服務介紹等獨立的內容區域。
 
2.內嵌分割線(Inset Dividers):內嵌分割線通常位于內容區域內部,用于分隔有錨點(如頭像、圖標等)的相關內容。這些錨點可以是圖片、符號或小的圖形元素,它們與分割線一起,幫助用戶更好地理解和區分內容。內嵌分割線常用于列表、卡片式布局、時間線等場景中,用于展示有關聯但不同類別的信息。
 
3.中間分割線(Middle Dividers):中間分割線位于兩個內容區域之間,用于分隔無錨點的相關內容。這種分割線通常比通欄分割線更細,更注重于在視覺上劃分空間,而不是強調內容的獨立性。中間分割線常用于文本段落之間、列表項之間或不同功能區域之間,以提供清晰的結構和層次。
設計方法論 I 超全面的頁面分割設計指南
 
 
在大多數情況下,當信息層級較為簡單(即信息層級≤2)時,使用分割線進行信息分割是一種有效的方法。然而,實際上,如果留白間距足夠大,我們也可以使用留白來達到類似的效果。通過增大留白間距,我們可以創造出清晰的視覺區域劃分,使得信息之間的界限更加明確。
 
與分割線相比,足夠大的留白間距可以避免多余的線性元素干擾,讓整體視覺效果更加清爽。這樣的設計選擇有助于提升用戶的閱讀體驗,使用戶更加輕松地理解和消化信息。
 
因此,在信息層級較簡單的情況下,我們可以靈活地選擇使用分割線或留白來進行信息分割。通過調整留白間距,我們可以達到與分割線相似的效果,同時保持整體設計的簡潔和清晰。
設計方法論 I 超全面的頁面分割設計指南
 
 
為了提升屏效,我們希望在一屏內展示盡可能多的信息。在這種情況下,分割線的設計顯得尤為重要,因為它們能夠有效地劃分信息區域,使內容更加清晰、易于理解。
 
通過使用分割線,我們可以將較多的信息條理化,使得用戶能夠更快速地找到所需的內容。與沒有分割線的布局相比,使用分割線能夠顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下,分割線能夠將信息區域明確地劃分開來,防止信息之間產生混淆或交叉。這種劃分不僅使得每個信息塊更加獨立,而且提高了信息之間的對比度,使用戶能夠更輕松地識別和區分不同的信息。
 
因此,當我們的目標是提高屏效并展示大量信息時,分割線的設計是一個關鍵要素。通過合理地使用分割線,我們可以確保信息布局更加清晰、有序,從而提高用戶的閱讀效率和滿意度。(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
線性分割在移動端頁面設計中的應用場景廣泛,尤其是在需要清晰劃分信息模塊時。如微信的聊天列表中,線性分割被用來區分不同的消息條目。每條消息之間通過一條細線進行分隔,使得每條消息清晰可辨,方便用戶快速瀏覽和定位到特定的消息。
 
線性分割還常用在各類App的信息提示中,如果有多條消息需要展示,線性分割可以用來
區分不同的消息組。例如招商銀行APP中,當用戶收到多條未讀消息時,每條消息之間可以通過線性分割進行區分,使得每條消息清晰可辨,方便用戶逐一查看和處理。
 
在APP需要用戶填寫信息和設置的表單頁面中,線性分割可以用來區分不同的輸入字段或信息區域。這有助于用戶更清晰地了解需要填寫的信息,提高表單的填寫效率和準確性,比如站酷的設置頁面(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割的定義:卡片分割設計主要通過將內容或功能區域劃分成獨立的“卡片”來進行信息展示和組織。每個卡片通常包含相關的內容或功能,并且與其他卡片通過一定的間距或線性分隔進行區分。
 
卡片分割設計具有以下優勢:
 
1.內容封裝:卡片分割設計將相關內容或功能封裝在一個獨立的卡片內,使得每個卡片成為一個獨立的信息單元。這有助于保持頁面內容的清晰和整潔,方便用戶瀏覽和理解。
 
2.明確邊界:每個卡片通常具有明確的邊界,通過邊框、陰影或間距等元素來區分不同的卡片。這種邊界的存在使得每個卡片在視覺上相對獨立,方便用戶進行區分和識別。
 
3.靈活布局:卡片分割設計具有很高的靈活性,可以根據需要自由調整卡片的大小、位置和排列方式。這使得設計師可以根據不同的設計需求和用戶習慣來靈活調整卡片的布局,以達到最佳的視覺效果。
 
4.強調重點:通過不同的視覺處理手法,如改變卡片的顏色、大小或樣式等,可以突出顯示重要的卡片或內容。這有助于吸引用戶的注意力,引導他們關注到關鍵信息。
 
卡片的基本構成:卡片是一個獨立的主題性容器,旨在將內容和操作組合在一起。它可以包含多種元素,如容器、縮略圖、標題、副標題、富媒體、輔助文字、按鈕和圖標按鈕等。這些元素并非必須全部存在,而是根據具體需求進行選擇和配置。無論選擇哪些元素,它們都會以易于掃描和操作的形式整齊地放置在卡片上。這種設計使得卡片成為一個靈活且高效的信息展示工具,適用于各種場景和應用。
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割常見的類型:卡片分割可分為、通欄卡片和非通欄卡片
 
1、通欄卡片:其特點是卡片占據整個頁面寬度,沒有左右邊距。通欄卡片的設計可以提高布局的靈活性,使得頁面內容更加寬敞和大氣。同時,通欄卡片也可以更好地突出展示單條內容,引導用戶的視線,提高閱讀效率。
 
2.非通欄卡片:與通欄卡片相比,它會在卡片的左右兩側留有邊距,不完全占據整個頁面寬度。這種設計方式可以使得頁面內容更加有層次感和組織性,同時也有利于突出顯示某些關鍵信息。
設計方法論 I 超全面的頁面分割設計指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片,其設計特點在于去除了左右兩端的留白,僅保留上下邊距,從而提供了更大的展示空間。這種設計使得卡片內的內容能夠占據整個頁面寬度,進一步增強了內容的視覺沖擊力。在通欄卡片中,卡片與背景的關系通常通過一條背景色塊來抽象表現,這種簡潔的處理方式避免了過多的視覺元素干擾,使得頁面整體看起來更加整潔和統一。
 
通欄卡片可以被視為在極簡列表式和傳統卡片式設計之間的一種折中選擇。它繼承了卡片式的分層方式和強交互性,使得用戶能夠輕松地瀏覽和交互頁面內容。如下圖微博“關注”、微信“發現”頁面。
設計方法論 I 超全面的頁面分割設計指南
 
 
非通欄卡片
非通欄卡片通常采用帶圓角的設計形式,這種設計不僅賦予卡片一種柔和、圓潤的視覺效果,還增強了用戶的視覺舒適度。結合陰影效果以及四周的邊距,非通欄卡片巧妙地形成頁面留白,使得整體設計層次感更加豐富。
 
通過巧妙的投影設計以及前后顏色的精準設定,非通欄卡片成功地讓內容與背景之間產生視覺空間感,進一步強化了內容的立體感和層次感。這種設計技巧不僅提升了卡片的視覺吸引力,還使得用戶在瀏覽頁面時能夠更加輕松地區分和聚焦關鍵信息。
 
在頁面設計中,非通欄卡片的應用范圍十分廣泛。無論是用于展示文章、產品、圖片還是其他類型的內容,非通欄卡片都能夠通過其獨特的視覺效果和設計元素,為用戶帶來更加舒適、美觀的視覺體驗。同時,非通欄卡片還具有良好的適應性和靈活性,可以根據不同的設計需求和用戶習慣進行定制和調整,滿足不同場景下的應用需求。如下圖夸克“夸克日報”、APP Store“首頁”
設計方法論 I 超全面的頁面分割設計指南
 
 
選擇使用通欄分割線還是卡片分割,主要取決于你的設計目標和內容需求。以下是三個參考建議,幫助你做出更好的選擇:
 
1.當內容已有自然分割線時:如果你的主題內容本身就已經有明確的分割線,比如列表項、段落分隔等,那么采用非通欄分割會是一個好選擇。卡片可以清晰地界定每個內容塊,使主題信息層次更加分明,提高用戶的閱讀效率。
 
2.當內容類型多樣且占據較大空間時:如果單個主題內部包含了多種類型的內容,如文字、圖片、視頻等,且這些內容在垂直方向上占據了較大的空間(例如,內容長度超過屏幕高度的一半),使用非通欄分割會更加合適。卡片能夠有效地圈定內容范圍,為用戶提供一個明確的視覺邊界,幫助他們更好地理解和消化信息。
 
3.當需要增強橫向空間感時:如果你希望擴展頁面的橫向空間,或者暗示用戶可以橫向滑動頁面查看更多內容,那么非通欄卡片會是更好的選擇。非通欄卡片的設計能夠利用橫向內容連續性原則,幫助用戶建立頁面可以橫向滑動的意識,從而提升頁面的互動性和用戶體驗。如下圖知乎“發現”、站酷“推薦”。
設計方法論 I 超全面的頁面分割設計指南
 
 
卡片分割更適合圖文混排
卡片分割設計以其獨特的布局方式,成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內容統一呈現在一個界面中,實現了內容的多樣性與統一性的結合。這種設計不僅讓單屏區域能夠顯示更多內容,還通過合理的空間劃分,確保了文字和圖片之間的和諧共存,既維持了視覺的一致性,又巧妙地平衡了文字和圖片的視覺強度。因此,在需要同時呈現多種內容和媒介的場景中,卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
留白分割的定義:留白分割是目前設計的主流趨勢,越來越多的產品在使用留白分割設計。留白分割主要通過增加間距的方式,利用人的視知覺原理(接近法則:人的大腦會傾向于把彼此靠近的元素視為一組),將信息進行自然的視覺分組。
 
留白分割具有以下優勢:
 
1.突出重點信息:通過增加間距,可以將關鍵信息與其他內容區分開來,使用戶更容易注意到。
 
2.提高可讀性:適當的留白可以使文字或圖形元素之間的界限更清晰,減少視覺干擾,從而提高用戶的閱讀效率。
 
3.增強設計感:留白可以為設計增加呼吸感,避免元素過于擁擠,使整體布局更加和諧、美觀。
 
當元素之間的間距保持均勻時,整個視覺呈現會顯得平衡且協調,大腦默認為一個整體。然而,一旦元素的橫向和縱向間距發生變化,我們的大腦會基于接近性法則,本能地將距離較近的元素視為一個整體或群組,這就是留白分割。(如下圖)
設計方法論 I 超全面的頁面分割設計指南
 
 
留白分割在
有規律且卡片樣式較多的頁面中表現尤為突出,在有大量卡片樣式的頁面中,每個卡片通常都包含一定的信息。通過留白分割,可以清晰地劃分每個卡片的信息區域,使用戶更容易區分和閱讀每個卡片的內容,增加呼吸感,避免元素過于擁擠,從而提高整體的可讀性。例如下圖中主流的音樂類App
設計方法論 I 超全面的頁面分割設計指南
 
 
相反,如果在沒有規律且頁面內容較多的情況使用留白分割,則會使頁面雜亂無章。比如下圖咸魚的“廣場”界面feed流中,圖片從1~9張都有的情況下,使用留白分割,頁面就會變得雜亂,影響視覺效果。而脈脈則采用了卡片式分割樣式,頁面模塊則相對清晰很多。
設計方法論 I 超全面的頁面分割設計指南
 
 
設計方法論 I 超全面的頁面分割設計指南
 
 
在我們界面設計中,我們應充分考慮信息條目的復雜度。當信息較為簡單時,利用留白分割,能夠創造出清爽且不受干擾的視覺體驗。但隨著信息復雜度的增加,留白分割可能不足以清晰地展現信息層次,此時,引入線性分割是一個有效策略,它能提升屏幕的利用效率,使信息條理更加清晰。
 
當信息復雜度進一步升級,例如已經運用了線性分割或涉及更多操作時,我們需要進一步強化信息條目之間的邊界感。這時,卡片分割是一個理想的選擇,它不僅能增強信息的視覺層次,還能提升條目的可操作性。
 
重要的是,選擇信息分割方式時,我們要明確:分割本身不是目的,而是為了構建清晰的版面邏輯
,通過悅目的信息秩序來更好地突出內容,實現最佳的信息傳達效果。因此,在決策時,除了考慮上述細節因素,還需全面評估整體版面效果和信息傳達效率。感謝閱讀,希望對您有用。
設計方法論 I 超全面的頁面分割設計指南

作者:工頭新一
鏈接:https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(www.z1277.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

設計師如何做產品需求分析:先聊聊兩個“價值”

天宇

近兩年出現了不少“解放設計師雙手”的設計工具、AI工具,我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風格等等。問題是:這樣窮舉設計方案的工作方式當真有效嗎?
 
請警惕“莫得感情”的出圖機器!具備競爭力的設計師必須有自主意識,包括清晰的思維邏輯、果敢的決策力。而體現這一意識和能力的重要環節之一,就是產品生產鏈路中的首個環節“需求分析”。
 
需求分析并不僅僅是產品經理的事兒。從共同目標的角度來看,互聯網企業在崗位劃分上區分了產品經理、設計師、開發工程師等,是順應人的精力時間有限、術業有專攻的自然規律,但是從業務目標來說,每一個崗位都應該對“最佳用戶體驗和最大化商業利益的平衡”負責,確保這艘船在正確的航道上。所以,如果每個“船員”都具備主人翁意識和需求分析的能力,航程必然更健康穩健。
設計師如何做產品需求分析:先聊聊兩個“價值”
 
對設計師來說,需求分析不僅僅是“這個功能要不要做”的問題,也會影響后續的設計方案決策。每一次的功能增刪或調整,都是在改變用戶接收產品界面信息的整體效用,那么每一個產品需求的分析都要評估這個功能在整個信息架構、用戶體驗鏈路的位置孰輕孰重,也就必然會影響你的設計方案決策。
 
產品需求從哪里來?
 
“有用戶反饋說……"
“國慶節快到了,我們策劃了一個活動……”
“這個付費轉化率很低,達不到預期。我們想……”
……
產品需求的來源多種多樣,可能來自產品經理、用戶反饋、產品數據、市場風向、技術革新等等。當然,還有來自作為設計師的”我自己“。當我靈光一閃想到一個很炫酷的小創意,情感上免不了自以為是地想”咱們產品這么不做這個“——這個時候我也會用需求分析的框架來質問自己:
“值不值得做(價值評估)”、“應當先做什么(優先級)”、“用戶需求要滿足到什么程度(核心體驗鏈路)”這三個問題。
 
做需求分析,要想什么?
我們常說產品需求要“洞察用戶真正的需求”,要明確“用戶價值”。剛入行的時候,我們都會點點頭,心想“對哦”。可是什么是“真正的”、什么是“假的”、什么是“價值”?說實話,這些概念都挺虛的。只有當理論落到某個用戶場景去分析,我們才能理解其深意。
 
先說點虛的,什么是“價值”?
 
價值是多維度的概念,在不同的學科中都會在“價值”前加一個表范圍的定語,比如“勞動價值”、“經濟價值”、”社會價值”。隨著互聯網的發展,我們出現了兩個重要的新詞“用戶價值”和“產品價值”。
 
對于用戶而言,他們購買或使用產品或服務是為了滿足特定的需求,比如提升效率、獲得愉悅、獲取經濟收益等。那么我們說這個產品具有“用戶價值”。
 
所以需求分析首先是“評估價值”,而價值評估則拆分為“用戶價值”和“商業價值”兩部分。即使當下的需求目標是提升用戶規模(拉新、促活、挽留等),并不需要用戶掏錢,也是為了實現長遠的商業價值。當然,這僅適用于以盈利為目標的企業,非盈利組織還有“社會影響力”的目標,不在本文討論范圍內。
 
下面我們進一步拆解價值評估:“用戶價值評估”和“商業價值評估”。
設計師如何做產品需求分析:先聊聊兩個“價值”
 
 
1、用戶價值評估
解決哪些用戶在什么場景下的什么問題?
 
這個問題越具體到“人”,就越容易分析。如果需求來自于用戶反饋,我們溯源到具體的用戶。
 
有一個朋友出去創業,想做一個“找飯搭子”的同城陌生人交友軟件。他說,偶爾看到微信朋友圈有人召喚“有沒有人一起探店”的動態,去網絡社區搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關聯消費,商業模式很清晰。他想通過他的產品解決“用戶|在探店場景中|無法及時找到飯友”的問題。——“找飯友”是一個行為動作,沒有切入到用戶的內在需求。
 
定義用戶價值不能只停留在“行為上”,可以嘗試找到目標用戶做定性訪談,進一步深挖問題。比如,我們想進一步把問題下鉆,可能會問到這些問題:
 
● 用戶為什么要找飯友?不能一個人探店?
● 用戶為什么找不到“飯友”?
● ……
 
我們進一步細化“用戶-場景-問題”的價值定義:
解決 一線城市年輕用戶(尤其是剛遷移新城市的年輕人)|通過約伴探店|解決 同好交友(社群需求)、 “量大”餐館均攤成本(省錢需求)、獲得更愉悅的吃飯氛圍 (情緒需求)的問題。
設計師如何做產品需求分析:先聊聊兩個“價值”
 
 
那有了這個用戶價值定義是不是就可以順利立項呢?——看這個文章的篇幅,你只讀了不到一半,當然還有更多需要推敲的問題,請繼續閱讀。
 
這個需求接觸不到真實用戶怎么辦?
 
有時候我們的需求來源可能是市場風向、技術革新帶來的未知變化。我們無法直觀地獲知“具體的用戶是誰”、“TA在什么場景遇到什么問題”。
——這種情況,我們則需要反向思考:這個需求如果做了,獲益的用戶是誰?滿足了他們在什么場景下的需求?如果不做,用戶會不會因此棄用我們的產品?可能流失的用戶,大盤占比可能是多少?是不是高價值用戶?
設計師如何做產品需求分析:先聊聊兩個“價值”
 
 
用上面的思路去層層推敲,可能會否定原來的產品策劃,可能會挖掘出新的需求,可能會改變需求的優先級。
 
值得一提的是,有時候經過層層推敲,最終得到的決策可能會與市面上的競品有所雷同。也就是我們經常會問的一個問題:為什么A產品已經做了這件事,B產品還要做同樣的事情?
 
有的功能或服務是順應用戶需求而產生的,如果有所缺失,就無法達成用戶目標。比如短視頻產品都會做點贊和評論,因為視頻創作者和消費者分別有“獲得認可”的被尊重訴求、”表達意見“的掌控欲等心理需要。而產品則需要這些點贊和評論數據去評判內容熱度和豐富個性化標簽,以優化內容的推送機制。很多同一賽道的產品會有雷同的功能,雖然常常被調侃為”相互抄“,但是真正做需求分析才能看清“什么是無腦抄”、“什么是必然如此”。
 
2、商業價值評估
用戶會為你這個新產品/新功能買單嗎?
 
我們找到一個有用的需求點是簡單的,因為需求的來源真的太多太多,但是當我們發現,用戶不一定會為我們的新產品或新功能買單。
請注意,這里的“買單”不限于用戶掏錢,還包括用戶決定使用哪個產品的決策成本、用戶愿意花費在某個產品的時間和學習成本等。
 
那我們怎么預判用戶會不會買單呢?或者,如何提升用戶的買單意愿呢?
 
如前面所言,“用戶價值”就是通過你的產品獲得了預期的效用。效用可以是省了時間、省了錢、省了學習成本、獲得情緒價值、獲得安全感等。而用戶對效用的感知,往往是對比過去經驗的解決方案得到的。所以,我們首先要看用戶之前是怎么解決這個問題的,然后是用戶遷移到新的解決方案(使用新產品或新功能)要付出多少成本。
 
繼續用上面“飯搭子”的案例:
設計師如何做產品需求分析:先聊聊兩個“價值”
 
 
——我們從這個案例可以看到,當我們做成本對比,不能簡單地說新舊方案哪個成本更高。用戶付出的“成本”是多維度,包括“時間成本”、“經濟成本”、“安全風險”等維度。
“飯搭子”這個新方案,對比舊方案,并沒有沒有壓倒性的成本優勢。我們雖然可以通過產品設計和運營降低當中的用戶成本,比如通過用戶歷史參與數據(參與飯局次數、飯友評價、真實職業信息等)提供用戶靠譜度評分,以降低安全成本。但消除用戶成本,需要花費較大的資源投入,我們可以預判這不是一個高ROI的產品項目。
有趣的是,人不是完全理性的。有的場景,只要其中一項成本感知強烈,人就可能選擇棄用這個產品。比如“飯搭子”這個案例中,女性用戶對安全風險更為敏感,女性用戶更不愿意嘗試陌生社區。
設計師如何做產品需求分析:先聊聊兩個“價值”
 
 
如果我做的是一個非常創新的項目,真的沒辦法找到“舊方案”做對比呢?或者我無法獲知舊方案的用戶成本呢?——我們依然建議盡可能地接近用戶、收集足夠多的信息,以輔助判斷。如果依然非常不明朗,可以通過MVP的方案去預估。關于MVP實踐的書籍和網絡資料很多,大家可以自行搜索。
 
多少用戶會買單呢?
? 確認了這個需求有用戶價值
? 確認了有XX需求的用戶很可能會買單
——接下來可以開干了嗎?
 
不夠,還需要預判收入規模。因為:收入=客單價x支付用戶數=客單價x訪問用戶數x支付轉化率。
這個等式適用于一般的to C產品,不同的產品可能有差異,比如視頻用戶的使用時長可能與產品收入掛鉤,那么用戶時長也需要作為一個變量放入到你的產品收入公式中。
當我們要開發一個新的付費互動功能,我們需要做數據預估:這個互動功能放在這個位置,每天的曝光可能是多少?按照此頁面同樣位置的點擊轉化和其他功能的付費轉化,能否預估這個新功能的收入?這個收入規模值得投入X天的開發人力嗎?
如果這個需求的直接目標不是收入,而是獲取更大用戶規模。我們也同樣用“等式”這個思考方式來去做數據估算,只是把“收入”理解為用戶量或其他目標數值、而非金錢收入。
當然,通過歷史數據估算收入是比較理想的情況。如果身處一個數據體系建設落后的企業中,我無法獲取足夠的數據支持,怎么辦呢?或者,這是一個絕對的革新體驗(比如AI輔助內容創作),我無法用過往的數據或經驗評估收入規模,怎么辦呢?
那么,至少解答“解決哪些用戶在什么場景下的什么問題”,來看看這個需求的用戶場景覆蓋是否足夠廣;再權衡為了獲得這個新產品/新功能帶來的新體驗,用戶要投入哪些成本,以此做需求的排除法——跟創業一樣,做產品本身就存在了諸多不確定性,并非所有的決策都能通過公式去論證。
我們只能在有限條件下盡量選擇做正確的事,排除那些大概率不能成功的事。然后嘗試MVP,或直接交給市場和時間驗證。
此外,如果設計師想作為初創成員加入新產品,還要跑通可持續的盈利模式。這里又是一大塊學問,比如了解這個企業做這件事的資源優勢等等,本文作者的知識域和本文篇幅都有限,建議感興趣的朋友翻看商業分析相關書籍。但是新舊方案的用戶成本對比、收入公式的拆解,依然是重要且可行的商業價值視角。
 
3、優先級
“優先級”可以分為兩層理解,一層是產品需求之間的優先級排序,另一層則是功能范圍層的優先級,也就是我們聊需求經常會問的問題:我們明確了這個產品需求當下就要啟動,但是當前要做到什么程度呢?
前者,對比不同需求的產品價值大小,再結合開發實現成本和耗時、是否需要追趕某個時間節點等,產品需求之間優先級不難得出。而設計師更多要思考的是后者。
舉個例子:開學季馬上要到了,產品經理了解到學校有類似“語文朗誦作業打卡”的作業打卡訴求。我們希望搶時間窗去滿足這個大規模的家校場景,即“如何最快地滿足每日/周重復的信息收集需求”?作業打卡場景可否延伸到其他打卡場景,不同的打卡有何共性或差異?
其中“最快”暗含的意思是“這個功能至少要做到什么程度才能滿足最核心的用戶需求”。這個時候,我們拉了一個表格,快速梳理不同用戶角色(比如區分“打卡創建者”和“參與打卡者”)的體驗鏈路,再決策各個體驗環節的功能復雜度要到哪里。
從全盤中抽取出體驗閉環的最小集
從全盤中抽取出體驗閉環的最小集
 
不要忽視商業競爭中的時間差,因為搶先占領市場的產品實際上是提升用戶遷移到競爭對手的成本。過去我們提倡匠人精神,不放過每一個細節。而當前激烈的市場競爭環境下,“有的放矢”比“摳細節”更加重要。
 
小結
我們歸納一下需求分析的思路,多問問這些問題:
設計師如何做產品需求分析:先聊聊兩個“價值”
 
 
需求分析是比較考驗全局觀、邏輯性、數理分析和共情能力的。工作中可以通過拉表格、思維導圖、白板等工具梳理思路。如果你喜歡寫文字,那就用寫的方式。總之,切忌接到產品需求就動手出界面方案。
最后,小作者想留一個開放性問題:“AI能替代人類做產品需求分析嗎?”期待大家的評論區留言~
 

作者:騰訊ISUX
鏈接:https://www.zcool.com.cn/article/ZMTYxODM0NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

產品設計如何利用心理學

ui設計分享達人

產品設計的成功除了依賴設計方案和技術實現,還與用戶的心理密切相關。用戶心里決定了我們用怎樣的設計策略解決問題。我們常認為人們做決策時是理性的,但其實用戶行為經常是非理性,會受到情緒、習慣和社交環境的影響。了解這些心理學規律能幫助我們更好地的預測和引導用戶行為,優化產品體驗,提高用戶的粘性、留存率和轉化率,從而產品商業價值最大化。
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學
 
 
產品設計如何利用心理學


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

貨幣符號視覺設計:體驗、要素與趨勢

ui設計分享達人

引言:貨幣符號在數字時代的設計挑戰
貨幣符號是金融界面設計中的核心元素之一,它不僅傳遞著貨幣信息,還承擔著用戶交互的關鍵角色。從電子支付到電商平臺,從投資界面到全球化交易,不同的行業和應用場景對貨幣符號的設計有著各自的需求和挑戰。本文將從設計的角度出發,探討貨幣符號在不同行業中的應用,分析其在功能性、可讀性與美觀性上的平衡,幫助設計師更好地應對多樣化的設計需求。
 
一、
貨幣符號:標準化與多樣性的平衡
1、平衡標準化與多樣性
國際標準化組織(ISO)為各國貨幣制定了統一的三位字母代碼和數字代碼,同時也規定了一些常見貨幣的符號表示方法。例如:人民幣的符號為“¥”,美元的符號為“$”,歐元的符號為“€”。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
雖然標準化是貨幣符號設計的基礎,但多樣性也是不可忽視的因素。不同國家和地區的文化、語言和歷史背景影響著貨幣符號的設計風格和使用場景。例如,阿拉伯國家在貨幣符號上通常會使用不同的書寫方向,而拉丁美洲的一些國家則可能采用略有不同的符號變體。
在貨幣符號設計中,平衡標準化與多樣性需要考慮功能性和用戶體驗的結合。一方面,標準化確保了全球用戶的識別度和信任感;另一方面,多樣性則為不同文化背景下的用戶提供了更加個性化和貼近的體驗。設計師在開發全球產品時,可以通過使用靈活的設計系統,將標準化的貨幣符號與本地化元素相結合。
2、主要貨幣符號一覽
貨幣符號視覺設計:體驗、要素與趨勢
 
 
二、用戶體驗中的貨幣符號:認知、引導與品牌塑造
貨幣符號,在用戶體驗設計中,不僅用于標記金額,還在認知、引導和品牌塑造中扮演重要角色。合理的符號設計可以提升用戶的識別速度,同時增強品牌的辨識度。
1、降低認知負荷,貼近用戶習慣
常見的貨幣符號如 "¥"、"$"、"€" 等,因其頻繁使用而被用戶廣泛認知,認知負荷較低,能快速被識別和處理。相比之下,較少見的符號如 "?"(尼日利亞奈拉)或 "?"(哈薩克斯坦堅戈)則可能增加用戶的認知負擔。設計師應優先選擇用戶熟悉的符號,并在界面設計中確保這些符號的清晰可見,避免用戶因不熟悉而感到困惑。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
2、視覺引導與用戶行為驅動
貨幣符號的視覺呈現會直接影響用戶的注意力和交互行為。設計師通過調整符號的大小、顏色和位置,可以引導用戶聚焦關鍵信息,避免錯誤操作。在支付或結賬頁面,突出顯示貨幣符號不僅能區分不同幣種,還能幫助用戶快速確認金額,提升交互的安全感和效率。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
3、品牌塑造中的符號一致性
貨幣符號在品牌塑造中也有著潛在的影響力。通過統一的字體選擇、配色方案和視覺風格,設計師可以將貨幣符號與品牌整體形象融為一體,增強品牌的一致性和專業性。特別是在全球化背景下,不同貨幣符號的統一設計能夠提高品牌的全球辨識度,強化用戶對品牌的信任與依賴。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
三、貨幣符號的視覺設計要素:從位置到配色
貨幣符號作為金融界面中的核心元素,其視覺設計不僅關系到符號的選擇,還涉及布局、字體、大小、顏色等多個方面。通過優化這些視覺要素,設計師可以提高貨幣符號的易讀性與信息傳達的效率。以下是幾個關鍵的設計要素:
1、
位置與間距:緊密關聯,確保閱讀流暢
符號前置:
在大多數文化和書寫規范中,貨幣符號通常放置在金額數字的前方,如"¥100"、"$50"。這種布局方式符合用戶的認知習慣,使得貨幣種類一目了然。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
間距適中:
貨幣符號與數字之間需要保持合適的間距,避免過于緊湊或分散。最佳間距通常在幾個像素之間,并在響應式設計中根據屏幕大小進行調整,確保不同設備上的閱讀體驗流暢。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
2、
字體選擇:兼顧一致性與可讀性
無襯線字體:
無襯線字體具有簡潔、現代的特質,且可讀性強,適用于屏幕和印刷。將貨幣符號與無襯線字體搭配能保持信息清晰度,尤其適合需要快速讀取價格的金融界面。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
等寬字體:
在需要對齊的文本中,等寬字體能確保貨幣符號和數字排列整齊,提升信息的可讀性和對比性,使用戶更容易比較數據。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
3、大小與比例:突出層次感
貨幣符號通常設計得略小于數字部分,以確保視覺上的平衡感。如果符號過大,可能喧賓奪主,削弱數字的關注度;過小則容易被忽略。根據不同應用場景,設計師可靈活調整貨幣符號和數字的大小比例,特別是在促銷或價格展示中,符號和數字可以接近,以突出價格信息。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
4、
顏色搭配:強調對比與和諧
突出重點
:設計師可以通過顏色來強調貨幣符號,尤其是在電商或支付界面中,使用如紅色等醒目的顏色吸引用戶注意。然而,應避免過多的顏色切換,以防止混亂或干擾用戶體驗。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
保持協調
:貨幣符號的顏色應與界面整體配色保持一致,避免沖突。一般建議采用與文本顏色相近或具有適度對比的顏色,以保持界面和諧,避免過度突兀。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
5、
元素搭配:增強視覺引導
與按鈕搭配
:在支付或結算等功能按鈕上增加貨幣符號,能夠強化操作的貨幣屬性。例如,在"支付"按鈕上加入貨幣符號,能夠清晰傳達該操作與付款相關。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
與其他元素搭配:
貨幣符號也可以與錢包等金融圖標結合使用,增強表意性。設計時應注意符號與圖標風格的統一性,以保持整體設計的視覺一致性。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
6、對齊方式:確保界面整齊有序
貨幣符號與數字的對齊方式也是影響視覺效果的關鍵因素。左對齊、右對齊或居中對齊各有優劣,具體選擇應根據界面的整體布局而定。一般來說,左對齊適用于文本較多的界面,右對齊則更適合數字和金額為主的界面,有助于保持數值列的整齊性,從而提升界面信息的易讀性。
右對齊
:在涉及金額顯示的界面中,貨幣符號通常與數字右對齊,這種方式可以確保金額列表整齊排列,提升界面的易讀性。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
元素對齊
:貨幣符號應與其他界面元素,如標簽、按鈕等保持一致的對齊方式。例如,在價格標簽旁邊的按鈕上,符號的位置應與按鈕對齊,避免視覺上的不協調。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
通過合理地設計貨幣符號的布局、字體、顏色和對齊方式,設計師可以有效提升界面中的視覺層次感和信息傳達效率。在實際應用中,這些視覺要素必須根據用戶需求和場景變化做出精細調整,從而優化用戶體驗。
 
四、行業視角下的貨幣符號設計:多場景應用
在金融和電商等不同行業中,貨幣符號的設計不僅需要滿足基礎的可讀性和美觀性,還需要根據不同的場景進行靈活調整。
1、電子支付與移動支付場景
在移動支付的界面中,貨幣符號的設計必須簡單明確,能夠讓用戶在瞬間識別金額,確保交易順暢。由于移動設備屏幕有限,設計上應注重符號的簡潔性與高對比度,確保在小尺寸屏幕上仍然具備良好的可見性和清晰度。例如,在支付寶或微信支付中,貨幣符號通常與金額保持較為緊密的視覺聯系,以確保用戶不會混淆支付金額。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
2、投資與股票交易界面
投資和股票交易平臺往往展示大量的數字數據,界面密度高。為了確保用戶能夠快速處理信息,貨幣符號必須足夠醒目但不喧賓奪主。在這種場景下,字體選擇尤為關鍵,符號應與數字保持一致的風格和比例,避免視覺干擾。同時,色彩的應用也需要足夠謹慎,以紅綠等傳統的漲跌配色為主,貨幣符號應保持中性色調,確保與其他視覺元素相協調。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
3、電商與零售平臺
在電商平臺上,定價信息是用戶決策的重要因素,貨幣符號的設計需要既突出價格信息,又不顯得過于突兀。設計師可以根據不同的定價策略,調整符號的位置、大小和顏色。比如,在促銷場景下,貨幣符號與金額常常會被設計得更大、更顯眼,以吸引用戶注意力;而在常規商品頁面,符號則更為簡約,以便用戶迅速瀏覽多款商品。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
五、未來展望:數字貨幣時代的符號設計趨勢
隨著數字貨幣的興起,貨幣符號設計正面臨新的挑戰與機遇。在未來,貨幣符號的設計不再局限于傳統的紙幣和硬幣表達方式,而是逐步進入更為抽象的數字化范疇。
1、多貨幣共存:增強識別性
未來的金融體系將可能出現多種不同形式的貨幣同時存在,如法定數字貨幣、加密貨幣等。在這種環境下,貨幣符號需要具有更強的辨識性,以幫助用戶快速區分不同類型的貨幣。例如,比特幣(?)、以太坊(Ξ)等加密貨幣的符號設計,已經有別于傳統貨幣符號。未來,設計師可能需要創造更多具有獨特視覺特征的符號,以適應多元貨幣并存的需求,同時保證用戶能在復雜的金融界面中迅速識別出各類貨幣。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
2、動態設計:適應不同設備與場景
隨著金融交易場景的日益多樣化,貨幣符號的設計可能不再是靜態的。未來,數字貨幣符號或許會以動態、互動的形式呈現,以適應不同設備屏幕和使用場景。例如,在智能手表、增強現實設備或虛擬現實場景中,貨幣符號可能根據界面需求進行實時調整。這種動態設計可以確保符號在不同大小、不同分辨率的屏幕上保持一致的辨識度和清晰度。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
3、統一標準與全球化適應
數字貨幣的全球化使用趨勢意味著符號設計必須具有全球通用性和跨文化適應能力。隨著跨國交易的頻繁,設計師需要考慮不同地區用戶的文化背景和語言習慣,確保貨幣符號在全球范圍內都能被廣泛接受和理解。這可能需要一個統一的標準,類似于現有的ISO貨幣代碼標準(如USD、EUR),為數字貨幣符號設計提供指導。未來,全球化標準可能不僅限于編碼,還會擴展到視覺符號設計領域。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
4、安全性與可信度的視覺傳達
數字貨幣與傳統貨幣最大的不同在于其依賴于虛擬網絡進行交易,這使得安全性成為用戶最關心的問題之一。未來的貨幣符號設計將不僅僅是傳達貨幣的價值,還需要在視覺上表達出交易的安全性與可信度。通過更直觀的視覺設計,用戶可以一眼判斷出該交易是否安全可信。例如,未來的貨幣符號可能會融入更多與安全、認證相關的視覺提示或反饋機制,幫助用戶在數字化環境中建立信任。
貨幣符號視覺設計:體驗、要素與趨勢
 
 
結語
隨著數字化的迅速發展,貨幣符號設計面臨新的挑戰與機遇,不僅要在標準化和多樣化之間找到平衡,還要通過合理的視覺設計,提升符號在不同場景中的適應性和可識別性。無論是在電子支付、投資交易,還是電商平臺上,精致的貨幣符號設計不僅能優化用戶體驗,還能強化品牌形象,提升用戶信任。
展望未來,隨著數字貨幣的普及和全球化的推進,貨幣符號的設計將更加注重多樣化與安全性。設計需要不斷適應變化的技術和用戶需求,推動貨幣符號在不同設備和文化背景下的統一性與普遍適用性。


作者:西子小宇宙
鏈接:https://www.zcool.com.cn/article/ZMTYzOTAyNA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

十個設計思考選擇

ui設計分享達人

這些設計選擇題你會怎么做?
 
 
 
 
一、你更傾向于哪個設計布局?
 
思考方向:1、從業務屬性的角度思考布局結構;2、從創建內容量來思考;3、通過添加交互切換來自定義結構布局等。
這些設計選擇題你會怎么做?
 
 
 
 
二、你更喜歡哪個設計方案?
 
思考方向:1、金剛區功能的重要性和是否存在主次關系來思考;2、Banner 設計的獨立性和沉浸感方面思考;3、界面設計視覺張力層面的思考等。
這些設計選擇題你會怎么做?
 
 
 
 
三、你會選擇哪種設計效果?
 
思考方向:1、是否需要添加背景圖或者背景色;2、視覺效果帶來的沉浸感層面思考;3、突出界面上層還是下層內容方向來思考;4、卡片式效果的選擇角度等。
這些設計選擇題你會怎么做?
 
 
 
 
四、你覺得哪種交互體驗更好?
 
思考方向:1、全部篩選條件的權重和是否存在主推條件;2、用戶對進一步篩選條件的需求度;3、篩選條件的數量等角度思考。
這些設計選擇題你會怎么做?
 
 
 
 
五、你覺得哪種布局方案更合理?
 
思考方向:1、熟人社區還是陌生人社區方面思考;2、突出內容還是突出發布者;3、圖片的重要性和圖片數量等方面思考。
這些設計選擇題你會怎么做?
 
 
 
 
六、你覺得哪種視覺感官度更好?
 
思考方向:1、品牌色的突出程度;2、信息之間的對比度強度大小來思考;3、整體界面的視覺焦點突出位置等思考。
這些設計選擇題你會怎么做?
 
 
 
 
七、你更傾向于哪種展示模式?
 
思考方向:1、產品和內容屬性等方面思考;2、內容的動靜屬性層面思考;3、信息分發突出篩選邏輯還是推薦邏輯等。
這些設計選擇題你會怎么做?
 
 
 
 
八、瀏覽文章時需要顯示標題嗎?
 
思考方向:1、結合大部分標題的字數分析;2、標題對文章內容的干擾度層面思考;3、標題和文章內容的關聯程度等。
這些設計選擇題你會怎么做?
 
 
 
 
九、哪種設計布局體驗度更好?
 
思考方向:1、強化品牌的程度和品牌量等角度綜合分析;2、推薦信息的密度與上下結構的差異性等方面思考;3、視覺張力與強化欄目的焦點選擇角度等思考:4、布局結構是否過度自然等。
這些設計選擇題你會怎么做?
 
 
 
 
十、這兩個設計方案你會怎么選?
 
思考方向:1、圖片的孤立性和沉浸感等角度分析;2、空間感和信息層級感等角度思考;3、界面設計感官的整體性思考;4、局部功能的關聯性等分析。
這些設計選擇題你會怎么做?
 
 
 
 
小結
 
通過這些案例設計的對比,可以訓練我們多方面的思考和分析能力,從不同角度思考設計方案的合理性。希望本欄目可以帶給大家更多思考,案例與觀點屬于個人理解,不足之處歡迎大家留言指正。
這些設計選擇題你會怎么做?
 

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

信息架構優化 | 如何設計產品中的列表項?

資深UI設計者

本次關于“列表項”的規范化設計是在整個產品 信息架構優化 (Information Architecture Optimization) 背景下進行的。把列表項做得更具通用性,從開發的角度,能更好地完成項目落地,以及降低后期維護的成本。從用戶的角度,產品交互的一致性能讓用戶快速熟悉產品,從而提升產品的 易用性。

UI設計中的信息層級設計的重要性

資深UI設計者

在設計中,我們通常會用到很多設計法則,而對于這些法則的由來總是一知半解。這次我整理了這些法則的概念和一些簡單的運用。設計法則來源于生活又運用于生活~

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 亚欧精品一区二区三区 | 亚洲欧美一区二区三区九九九 | 欧美人成在线观看 | 成人国产精品视频 | 国产午夜在线观看 | 亚洲男女免费视频 | 一级特黄录像免费播放冫 | 日韩欧美一区在线观看 | 在线观看黄日本高清视频 | 国产毛片视频 | 国内精品小视频在线 | 尤物网站在线 | 久久亚洲国产精品 | 国产 视频 p | zoofilia杂交videos新另类 | 爽爽影院色黄网站在线观看 | 亚洲欧美综合色区小说 | 国产女乱淫真高清免费视频 | 国产乱码精品一区二区三区四川人 | 调教套上奶牛榨乳器喷奶水 | 国产一区 在线播放 | 亚洲成人精品 | 上海麻豆文化传媒网站入口 | 亚洲综合第一欧美日韩中文 | 亚洲嗯啊| 亚洲第一毛片 | 精品久久看| 亚洲情a成黄在线观看 | 久久久久久国产精品免费 | 黄色一级免费片 | 欧美日韩中文字幕在线 | 亚洲精品香蕉一区二区 | 日韩成人精品视频 | 国产不卡一区 | 国产午夜精品一区二区三区不卡 | 三级视频网站在线观看播放 | 成人欧美一区二区三区小说 | 成人做爰视频在线观看视频 | 在线视频自拍 | 亚洲精品一区二区三区香蕉在线看 | 在线视频97 |