<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 首頁(yè)

          常見的 10 大圖標(biāo)設(shè)計(jì)風(fēng)格

          杰睿

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

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

          小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略

          杰睿

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


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

          B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)

          杰睿

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


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

          設(shè)計(jì)的兩面性:理性決策與感性表達(dá)

          杰睿

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


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

          動(dòng)效讓這些設(shè)計(jì)更驚艷

          杰睿

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


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

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

          杰睿

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


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

          以用戶為中心的交互設(shè)計(jì)思維

          杰睿

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


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

          B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)

          杰睿

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

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

          UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)

          杰睿

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


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

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

          杰睿

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


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

          日歷

          鏈接

          個(gè)人資料

          存檔

          99久久无色码中文字幕| 蜜臀久久99精品久久久久久小说 | 1000部精品久久久久久久久| 久久天天躁夜夜躁狠狠躁2022| 亚洲精品高清一二区久久| 伊人久久一区二区三区无码| 亚洲精品无码久久久久| 91精品免费久久久久久久久| 色综合久久88色综合天天 | 中文字幕无码免费久久| 91性高湖久久久久| 热99RE久久精品这里都是精品免费| 精品国际久久久久999波多野| 国内精品免费久久影院| 亚洲va国产va天堂va久久| 精品久久久久久99人妻| av无码久久久久久不卡网站 | 老色鬼久久亚洲AV综合| 久久久久久久综合日本| 国产∨亚洲V天堂无码久久久| 成人综合久久精品色婷婷| 国产亚洲精久久久久久无码AV| 日韩AV无码久久一区二区| 色婷婷噜噜久久国产精品12p| 国产精品99久久久久久宅男 | 久久久久噜噜噜亚洲熟女综合| 久久午夜羞羞影院免费观看| 色综合久久天天综线观看| 中文字幕亚洲综合久久| 99精品久久精品| 无码人妻久久一区二区三区免费 | 伊人久久久AV老熟妇色| 热综合一本伊人久久精品| 国产91久久综合| 国产真实乱对白精彩久久| 色综合久久88色综合天天| 国产精品免费看久久久| 久久精品无码午夜福利理论片| 99久久国产精品免费一区二区| 欧美伊人久久大香线蕉综合| 亚洲成av人片不卡无码久久|