国产精品爱久久久久久久小说,女人扒开腿让男人桶到爽 ,亚洲欧美国产双大乳头,国产成人精品综合久久久久,国产精品制服丝袜无码,免费无码精品黄av电影,黑色丝袜无码中中文字幕,乱熟女高潮一区二区在线

            首頁

            產(chǎn)品配色那些事——配色實踐

            杰睿

            本章會從實操出發(fā),結(jié)合真實項目為大家?guī)砼渖珜嵺`。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統(tǒng)。

             

             

             

            產(chǎn)品配色那些事3-我的配色實踐

             

            本章會從實操出發(fā),結(jié)合真實項目為大家?guī)砼渖珜嵺`。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統(tǒng)。


            項目背景

             

            21年我司進(jìn)行業(yè)務(wù)調(diào)整,原保險業(yè)務(wù)從當(dāng)前產(chǎn)品中獨立出去,作為一家全新平臺為印尼用戶提供保險選購及理賠服務(wù),為此我們提供了新的產(chǎn)品設(shè)計和配色。

             

            一、定義主色

             

            1、選擇色相

             

            根據(jù)上一章提到的選色邏輯,我們依次從產(chǎn)品情緒、行業(yè)屬性和目標(biāo)用戶幾個緯度去思考。作為一家全新的保險平臺,我們希望產(chǎn)品給到用戶專業(yè)、安全、信任之感,那么藍(lán)色、綠色可以作為備選,藍(lán)色代表專業(yè)、權(quán)威,綠色代表安全、健康。后續(xù)我們做了相關(guān)行業(yè)調(diào)研,發(fā)現(xiàn)大部分本地產(chǎn)品也使用了這兩個顏色,可以確保備選顏色是符合行業(yè)喜好的,屬于安全的用色范圍。最后考慮到用戶的地域?qū)傩裕∧岽蟛糠钟脩舳夹欧钜了固m教,對綠色有著非同一般的熱愛。結(jié)合本次項目訴求,便選擇了綠色成為我們產(chǎn)品主色。

             

             

            2、確定色調(diào)

             

            明確了主色色相,但同一色相會有冷暖、深淺之別,給到用戶的心里感受也略有差異。具體到本次項目中,暖綠有溫暖、活潑、歡快的感覺,冷綠則帶給用戶冷靜、平和的情緒。對于本次項目,冷綠更加符合產(chǎn)品定位。

             

             

             


            3、調(diào)整飽和度、明度

             

            飽和度控制色彩的艷麗程度,明度控制色彩的明暗變化,這兩項參數(shù)直接影響色彩的最終效果,所以需要同步交替調(diào)整,直到選出最合適的。考慮到主色常用于按鈕或重要文本,所以需要注意色彩的對比度,確保文本在界面中的可讀性。在本次項目中,“綠色”本身屬于對比度較小的顏色,為了獲得合適的對比度,需要調(diào)整更大的飽和度和更低的明度。經(jīng)調(diào)整之后,我們測試了色彩的對比度為3:1,滿足W3C中給到的色彩對比度建議。

             

             

             

             

            二、推導(dǎo)輔助色

             

            1、匹配色相

             

            根據(jù)輔助色定義,我們匹配到了不同色相的輔助色,但并不是所有顏色都是我們需要的,需要根據(jù)經(jīng)驗做出一定刪減。如同類色中的兩個綠色,色相上與主色過于接近,使用過程中會造成視覺混淆,所以我們剔除這組顏色。再如中差色與對比色中都有黃色,為了與橙色區(qū)分更加明顯,我們刪除對比色中的黃色。經(jīng)過一系列刪減后,留下來的便是我們需要的色彩。此時也可以對色相進(jìn)一步調(diào)整,如類似色中的藍(lán)色偏向湖藍(lán),為了盡量和主色拉開差別,我們選擇色相向右偏移。

             

            2、視覺感官校準(zhǔn)

             

            以上色彩只確定了色相,沒有進(jìn)行飽和度、明度調(diào)整,視覺上并不屬于同一層級。為了獲取更加統(tǒng)一的配色,需要對其進(jìn)行調(diào)整,這一過程被稱為視覺感官校準(zhǔn)。如何校準(zhǔn)?有人通過給色彩疊加黑色,對比色彩亮度進(jìn)行校準(zhǔn)。但不同顏色本身亮度不同,強(qiáng)行調(diào)整一致會導(dǎo)致部分顏色失衡。所以此種方法可作為參考,但不具備太大可靠性,實際工作中還需依靠自身經(jīng)驗進(jìn)行調(diào)整,確保視覺上和諧統(tǒng)一。以下為完成校準(zhǔn)后的配色。

             


            三、推導(dǎo)中性色

             

            第二章提到中性色可通過調(diào)整明度或透明度得到,本項目使用場景比較固定,所以決定調(diào)整明度來得到中性色。考慮到主色為“冷綠”,與偏藍(lán)的中性色搭配可保證色彩調(diào)性一致,于是我們?nèi)∷{(lán)色色相值,調(diào)整飽合度獲得最終色彩。需要注意的是隨中性色明度依次降低,飽和度需要逐級增加。最后確保主要用色符合無障礙設(shè)計指南,我們對一級、二級、三級文字用色進(jìn)行了對比度測試,符合無障礙設(shè)計要求。

             

             

             

             

             

            四、生成梯度色板

             

            梯度色板可以提供更多配色,覆蓋更多使用場景,避免后續(xù)新增顏色的煩惱。早期為了獲得梯度色板需要設(shè)計師利用公式計算,現(xiàn)在可以直接使用在線工具生成。如Ant design的色板生成工具(https://ant.design/docs/spec/colors),Material design的色板生成工具(https://materialpalettes.com/),Eva Design System的色版生成工具(https://colors.eva.design/)。由于不同平臺算法不同,生成的色版效果也存在差異,這里首推Ant design,對比其他平臺色相變化更豐富、顏色更均勻、色階也更明確。

             

             

             

             


            五、建立色彩系統(tǒng)

             

            1、如何理解色彩系統(tǒng)?

             

            色彩系統(tǒng)隸屬設(shè)計系統(tǒng)的一部分,是對色彩進(jìn)行科學(xué)管理的體系。不同于色彩規(guī)范主要針對設(shè)計側(cè),而是需要打通開發(fā)聚焦產(chǎn)品代碼中。


            2、色彩系統(tǒng)包含什么?

             

            簡單來說色彩系統(tǒng)由design token、色彩庫和說明文檔構(gòu)成。design token是設(shè)計與開發(fā)約定一致的色彩名稱,作為色彩調(diào)用的唯一憑證。色彩庫是包含design token和顏色參數(shù)的樣式集合,供我們在設(shè)計和開發(fā)中調(diào)用。說明文檔類似于設(shè)計規(guī)范,定義了色彩的使用方式,為我們的使用提供指導(dǎo)。


            3、如何建立色彩系統(tǒng)

             

            a、token命名

             

            如何命名需要考慮token層級和token構(gòu)成。

             

            關(guān)于token層級,設(shè)計師Lukas Oppermann在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb)中有提到一般設(shè)計系統(tǒng)會將token分為三個層級,核心token(core token)、語義token(semantic tokens)和組件 token(component tokens)。核心token存儲的是原始值作為構(gòu)建設(shè)計系統(tǒng)的基礎(chǔ),語義token引用核心token,它的名稱描述了token的預(yù)期用途。組件token引用語義token,并將token綁定到對應(yīng)的組件。較多的層級可以使token命名更加清晰,但層層嵌套的邏輯也增加了管理的難度,Lukas Oppermann在文中提到也可以使用一層或兩層。

             

             

             

             

             

             

            關(guān)于token構(gòu)成,體驗設(shè)計師Nathan Curtis在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)一文中指出為了更加充分的描述token,token可以由名稱空間(namespace)、目標(biāo)對象(object)、基礎(chǔ)樣式( base)、修飾符(Modifier)構(gòu)成。名稱空間對應(yīng)系統(tǒng)、主題名稱,目標(biāo)對象對應(yīng)組件、組件元素和復(fù)合組件,基礎(chǔ)樣式是token的主干部份,包含樣式、屬性、語義,修飾符表明狀態(tài)、尺度、模式等。由于篇幅原因,此處只是簡單介紹,感興趣的同學(xué)可以點擊原文查看。

             

             

             

             

             

             

            按照兩位作者的觀點,筆者對本次色彩系統(tǒng)進(jìn)行了design token命名,如下所示:

             

             

             

             

             

             

            b、建立樣式庫

             

            樣式庫是設(shè)計與開發(fā)調(diào)用的基礎(chǔ),需要在設(shè)計工具中實現(xiàn)token的層級邏輯,同時方便開發(fā)同學(xué)查看。筆者主要使用的工具是figma,F(xiàn)igma為我們提供了豐富的功能和插件建立樣式庫,以下會介紹些主流方式及優(yōu)缺點,大家按照項目實際情況選擇使用即可。

            local style:figma支持將色彩定義為全局樣式,并對樣式進(jìn)行命名。設(shè)計在調(diào)用樣式后,開發(fā)便可以在查看面板看到對應(yīng)token,基本實現(xiàn)了樣式庫的作用。但local style不支持token的層級嵌套,只能實現(xiàn)單層級token。如果你的項目剛好使用了單層級token,那么建議你使用此功能。

             

             

             

             

             

             

            local variables:在今年6月份的config大會中,figma發(fā)布了變量功能,雖然CEO Dylan Field先生說不會推出design tokens,但變量功能卻完美實現(xiàn)了token的作用。它支持將色彩定義為變量,且可以實現(xiàn)層級嵌套,開發(fā)在查看面板也可以方便的看到變量名稱,算是解決了figma在design token方面的缺陷。

             

             

             

             

             

             

            Figma token:一款定義design token的插件,且支持token的層級嵌套。開發(fā)查看token名稱目前有兩種方式:1.可在 Figma token的inspect面板進(jìn)行查看,但插件需要在編輯模式下使用,意味著你需要給到開發(fā)編輯權(quán)限,這無疑會增加團(tuán)隊成本。2.插件支持將token轉(zhuǎn)化為figma樣式和變量,并保持當(dāng)前的token名稱,此時開發(fā)可以在figma的inspect面板查看token,建議使用此種方式,經(jīng)濟(jì)實惠。

             

             

             

             

             

             

             

            c、輸出說明文檔及團(tuán)隊推進(jìn)

             

            一般文檔內(nèi)容包含使用規(guī)則、注意事項、場景描述、token名稱、色值參數(shù)等等,也可根據(jù)實際情況作以增減。輸出說明文檔后,整個色彩系統(tǒng)搭建完成,接下來需要推進(jìn)團(tuán)隊使用。為確保整個系統(tǒng)在項目中順利落地,最好組織相關(guān)人員進(jìn)行一次宣講,介紹清楚使用規(guī)范及注意事項,明確要求嚴(yán)格按照系統(tǒng)執(zhí)行。

             

             


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

            產(chǎn)品設(shè)計如何利用心理學(xué)

            鶴鶴

            產(chǎn)品設(shè)計的成功除了依賴設(shè)計方案和技術(shù)實現(xiàn),還與用戶的心理密切相關(guān)。用戶心里決定了我們用怎樣的設(shè)計策略解決問題。我們常認(rèn)為人們做決策時是理性的,但其實用戶行為經(jīng)常是非理性,會受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測和引導(dǎo)用戶行為,優(yōu)化產(chǎn)品體驗,提高用戶的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價值最大化。
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)
             
             
            產(chǎn)品設(shè)計如何利用心理學(xué)


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

            Banner布局在用戶界面中的設(shè)計樣式研究

            鶴鶴

            前言
                Banner,這一設(shè)計元素對于我們設(shè)計師而言早已經(jīng)是司空見慣,其核心往往聚焦于視覺表現(xiàn)的層面,也是成為UI設(shè)計師重要能力play中的一環(huán)。今天要寫的,并非Banner在視覺藝術(shù)上的探索,而是其在UI場景中布局樣式的深度剖析。
                Banner圖作為產(chǎn)品中的一項基礎(chǔ)功能,其存在已是常態(tài)。在視覺創(chuàng)意的追求之外,UI層面的樣式布局也在不斷尋求突破與創(chuàng)新。
             
            目錄
            一、Banner 視覺層表現(xiàn)
            二、Banner 布局樣式
            三、總結(jié)
             
            一、Banner視覺層表現(xiàn)
                作為界面視覺焦點,Banner通常以可交互的輪播組件形式呈現(xiàn),這種動態(tài)展示方式已成為現(xiàn)在產(chǎn)品的重要導(dǎo)航模式之一。它不僅是信息傳遞的載體,也是平臺與用戶對話的窗口,承載著活動推廣、品牌宣發(fā)等核心內(nèi)容的展示使命。 在提升用戶注意力的設(shè)計探索中,Banner的視覺表現(xiàn)手法持續(xù)演進(jìn)。從設(shè)計維度來看,我們不僅要在創(chuàng)意構(gòu)思、版式布局、色彩搭配等基礎(chǔ)層面下功夫,更需在表現(xiàn)形式上尋求突破。
                基于動態(tài)復(fù)雜度,我將Banner的表現(xiàn)形式歸納為四個層級:從基礎(chǔ)的靜態(tài)圖像,到輕量級的GIF動畫,再到沉浸式的視頻背景,直至最具空間感的分層效果,每種形式都對應(yīng)著不同的設(shè)計目標(biāo)和用戶體驗。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            1.1靜態(tài)
                在眾多Banner表現(xiàn)形式中,靜態(tài)輪播圖因其高效的設(shè)計實現(xiàn)和便捷的技術(shù)支持而成為多數(shù)產(chǎn)品最普遍的選擇。
                這類Banner采用靜態(tài)圖片作為視覺載體,根據(jù)產(chǎn)品需求可分為兩種基礎(chǔ)模式:單一畫面呈現(xiàn)的簡約風(fēng)格,以及多畫面輪播的交互形式。其中,多圖輪播既支持自動播放的時間軸切換,也允許用戶通過手勢滑動進(jìn)行自主瀏覽,在保持視覺簡潔性的同時增加了交互維度。這種設(shè)計平衡了視覺效果與功能實用性,所以會成為多數(shù)產(chǎn)品的首選方案。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            1.2動態(tài)
                動態(tài)Banner以生動的表現(xiàn)力,在吸引用戶注意力方面展現(xiàn)出顯著優(yōu)勢。通過關(guān)鍵元素的微妙動畫和CTA按鈕的交互反饋,能夠有效引導(dǎo)用戶視線,強(qiáng)化信息層級。
              在動態(tài)Banner的應(yīng)用中,單圖形式往往更受青睞。雖然動態(tài)效果能提升視覺吸引力,但過度使用可能導(dǎo)致"視覺噪音",反而分散用戶注意力,降低核心信息的傳達(dá)效率。
                面對信息過載的數(shù)字環(huán)境。微交互動畫作為一種優(yōu)雅的解決方案,在功能引導(dǎo)和視覺敘事兩個維度都發(fā)揮著重要作用,也已經(jīng)成為界面設(shè)計中不可或缺的設(shè)計語言。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            1.3視頻
                視頻廣告作為一種成熟的營銷媒介,在短視頻文化盛行的當(dāng)下,已逐步融入Banner輪播體系。這類視頻Banner通常占據(jù)首屏黃金位置,配合明確的倒計時提示和便捷的關(guān)閉選項,為用戶提供可控的觀看體驗。為減少對用戶的干擾,視頻默認(rèn)采用靜音播放模式,這種貼心的設(shè)計選擇體現(xiàn)了以用戶為中心的設(shè)計理念。
                在特定垂直領(lǐng)域,如影視類平臺,我們也能觀察到多視頻輪播的創(chuàng)新應(yīng)用。這種相對小眾的呈現(xiàn)方式,往往與平臺的內(nèi)容屬性高度契合,為特定用戶群體提供沉浸式的瀏覽體驗。這種差異化的設(shè)計策略,展現(xiàn)了產(chǎn)品設(shè)計中對場景化需求的深入思考。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            1.4分層
                在追求差異化體驗的設(shè)計浪潮中,輪播廣告正在突破傳統(tǒng)平面展示的局限。分層視覺設(shè)計以其獨特的空間感和動態(tài)層次,為Banner設(shè)計注入了新的活力。這種創(chuàng)新表現(xiàn)形式包含多層次的視覺構(gòu)建:從基礎(chǔ)的內(nèi)容層疊加視覺,到更具空間感的3D翻轉(zhuǎn)效果,再到前景與背景的智能分離運(yùn)動,每種方式都在重新定義用戶與廣告內(nèi)容的交互方式。
                基于視覺層次的運(yùn)動差異,設(shè)計出引人入勝的視覺敘事,能夠有效的提升用戶參與度以及更具沉浸感和記憶點廣告體驗。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            小結(jié)
                Banner的視覺創(chuàng)新是提升內(nèi)容吸引力的關(guān)鍵驅(qū)動力。
                每一種新的視覺語言都是我們與用戶對話的新方式,是提升信息傳達(dá)效率的重要途徑。在競爭激烈的市場環(huán)境中,差異化的表現(xiàn)形式往往能成為抓住用戶注意力的制勝法寶,這也是為什么我們要不斷突破常規(guī),尋求更具感染力的視覺解決方案。
             
            二、Banner布局樣式
                在確定Banner的視覺表現(xiàn)手法后,就得深入研究其在界面布局中的空間關(guān)系。布局樣式的多樣性源于多個設(shè)計維度的考量:從Banner的寬高比例、尺寸規(guī)格,到其與頁面結(jié)構(gòu)的整合方式(通欄或分欄),再到其與周圍元素的視覺關(guān)系(獨立呈現(xiàn)或背景融合)等。
                就通欄與分欄布局而言,這種結(jié)構(gòu)性選擇直接影響B(tài)anner的視覺占比。雖然直覺告訴我們更大的Banner更具吸引力,但優(yōu)秀的設(shè)計需要平衡信息層級與視覺舒適度。Banner的布局不應(yīng)是孤立的決策,而應(yīng)該與整體界面風(fēng)格和諧統(tǒng)一,既要突出又要融入,在視覺沖擊力和界面協(xié)調(diào)性之間找到最佳平衡點。這種全局性的設(shè)計思維,正是打造優(yōu)質(zhì)用戶體驗的關(guān)鍵點所在。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
                在處理深色系頭部界面時,我們常采用Banner與背景層疊的設(shè)計策略。這種手法通過建立視覺深度,創(chuàng)造出富有層次的空間感。背景色的處理有兩種方式:一是采用固定色值保持統(tǒng)一性,二是根據(jù)輪播圖主色調(diào)動態(tài)調(diào)整,后者能實現(xiàn)更自然的視覺過渡,提升整體設(shè)計的融合度與空間縱深感。
                在Banner比例方面,選擇直接影響高度控制,需要根據(jù)界面內(nèi)容密度靈活調(diào)整。除了基于內(nèi)容需求的自定義方案,許多人會采用數(shù)學(xué)比例系統(tǒng)進(jìn)行規(guī)范化設(shè)計。其中,基于斐波那契數(shù)列推導(dǎo)出的8:5、8:3等比例關(guān)系,因其視覺舒適度而被廣泛采用。在實際應(yīng)用中,我更傾向于選擇能被4整除的數(shù)值,既符合開發(fā)規(guī)范,又能確保在不同設(shè)備上的適配性。
            Banner布局在用戶界面中的設(shè)計樣式研究
             
             
            以經(jīng)驗作為基石,而不是限制,特殊情況特殊對待,就像配合前端工程師調(diào)整設(shè)計圖樣式一樣,靈活運(yùn)用。
             
            三、總結(jié)
                Banner作為頁面中的常見元素,與其說是對布局樣式的探索,不如說是對用戶體驗的深度挖掘。每一次布局創(chuàng)新都是對用戶與頁面互動方式的重新思考。
                一個恰到好處的留白、一次精準(zhǔn)的視覺引導(dǎo)、一個流暢的交互過渡,這些細(xì)微之處都可能成為提升產(chǎn)品體驗的關(guān)鍵。 當(dāng)我們能夠系統(tǒng)性地把控每個設(shè)計細(xì)節(jié),將用戶需求轉(zhuǎn)化為優(yōu)雅的解決方案時,就能做出真正打動人心的頁面設(shè)計。


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

            為什么我沒有這樣的設(shè)計思維呢?

            杰睿

            設(shè)計能力的強(qiáng)弱取決于設(shè)計思維,技能操作層面的不足可以通過反復(fù)訓(xùn)練,在短時間內(nèi)即可彌補(bǔ);而設(shè)計思維需要通過長時間的熏陶,還要找對學(xué)習(xí)的方法和途徑。很多設(shè)計師工作五年甚至十年,但是設(shè)計能力依然比較普通,很大程度上還是設(shè)計思維能力的缺失。
             
            我們也可以通過體驗和分析優(yōu)秀的案例來提升,學(xué)習(xí)優(yōu)秀設(shè)計師的設(shè)計思路和處理技巧,以此來強(qiáng)化自我專業(yè)思維。今天黑馬哥繼續(xù)給大家分享一些優(yōu)秀的設(shè)計案例,希望可以助力提高大家的設(shè)計思維。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            體驗?zāi)夸?/div>
             
            一、不一樣的返回設(shè)計
            二、可以切換大小的設(shè)計布局
            三、做減法的設(shè)計表達(dá)
            四、品牌動態(tài)渲染春節(jié)氛圍
            五、品牌插畫表現(xiàn)界面置底
            六、動態(tài)刷新紅包設(shè)計
            七、涂鴉風(fēng)格的流程設(shè)計
            八、情感化閃屏設(shè)計
            九、圖標(biāo)設(shè)計的翻轉(zhuǎn)動效
            十、蛇年主題圖標(biāo)設(shè)計
             
             
             
            一、不一樣的返回設(shè)計
             
            進(jìn)入層級界面可以通過返回回到上一級操作場景,通常都是以箭頭圖標(biāo)、返回文字組合設(shè)計或者獨立設(shè)計。
             
            最近在體驗喵喵記賬 App 時,其返回設(shè)計以“門”作為創(chuàng)意元素,進(jìn)入層級界面時門會打開,點擊返回時會有關(guān)門的動作。以開關(guān)門的方式表達(dá)進(jìn)入和返回狀態(tài),形象化的表達(dá)了不一樣的返回設(shè)計,呈現(xiàn)出不同的設(shè)計解決方案。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            二、可以切換大小的設(shè)計布局
             
            為了滿足更多用戶的體驗需求,設(shè)計布局的靈活性變得越來越重要,需要提供多種選擇便于操作。
             
            在藏書館 App 中,針對書庫分類的展示設(shè)計,用戶可以通過點擊切換呈現(xiàn)不同大小的樣式。文字和書籍封面圖都會隨著切換而縮放,方便滿足不同用戶的瀏覽需求,提升用戶對產(chǎn)品的操作體驗度。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            三、做減法的設(shè)計表達(dá)
             
            隨著互聯(lián)網(wǎng)環(huán)境的發(fā)展,提供給大家的產(chǎn)品選擇越來越豐富,而產(chǎn)品設(shè)計也從最初的功能性服務(wù)擴(kuò)展到綜合性服務(wù)。功能變得越來越多,商業(yè)氛圍也十分濃厚,有種眼花繚亂的感覺。
             
            最近在使用美團(tuán)外賣柜小程序時,其簡約的設(shè)計印象深刻。存取功能一目了然,沒有多余的設(shè)計干擾體驗,操作指引也是簡單易懂。有時候減法的設(shè)計才是最好的用戶體驗,與其布局一堆功能或者服務(wù),反而增加了用戶的操作成本。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            四、品牌動態(tài)渲染春節(jié)氛圍
             
            春節(jié)氛圍感營造對于品牌來說至關(guān)重要,是渲染春節(jié)主題和增強(qiáng)用戶親和力的關(guān)鍵,營造方式也是豐富多樣。
             
            其中夸克 App 通過品牌 LOGO 結(jié)合春節(jié)主題進(jìn)行動態(tài)設(shè)計,不僅突出春節(jié)氛圍,動效過渡也非常流暢。夸克經(jīng)常會以品牌動態(tài)化的形式表現(xiàn)節(jié)日或者特殊活動主題,設(shè)計融合性處理得十分細(xì)致。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            五、品牌插畫表現(xiàn)界面置底
             
            界面設(shè)計過程中,對于到達(dá)底部的處理方式通常有品牌表達(dá)、公司名稱、版權(quán)信息、情感化內(nèi)容表達(dá)等。
             
            最近在體驗我要做計劃 App 時,界面設(shè)計底部以品牌 IP 形式的插畫進(jìn)行表達(dá),不僅符合整體設(shè)計風(fēng)格,也使得界面設(shè)計更有趣味性。整個產(chǎn)品設(shè)計也以插畫風(fēng)格為主,是一個很有個性化的產(chǎn)品。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            六、動態(tài)刷新紅包設(shè)計
             
            結(jié)合刷新設(shè)計賦予更多功能或者服務(wù),已經(jīng)成為二層樓設(shè)計的首選。
             
            最近在體驗美團(tuán)外賣時,首頁下拉刷新會出現(xiàn)紅包樣式的動效表達(dá),隨著下拉的程度不同,紅包金額會隨之增加或者減少。動態(tài)刷新紅包設(shè)計更能吸引用戶繼續(xù)體驗,進(jìn)而進(jìn)入二層樓參與活動,趣味性的表達(dá)方式很有吸引力,也以此方式促進(jìn)了用戶參與感。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            七、涂鴉風(fēng)格的流程設(shè)計
             
            隨著同質(zhì)化設(shè)計的現(xiàn)象,產(chǎn)品設(shè)計也在不斷嘗試更具差異化的風(fēng)格。結(jié)合插畫風(fēng)格表達(dá)界面設(shè)計,變得越來越普及。
             
            在我要做計劃 App 設(shè)計中,整體風(fēng)格以涂鴉插畫風(fēng)為主,完善做計劃流程設(shè)計也以涂鴉風(fēng)格進(jìn)行設(shè)計。不僅風(fēng)格特征更突出,也能吸引用戶的關(guān)注度,促進(jìn)完善計劃流程。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            八、情感化閃屏設(shè)計
             
            閃屏設(shè)計分為品牌感方向和營銷廣告等方向,其中閃屏廣告較為常見,不過也有品牌啟動頁和閃屏廣告相結(jié)合的方式。
             
            閃屏設(shè)計的形式也非常多樣,其中情感化的方向以 IP 形象和情感故事性插畫為主。比如喜馬拉雅閃屏設(shè)計便以 IP 形象的各種動態(tài)化形式呈現(xiàn),畫面非固定表達(dá)形式,每次重新打開都會有所不同,IP 動態(tài)也非常俏皮可愛。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            九、圖標(biāo)設(shè)計的翻轉(zhuǎn)動效
             
            圖標(biāo)動效的運(yùn)用非常普及,以往見過的案例都是動效的形式表達(dá)圖標(biāo)的不同形式感,但是圖標(biāo)的含義不會受到影響。
             
            最近在體驗盒馬 App 時,首頁金剛區(qū)圖標(biāo)以翻轉(zhuǎn)動效進(jìn)行表達(dá),既突出春節(jié)氛圍也賦予圖標(biāo)兩層含義。在保留圖標(biāo)本身功能含義的同時,通過翻轉(zhuǎn)另一面表達(dá)出不同的意思,也是一個新的圖標(biāo)動效表達(dá)思維。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
             
            十、蛇年主題圖標(biāo)設(shè)計
             
            蛇年春節(jié)主題設(shè)計在產(chǎn)品中的運(yùn)用很豐富,其中在圖標(biāo)設(shè)計中的運(yùn)用是最普遍的,廣泛運(yùn)用于應(yīng)用圖標(biāo)、金剛區(qū)圖標(biāo)、底部標(biāo)簽欄圖標(biāo)和其他功能圖標(biāo)等。
             
            圖標(biāo)設(shè)計的運(yùn)用形式很多,比如蛇年主題文案嵌入、生肖蛇相關(guān)元素設(shè)計、春節(jié)元素設(shè)計等。表現(xiàn)形式以立體質(zhì)感居多,配色以突出春節(jié)氛圍為主。
            為什么我沒有這樣的設(shè)計思維呢?
             
             
             
            小結(jié)
             
            設(shè)計思維除了依靠自身專業(yè)基礎(chǔ)以外,通過不斷學(xué)習(xí)分析優(yōu)秀的案例也能不斷提升,希望本期的案例分享可以帶給大家更多靈感。
             


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

            這些提升用戶體驗的小技巧,你知道嗎?

            杰睿

            為了幫助大家更輕松地提升設(shè)計水平,這里整理了一些簡單實用的小貼士。希望這些小技巧不僅能夠助力您優(yōu)化當(dāng)前的設(shè)計項目,還能在未來的設(shè)計之旅中為您提供參考價值。
             
             
             
            21.將不相關(guān)的字段隱藏
            在設(shè)計表單時,建議不要一次性展示所有信息和步驟,而是在用戶真正需要的時候再呈現(xiàn),這樣可以更好地管理復(fù)雜性。如果用戶一打開表單就看到大量的內(nèi)容,可能會感到壓力很大,甚至?xí)艞壧顚憽?/div>
            因此,我們可以隱藏那些不相關(guān)的信息,去掉不必要的字段。通過合理地簡化表單內(nèi)容,可以減輕用戶的心理負(fù)擔(dān),確保只有在他們需要的時候才顯示必要的信息,從而減少他們在填寫其他表單項時的干擾。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            22.統(tǒng)一風(fēng)格的圖片更有高級感
            在選擇圖片時,我們的目標(biāo)是實用性和一致性,而不是過分追求華麗的效果。如果只是一味地追求美觀,可能會導(dǎo)致圖片風(fēng)格各異,從而破壞整體的視覺統(tǒng)一性,影響用戶的體驗。因此,設(shè)計師在挑選圖片時,需要對風(fēng)格進(jìn)行精確的把控,或者在后期進(jìn)行適當(dāng)?shù)奶幚恚源_保所有圖片都能呈現(xiàn)出一致的視覺效果。
            圖片的風(fēng)格對整個App的整體感覺和用戶的情緒有著重要的影響。風(fēng)格一致的圖片不僅能帶來愉悅的視覺享受,還能激發(fā)美好的聯(lián)想。我們可以從以下幾個方面來控制圖片的風(fēng)格:
            ● 類型:如位圖、插畫或形狀;
            ● 視角:如平視、仰視或俯視;
            ● 背景:如簡約、復(fù)雜或純色;
            ● 呈現(xiàn)區(qū)域:如堆積、局部或特寫;
            ● 構(gòu)圖:如中心、水平線、對稱或?qū)蔷€。
            此外,還有很多其他抽象的方式來調(diào)整圖片,雖然這些方法不是絕對的,但我們可以通過多角度的嘗試,力求讓每一張圖片都達(dá)到最佳的視覺效果。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            23.在中性色中融入色相
            在上一期的內(nèi)容中,我們探討了如何設(shè)置中性色。當(dāng)飽和度(S值)為0時,通過調(diào)整亮度(B值)4到5個等級,可以很好地表達(dá)信息的層次結(jié)構(gòu)。這種方法雖然有助于保證設(shè)計不出錯,并能滿足最基本的需求,但在追求更高層次創(chuàng)意的設(shè)計項目中,可能會顯得有些單一。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
            在更為成熟和全面的產(chǎn)品中,設(shè)計師們往往不會僅僅依靠純灰色作為唯一的中性色調(diào)。通常會在基礎(chǔ)的灰色調(diào)中加入一些微妙的色相變化。這樣做不僅可以讓整體視覺效果更加豐富,而且還能有效避免畫面因過于依賴灰色而顯得僵硬或缺乏活力。
            常用的方法是在中性色中融入少量藍(lán)色調(diào)。藍(lán)色能夠傳遞出一種平靜、穩(wěn)重的感覺,給界面帶來柔和而不突兀的變化,同時保持良好的清晰度。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
            需要注意的是,在加入新色相時,我們的目標(biāo)是創(chuàng)造顏色間的細(xì)微差別,幾乎達(dá)到難以察覺的程度,而不是讓這些差異成為用戶注意力的焦點,這樣才更有利于提升界面的整體質(zhì)感。因此,對于較淺的顏色來說,所添加的色相強(qiáng)度應(yīng)當(dāng)控制得很低,反之,顏色越深則添加的色相越多,類似下面的這種曲線:
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            24.第三方圖標(biāo)風(fēng)格應(yīng)保持一致
            大多數(shù)應(yīng)用程序都支持通過第三方平臺登錄,這種方式可以顯著降低用戶在登錄注冊時所需花費(fèi)的時間成本。這種便捷的登錄方式一般在登錄頁面的底部提供多個(如微信、QQ、微博等)圖標(biāo)入口。然而,很多設(shè)計師會忽略一個細(xì)節(jié),就是直接將第三方平臺提供的官方圖標(biāo),簡單地調(diào)整大小使之統(tǒng)一,然后整齊排列在一起,并沒有進(jìn)一步針對整體視覺效果進(jìn)行專門的設(shè)計優(yōu)化。
            對于追求高品質(zhì)用戶體驗的產(chǎn)品來說,任何不起眼的小細(xì)節(jié)都不應(yīng)該被忽略。在處理第三方圖標(biāo)時,應(yīng)以自己產(chǎn)品的圖標(biāo)風(fēng)格為基礎(chǔ),對所使用的第三方登錄圖標(biāo)進(jìn)行重新設(shè)計或適當(dāng)調(diào)整。這不僅能夠確保整個界面風(fēng)格的一致性,提升美觀度,還能增強(qiáng)品牌識別度,讓用戶在整個使用過程中感受到更加連貫且專業(yè)的體驗。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            25.可視化密碼比輸入兩次更直觀
            為了提升您的使用體驗,并確保密碼的安全性,可以讓用戶在輸入密碼時自由選擇顯示或隱藏密碼內(nèi)容。這種方式替代了傳統(tǒng)的雙次輸入驗證方式,尤其有助于創(chuàng)建有效的密碼。用戶可以直接看到自己設(shè)置的密碼是否滿足安全標(biāo)準(zhǔn),同時也減少了因重復(fù)輸入而造成的錯誤。
            另外,系統(tǒng)應(yīng)當(dāng)明確地展示密碼的具體要求,并為用戶提供即時反饋,幫助他們了解如何構(gòu)建更安全的密碼。例如,在用戶開始輸入密碼時,界面下方可以實時更新密碼強(qiáng)度(如弱、中等、強(qiáng))及已滿足的安全條件(比如長度、包含數(shù)字/符號/大小寫字母等)。這樣做不僅能讓用戶更好地理解什么是好的密碼實踐,還能激勵他們遵循這些建議,從而提高賬號的整體安全性。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            26.使用合適的表單錄入控件
            在設(shè)計表單時,選擇合適的輸入控件可以幫助用戶更好地理解每個字段需要填寫的信息量。
            •  
              能通過選擇來完成的操作就不要讓用戶手動輸入,這樣不僅方便了用戶操作,也減少了錯誤的發(fā)生。
            •  
              對于那些內(nèi)容較短的輸入項,比如姓名或電話號碼,可使用單行輸入框,前提是確保讓所有輸入的內(nèi)容都能清晰可見。
            •  
              像評論、反饋或這種可能包含較多文字的地方,應(yīng)使用多行文本框。這樣用戶能更輕松地查看和編輯文本內(nèi)容。同時,我們還可以通過一些視覺提示,例如滾動瀏覽、輸入框右下角的高度調(diào)整等,這樣更便于用戶操作。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            27.提供解決方案助力轉(zhuǎn)化
            在UI設(shè)計過程中,當(dāng)用戶嘗試進(jìn)行某項操作時,因未滿足特定條件或出現(xiàn)操作失誤而無法繼續(xù),這可能會對轉(zhuǎn)化率產(chǎn)生負(fù)面影響。為了改善這種情況,在設(shè)計時可以采取更加貼心的做法:明確告知用戶為何無法進(jìn)入下一步,并提供具體的解決建議。這樣做對于提升轉(zhuǎn)化率非常有幫助。
            比如,在用戶打算用賬戶余額購買服務(wù)的情況下,如果僅僅提示“余額不足”,用戶可能會感到困惑,甚至需要多次嘗試不同的路徑來完成充值和購買過程。一個更佳的解決方案是直接向用戶展示當(dāng)前賬戶余額,并提供快速充值鏈接。這樣一來,用戶可以直接通過這個鏈接輕松完成充值,隨后順利購買所需服務(wù)。這樣的設(shè)計不僅簡化了操作流程,也大大提升了用戶體驗的流暢度。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            28.標(biāo)簽欄的高級感
            大多數(shù)標(biāo)簽欄設(shè)計都傾向于簡潔風(fēng)格,主要通過選中和未選中的狀態(tài)來區(qū)分不同的選項。狀態(tài)的變化依靠文字顏色的變換或在選中的標(biāo)簽下方添加一個小橫條來實現(xiàn)。盡管這樣的設(shè)計看起來簡單,但要想讓它脫穎而出卻并不容易。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
            很多產(chǎn)品從其品牌的獨特性中汲取靈感,利用品牌作為用戶熟悉且喜愛的形象作為設(shè)計的基礎(chǔ),這樣做不僅能夠建立一種視覺上的連貫性,讓用戶感受到內(nèi)外一致的美好體驗,同時也能加深他們對品牌形象的記憶。除此之外,加入一些有趣味性的圖案也是一個不錯的選擇,它們能以獨特的方式吸引用戶的注意力,為用戶提供更加愉悅的視覺感受。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            29.合理的規(guī)范輸入格式
            在表單設(shè)計過程中,雖然大多數(shù)輸入項可以采用通用的處理方式,無需特別干預(yù),但一些特殊類型的表單項,設(shè)定合理的格式約束顯得尤為重要。這樣做不僅有助于系統(tǒng)更準(zhǔn)確地收集數(shù)據(jù),還能有效減少用戶填寫錯誤的可能性,提升整體數(shù)據(jù)質(zhì)量。
            對于某些特定信息如地址、手機(jī)號碼以及銀行卡號等,可通過技術(shù)手段自動為這些長串文字自動添加分隔符,如空格或短橫線,這樣做能夠使信息更加直觀易讀,便于用戶檢查自己所填內(nèi)容是否正確無誤;同時,也使得后續(xù)的數(shù)據(jù)處理工作變得更加簡單高效。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            30.頁面加載中,提前展示布局
            在眾多產(chǎn)品中,用戶界面的數(shù)據(jù)或內(nèi)容在完全加載之前通常僅顯示空白頁面。這種處理方式可能導(dǎo)致用戶困惑,因為他們無法確定當(dāng)前狀態(tài)是正在加載、已加載完畢但無內(nèi)容可展示,還是遇到了錯誤。
            實際上,用戶界面的布局往往是相對固定的。因此,在實際內(nèi)容加載完成前,提前向用戶展示界面的基本結(jié)構(gòu)是一種更為友好的設(shè)計策略。因為在等待數(shù)據(jù)加載的過程中,用戶能夠預(yù)覽即將呈現(xiàn)的內(nèi)容框架,從而減少了不確定性帶來的焦慮感。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
            此外,這一做法符合人機(jī)交互設(shè)計中的一個重要原則——系統(tǒng)狀態(tài)可見性。根據(jù)該原則,產(chǎn)品應(yīng)當(dāng)清晰地告知用戶當(dāng)前發(fā)生了什么,并提供足夠的反饋信息以幫助其理解系統(tǒng)的現(xiàn)狀及后續(xù)步驟。通過預(yù)先展示UI布局,應(yīng)用程序不僅表明了正在處理請求的狀態(tài),還為用戶構(gòu)建了一個對未來操作環(huán)境的心理預(yù)期模型,進(jìn)而提升了用戶體驗的整體滿意度與效率。
             
             
            31.表單頁內(nèi)容過長,適當(dāng)進(jìn)行分頁
            在對表單內(nèi)容進(jìn)行了精簡處理后,依然顯得很長,應(yīng)該避免一次性向用戶展示所有信息。過長的表單不僅會增加用戶的填寫時間,還可能引發(fā)用戶的困惑與不滿情緒,最終導(dǎo)致放棄填寫。為此,建議根據(jù)邏輯關(guān)系及屬性將表單項合理地分配到多個頁面中,且清晰展示整個流程進(jìn)度情況。這樣可以使用戶感受到填寫過程更加簡便流暢,同時也能幫助他們更好地理解整個表單結(jié)構(gòu),從而專注于當(dāng)前的任務(wù)。
            值得注意的是,在采用分頁策略時,需謹(jǐn)慎平衡分頁的數(shù)量與步驟的復(fù)雜度。過度細(xì)分會無謂地增加操作環(huán)節(jié),反而可能引起用戶的反感,進(jìn)而產(chǎn)生新的問題。因此,在規(guī)劃分頁方案時,應(yīng)當(dāng)綜合考慮簡潔性和易用性原則,確保最終方案既能有效簡化任務(wù)又能保持良好的用戶體驗。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            32.有時候,背景色比分割線更顯高級感
            在過去,設(shè)計師們常常使用線條來清晰地劃分不同組件之間的界限。然而,在當(dāng)今流行的扁平化設(shè)計理念中,這樣的做法有時會讓頁面顯得有些擁擠,并且缺乏層次感。一個非常有效的替代方案是為相鄰元素選擇僅有細(xì)微差異的背景色來進(jìn)行區(qū)分。這種方式不僅能保持界面的整體美觀與簡潔,還能夠讓用戶更加自然流暢地識別出不同的信息區(qū)域。這樣在確保了內(nèi)容的可讀性和易用性的同時,也能為用戶提供更加舒適的視覺體驗。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            33.適當(dāng)加大觸控?zé)釁^(qū)
            你是否有過這樣的體驗:在使用某個應(yīng)用程序或網(wǎng)站時,對著界面上的按鈕一頓亂點,卻發(fā)現(xiàn)要么完全沒有反應(yīng),要么系統(tǒng)反饋特別慢。你可能會懷疑是手機(jī)卡頓了或者網(wǎng)絡(luò)連接不穩(wěn)定,感覺非常糟糕。其實,很多時候這種情況并不是因為設(shè)備性能差或網(wǎng)絡(luò)問題,而是用戶界面設(shè)計上存在一些小缺陷。
            設(shè)計師們都知道,在進(jìn)行UI設(shè)計時面臨著一個挑戰(zhàn):如何在美觀性和實用性之間找到最佳平衡點?特別是對于像按鈕、超鏈接以及單選/復(fù)選框這樣的交互元素來說,它們的實際顯示大小往往很難達(dá)到人類手指接觸區(qū)域的理想尺寸。如果這些控件設(shè)計得太小,用戶就很難準(zhǔn)確點擊到目標(biāo)位置,導(dǎo)致操作效率降低甚至失敗。
            從視覺效果考慮,當(dāng)某些功能性組件需要保持較小外觀時,我們可以確保可觸發(fā)區(qū)域足夠大。這樣即使用戶視線不那么集中,也能輕松完成任務(wù),避免因誤觸或其他原因造成的不便。值得注意的是,無論該元素本身看起來有多小,它所關(guān)聯(lián)的觸控?zé)釁^(qū)都不應(yīng)低于標(biāo)準(zhǔn)值。例如,在iOS平臺上,推薦的最小可點擊區(qū)域大小為44x44 pt;而Android操作系統(tǒng)中,則建議至少保持48x48 pt。這樣保持了界面的美觀性,還能大大提升用戶的操作體驗。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            34.為圖片添加色彩層營造氛圍感
            在圖片上添加色彩層或?qū)⑵滢D(zhuǎn)換為單一色調(diào),可以創(chuàng)造出類似黑白照片的效果,這樣能顯著增強(qiáng)圖像中物體或人物的形態(tài)感。通過簡化色彩,觀眾的注意力更容易集中在圖像的核心內(nèi)容上,從而提升了視覺主體的表現(xiàn)力。
            此外,選擇不同的單色調(diào)不僅能突出主題,還能有效營造特定的情感氛圍。比如,藍(lán)色調(diào)可能會給人帶來一種寧靜、平和的感覺;而暖色調(diào)如紅色或橙色,則可能激發(fā)溫暖、活力甚至是緊張的情緒。通過精心挑選和運(yùn)用色彩,我們可以極大地豐富視覺語言,提高圖像傳遞信息的能力。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            35.使用前端驗證,提升信息的有效性
            前端驗證是一種在用戶輸入信息時即時檢查數(shù)據(jù)有效性的方法,無需將數(shù)據(jù)發(fā)送到服務(wù)器。這項技術(shù)基于預(yù)先設(shè)定的規(guī)則,在用戶離開輸入框時自動啟動,能夠快速檢測諸如格式、長度或類型是否正確等問題。這樣做的好處在于,它能夠在用戶完成整個表單之前就發(fā)現(xiàn)并指出潛在錯誤,從而提升了用戶體驗和數(shù)據(jù)準(zhǔn)確性,避免了等到最后提交才發(fā)現(xiàn)問題所帶來的不便。
            在設(shè)置前端驗證時,請記得不要過早開始校驗過程,以免造成持續(xù)不斷的錯誤提示,給用戶帶來困擾。最佳實踐是在用戶完全填寫完當(dāng)前項之后再進(jìn)行驗證。這樣做既能保證及時給出反饋,又能避免因頻繁出現(xiàn)提示而打斷用戶的操作流程,讓整個體驗更加順暢愉快。
            02期 | 這些提升用戶體驗的小技巧,你知道嗎?
             
             
             
             
            結(jié)語
            創(chuàng)造既美觀又高效且易于使用的UI界面確實需要投入不少時間和精力,還可能要經(jīng)歷多次的迭代與改進(jìn)。不過,正是通過這一系列細(xì)致入微的調(diào)整過程,我們才能打磨出一款讓客戶、用戶以及我們自己都感到滿意的優(yōu)秀作品。



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

             

             

             

            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格

            杰睿

             
             
            一、什么是視覺風(fēng)格?
            在理解“視覺風(fēng)格”這個詞之前,我們先把它拆開來看,先嘗試?yán)斫庀率裁词?ldquo;風(fēng)格”。
            "風(fēng)格" ,是一個相對抽象的概念,指的是一種在作品或創(chuàng)作中表現(xiàn)出來的獨特方式或特征。
            相較與“視覺風(fēng)格“,它通常是一個更廣泛的概念,可以應(yīng)用于多個領(lǐng)域,包括藝術(shù)、設(shè)計、文學(xué)、音樂等,具體體現(xiàn)在內(nèi)容、形式、技巧、表現(xiàn)等方式上。
            "視覺風(fēng)格" 是風(fēng)格的一個具體領(lǐng)域,通常用在藝術(shù)、設(shè)計和多媒體上,比如我們常說的插畫風(fēng)、攝影風(fēng)、平面風(fēng)、網(wǎng)頁風(fēng)、OS 系統(tǒng)風(fēng)格等。
            視覺風(fēng)格強(qiáng)調(diào)了視覺元素和視覺方面的獨特性,如顏色、構(gòu)圖、圖案、排版、字體、動畫等。通過這些視覺要素,創(chuàng)造出一種獨特的視覺外觀,帶給用戶情感上的感受。
            一個成熟的視覺風(fēng)格,往往會給人帶來一種特定的感覺,并與特定的產(chǎn)品產(chǎn)生關(guān)聯(lián),形成心理印記,從而因為風(fēng)格而記住它,所以視覺風(fēng)格在產(chǎn)品設(shè)計中重要性不言而喻。
            我們把話題再聚焦一點,今天主要聊聊互聯(lián)網(wǎng)產(chǎn)品的視覺風(fēng)格。
             
            二、如何拆解視覺風(fēng)格?
            當(dāng)我們體驗到一個產(chǎn)品或者看到一張圖后,從哪些角度去拆解出它的風(fēng)格特征呢?
            一般可以從作品中的色彩、排版、質(zhì)感、字體、動畫、圖案、構(gòu)圖等等設(shè)計要素進(jìn)行分析,看看這些視覺元素組合關(guān)系和比重。
            講到這里,在我們視覺設(shè)計領(lǐng)域的最新趨勢下,通常用六個字 ”形、色、字、構(gòu)、質(zhì)、動“ 來制定視覺風(fēng)格帶給人的感受。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            其實我在看作品集的時候,一般也是從這些角度去分析作品的專業(yè)度,然后再結(jié)合業(yè)務(wù)場景,看做的視覺方案能否有效解決業(yè)務(wù)問題。
            另外,平時提到的審美練習(xí),講究一個多看多分析,去思考設(shè)計背后的原理,組合方式。多去研究美的東西的特點,看細(xì)一些,也可以嘗試從以上這些角度去拆解一套視覺設(shè)計。
            對視覺風(fēng)格有了理解,平時也知道從哪些角度去看一張圖了,那么接下來就需要多去了解一些比較常見的視覺
            設(shè)計風(fēng)格
            ,了解具體的表現(xiàn)手法。
             
            三、常見的視覺風(fēng)格有哪些?
            當(dāng)把視覺風(fēng)格聚焦到 APP 和網(wǎng)頁設(shè)計等互聯(lián)網(wǎng)產(chǎn)品時,風(fēng)格其實也有很多,說一些比較常見的。
            1. 蘋果風(fēng)(Apple Design)
            以毛玻璃材質(zhì)為特點,絲滑的動態(tài)效果,輕擬物的質(zhì)感。蘋果的設(shè)計強(qiáng)調(diào)平滑的曲線和圓潤的邊緣,常常使用明亮的顏色,注重圖像和照片的質(zhì)量。
             
             
             
            iOS 17 風(fēng)格
            iOS 17 風(fēng)格
             
             
            mac os
            mac os
             
             
            iPad os
            iPad os
             
             
            iwatch os
            iwatch os
             
             
            2. 扁平化設(shè)計(Flat Design)
            扁平設(shè)計是一種簡化的設(shè)計風(fēng)格,通常會用明亮的顏色、清晰的圖標(biāo)和簡化的界面元素。我印象中有一小段時間,這個風(fēng)格很流行,微軟是最早將這種設(shè)計風(fēng)格應(yīng)用于其界面的公司之一。
             
            win8風(fēng)格
            win8風(fēng)格
             
             
            平面設(shè)計
            中,所有元素都應(yīng)該有它存在的價值,哪怕裝飾元素也是如此。如果某個方面沒有任何功能用途,就會分散用戶的注意力。這就是扁平化設(shè)計簡約本質(zhì)的原因。
            然而,僅僅因為它缺乏任何華麗的設(shè)計并不意味著這種風(fēng)格很無聊。明亮、對比鮮明的顏色能輕松吸引注意力并引導(dǎo)用戶的視線。
            有些設(shè)計師可能會覺得這種風(fēng)格過于樸素,就給它增加了一些其他細(xì)節(jié),比如長投影就是那個時期出來的。
             
            來源:aiki007
            來源:aiki007
             
             
            當(dāng)然上面這套長投影,年代比較久遠(yuǎn)了一點,下面這套作品的扁平風(fēng)格上就更現(xiàn)代一些。
             
            來源:Mike | Creative Mints
            來源:Mike | Creative Mints
             
             
             
            3. 材質(zhì)設(shè)計(Material Design)
            材質(zhì)設(shè)計是由 Google 推出的一種設(shè)計風(fēng)格,強(qiáng)調(diào)實際材質(zhì)和動畫效果。它為應(yīng)用帶來層次感和現(xiàn)實感,同時提供了良好的用戶體驗。完整的設(shè)計組件,可以參考官方地址:
            https://m3.material.io
            在這套風(fēng)格中,能看出來也是趨向于扁平化的,顏色在使用上飽和度也沒有很高,質(zhì)感也很克制,讓用戶更聚焦在內(nèi)容上。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            4. 抽象藝術(shù)風(fēng)格(Abstract and Artistic Styles)
            這種風(fēng)格常用在海報設(shè)計中,以吸引特定用戶或傳達(dá)創(chuàng)新的形象。這些風(fēng)格可能包括不尋常的圖形、顏色和排版。
            這個風(fēng)格我印象最深的就是 Behance 上的一個老哥做的 365 天挑戰(zhàn),每天一張腦洞海報,幾乎每一張都是精品。如果沒看過的也可以去圍觀下,我把地址也放上,ins 上還在更新。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            5. 極簡主義(Minimalism)
            極簡主義設(shè)計注重簡潔和內(nèi)容集中,通常使用簡化的元素和無冗余的界面。它適用于需要用戶專注于核心任務(wù)的應(yīng)用。
            這種設(shè)計通常會用到大面積的留白,以及黑白灰的顏色搭配,高質(zhì)量的大圖,使得整個設(shè)計具備很強(qiáng)的高級感。
            這個風(fēng)格我以前也有專門寫過文章《Behance 首頁推薦的作品集為什么這么高級?我們能從中學(xué)到什么?》。
             
            來源:Shaban Iddrisu™
            來源:Shaban Iddrisu™
             
             
            來源: https://www.awwwards.com/sites/brainbox-ai
            來源: https://www.awwwards.com/sites/brainbox-ai
             
             
            來源:Huy Phan
            來源:Huy Phan
             
             
            來源:Hannes Ahremark
            來源:Hannes Ahremark
             
             
            6. 新擬物主義(neumorphism)
            這種設(shè)計風(fēng)格,通過使用逼真的陰影和光線效果來模擬物理世界中的物體,同時保持扁平化和簡約的設(shè)計。
            這種風(fēng)格曾經(jīng)內(nèi)風(fēng)靡了一陣子,現(xiàn)在好像又見得比較少了。
            我其實對這種風(fēng)格不是太感冒,原因是這種質(zhì)感似乎顯得有些多余,還會占用一部分內(nèi)容空間,信息利用率不高。它的設(shè)計樣式也做的比較搶內(nèi)容,美觀度上我個人也不是太喜歡。
            關(guān)于這種風(fēng)格設(shè)計,之前也寫過文章《新擬物化會是 2020 年的 UI 設(shè)計趨勢嗎?》
             
            來源:Devanta Ebison
            來源:Devanta Ebison
             
             
            來源:Ceptari Tyas
            來源:Ceptari Tyas
             
             
            來源:Sèrgi Mi
            來源:Sèrgi Mi
             
             
            來源:Filip Legierski
            來源:Filip Legierski
             
             
            來源:https://www.interaction-design.org
            來源:https://www.interaction-design.org
             
             
            之前 QQ 的小世界第一版出來的時候也用到了這個風(fēng)格趨勢,給人眼前一亮的感覺。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            即使是新擬物風(fēng)格,其中也是可以做一些不同發(fā)揮的,這里也可以一起看下他們當(dāng)時做的方案對比,體會下不同風(fēng)格的側(cè)重點
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            7. 科技和未來主義(Tech and Futuristic Styles)
            科技和未來主義設(shè)計風(fēng)格使用高科技元素、光效和動態(tài)效果,以突出創(chuàng)新和前瞻性。這種風(fēng)格在科技、游戲和科幻類應(yīng)用中常見。
            比如現(xiàn)在的 HMI,HUD,數(shù)據(jù)可視化設(shè)計,風(fēng)格都被設(shè)計的有很強(qiáng)的科技感,會用到很多偏科技感的光效,藍(lán)色,以深色居多。
             
            來源:Logan Gan
            來源:Logan Gan
             
             
            來源:Romanov
            來源:Romanov
             
             
            來源:Stefan Grimm
            來源:Stefan Grimm
             
             
            來源:Stanislav Hristov
            來源:Stanislav Hristov
             
             
            來源:Breaking bad
            來源:Breaking bad
             
             
            8. 插畫風(fēng)格(Illustration style)
            這種風(fēng)格通常會用到大面積的插畫設(shè)計,有比較強(qiáng)的親和力。
            既然用到了插畫,在顏色的使用上相對會更大膽一些,顏色飽和度比較高。
            這種風(fēng)格在網(wǎng)頁設(shè)計,天氣設(shè)計,手機(jī)壁紙,冥想類應(yīng)用中很常見,我自己也曾經(jīng)設(shè)計過這種插畫風(fēng)格的壁紙和天氣。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            我之前畫的幾張壁紙
             
            來源:Mike | Creative Mints
            來源:Mike | Creative Mints
             
             
            來源:Mike | Creative Mints
            來源:Mike | Creative Mints
             
             
            來源:Bogdan Falin
            來源:Bogdan Falin
             
             
            來源:Moatasem Abbas Kharraz
            來源:Moatasem Abbas Kharraz
             
             
            來源:Zak Steele-Eklund
            來源:Zak Steele-Eklund
             
             
             
            9. 2D+3D
            這種風(fēng)格是一種 2D 結(jié)合 3D 的形式,現(xiàn)如今在做風(fēng)格化設(shè)計的時候特別搶眼。
            核心設(shè)計方法就是把一些內(nèi)容用 2D 的形式去展現(xiàn),把一些需要強(qiáng)調(diào)的圖片,例如商品,模型做成 3D 來表現(xiàn)。
            在未來隨著 vision pro 的發(fā)布,空間計算的不斷成熟,相信這種設(shè)計風(fēng)格趨勢會越來越多。
             
            來源:Cosmin Capitanu
            來源:Cosmin Capitanu
             
             
             
             
            來源:Cosmin Capitanu
            來源:Cosmin Capitanu
             
             
            來源:Mike | Creative Mints
            來源:Mike | Creative Mints
             
             
            來源:Mike | Creative Mints
            來源:Mike | Creative Mints
             
             
            來源:Lay
            來源:Lay
             
             
            10. 自然和有機(jī)風(fēng)格(Natural and Organic Styles)
            自然和有機(jī)的設(shè)計風(fēng)格使用大自然的元素、有機(jī)形狀和自然紋理,以傳達(dá)溫暖和人性化的感覺。
            這種風(fēng)格適用于健康、環(huán)保和戶外應(yīng)用。
             
            來源:Oyolloo
            來源:Oyolloo
             
            大家在一些包裝樣機(jī)中,經(jīng)常會看到一些帶樹葉投影的風(fēng)格,這種投影給人一種現(xiàn)實生活的感覺,自然溫暖。
             
            來源:beehouse studio
            來源:beehouse studio
             
             
             
            11. 草圖和手繪風(fēng)格(Sketch and Hand-Drawn Styles)
            草圖和手繪的設(shè)計風(fēng)格比較強(qiáng)調(diào)創(chuàng)意、親近感和個性化。這種風(fēng)格在博客、藝術(shù)和小眾應(yīng)用中流行。
            其風(fēng)格特點容易看出來,帶有卡通式的描邊和硬投影,顏色使用上飽和度比較高
             
            來源:ZhaoWei
            來源:ZhaoWei
             
             
            來源:Joseph Ash Sakula
            來源:Joseph Ash Sakula
             
             
            來源:Sajon
            來源:Sajon
             
            來源:creativemarket
            來源:creativemarket
             
             
            在 dribbble 上有一位設(shè)計師叫:Sulton handaya,特別擅長這類風(fēng)格,在他的主頁有非常多這種風(fēng)格的作品,通過把一類風(fēng)格做到頂尖,給人留下深刻印象,建立了屬于自己的風(fēng)格標(biāo)簽。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            12. 品牌自定義風(fēng)格( Brand Custom Styles)
            現(xiàn)在很多應(yīng)用選擇采用自由品牌的設(shè)計風(fēng)格,以突出其獨特性和品牌標(biāo)識。
            這個風(fēng)格方向,其實也是現(xiàn)在主流的設(shè)計方式,依據(jù)公司產(chǎn)品調(diào)性和品牌特征,提取品牌超級符號,包括顏色、造型、動效、排版等等進(jìn)行延展,保證其品牌風(fēng)格的獨特性,具備很強(qiáng)的識別度和記憶點。
            這里也放 2 個比較經(jīng)典的例子。
            一個是 kakao,我經(jīng)常講這個例子,這個案例就是從項目的目標(biāo)開始,以滿足用戶的個性化閱讀需求。
            作為一個提供閱讀的平臺,他們找到了一個以“紙”為錨點的超級符號,并以此延展到圖標(biāo)、動效、造型、色彩、插圖等等視覺細(xì)節(jié)上。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
            另一個案例是航空公司的風(fēng)格設(shè)計案例,作品巧妙的找到飛機(jī)窗戶的造型作為符號,像我這樣經(jīng)常坐飛機(jī)的人,看到這樣的橢圓形很自然的就和飛機(jī)聯(lián)系上了。這種鏈接關(guān)系很自然,可以給用戶留下深刻印象。
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
             
             
             
            用一篇文章,帶你完整了解近年來流行的視覺風(fēng)格
             
            結(jié)語
            視覺風(fēng)格是一系列設(shè)計準(zhǔn)則和規(guī)范,用于確保用戶界面的各個方面都與品牌或項目的整體風(fēng)格和形象保持一致。
            這有助于用戶識別和記憶界面,提高用戶體驗,同時也增強(qiáng)了品牌的識別度和專業(yè)性。
            設(shè)計風(fēng)格是一個輪回,所以設(shè)計趨勢我們需要去關(guān)注,但不可以盲目選用,還需要結(jié)合我們自身產(chǎn)品想要傳達(dá)的理念,滿足用戶的訴求。
             



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

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

            高級設(shè)計師才會的設(shè)計思維,31個細(xì)節(jié)幫你深入了解!

            杰睿

            1. 并不存在單一的設(shè)計過程

             

            設(shè)計過程被描述為多個階段,每個階段都包含不同的活動來完成該階段,它沒有統(tǒng)一的標(biāo)準(zhǔn)流程,每個公司和設(shè)計師都有自己的流程版本。

            盡管存在多個流程,但一般流程和階段類似于以下內(nèi)容:

            了解問題:初步了解問題。觀察、采訪和傾聽用戶。

            定義問題:解釋和定義要解決的問題。

            構(gòu)思:通過頭腦風(fēng)暴產(chǎn)生盡可能多的想法。

            原型設(shè)計:構(gòu)建原型并與其他人分享( 再次縮小解決方案空間,為實驗階段 )。

            測試:測試可能的解決方案、實施、改進(jìn)或重新設(shè)計。

             

            2. 設(shè)計思維是傳統(tǒng)解法和創(chuàng)造性設(shè)計過程的結(jié)合

             

            傳統(tǒng)的問題解決采取有條不紊而又科學(xué)的形式。該過程從一個問題開始,定義要采取的步驟以及達(dá)到解決方案的工具或方法。

            設(shè)計思維是一種創(chuàng)造性的策略,可以產(chǎn)生創(chuàng)造性的未來結(jié)果和/或創(chuàng)造性的問題解決方式,它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。

            它通常被描述為一種創(chuàng)造性、主觀和感性的對許多大型組織的分析邏輯( 布朗,2008 年 ),或作為分析和創(chuàng)造性推理模式的組合( 鄧恩 & 馬丁,2006 年;利特卡,2015 年 )。

             

            3. 設(shè)計思維是問題解法的進(jìn)階

             

            設(shè)計思維來源于常規(guī)問題解決方法,常規(guī)問題解法是設(shè)計思維的基礎(chǔ)。

             

            從解決問題到設(shè)計思維,Liedtka (2013)

            結(jié)果發(fā)現(xiàn),設(shè)計思維實際上也是一個解決問題的過程,而不僅僅是一個創(chuàng)新過程( 利特卡,2013)

            一個例子是,豐田采用設(shè)計思維從頭開始分析其西海岸的一個客戶聯(lián)絡(luò)中心,在重新設(shè)計過程中,組建了一個由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊,這一舉動最終改變了客戶和員工的服務(wù)中心體驗。

             

            4. 從起床到入睡,你都在解決問題

             

            我們每天都會遇到問題,但是當(dāng)我們解決同樣的問題時,它們就成了例行公事( 似乎已經(jīng)忘記它們是問題了 ),我們甚至都沒有意識到正在解決這些問題。例如,我的辦公室在 30 分鐘路程之外,該怎么到達(dá)那里?開車、坐火車或巴士到目的地;除非車子輪胎被刺破,否則你就需要弄清楚如何到達(dá)辦公室。

             

            5. “設(shè)計思維”術(shù)語的產(chǎn)生

             

            1990 年代,IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語:“設(shè)計思維”,并將多年來醞釀的方法和想法封裝成一個統(tǒng)一的概念。

             

            6. 工程設(shè)計思維現(xiàn)在被稱為設(shè)計思維

             

            設(shè)計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式,而工程師處理和解決問題的方式有其設(shè)計思維的基礎(chǔ)。

             

            7. 設(shè)計思維的歷史早已出現(xiàn)(2000 年)

             

            設(shè)計思維一詞可以追溯到 1987 年 Peter Rowe 的著作:“設(shè)計思維。” 他描述工程師和建筑師處理問題的方法有很大不同。

            90 年代初,認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊,擔(dān)任他們的用戶體驗架構(gòu)師,這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設(shè)計”這個術(shù)語,因為他想“涵蓋人們對系統(tǒng)體驗的所有方面,包括工業(yè)設(shè)計、圖形、界面、物理交互和手冊。” 從那時起,這些領(lǐng)域中的每一個都將用戶體驗,擴(kuò)展到了自己的專業(yè)領(lǐng)域。

             

            8. “棘手的”設(shè)計思維

             

            設(shè)計思維在解決“棘手問題”時特別有用。

             

            棘手問題的特征

            “棘手問題”一詞是由設(shè)計理論家 Horst Rittel 在 1972 年創(chuàng)造的,用來描述本質(zhì)上非常模糊 \ 特別棘手的問題。棘手問題,有很多未知因素,沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關(guān),因此這是一個需要設(shè)計思維的持續(xù)過程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問題。

             

            9. 設(shè)計思維不僅限于數(shù)字化設(shè)計的應(yīng)用

             

            設(shè)計主題的范圍是普遍的,因為 設(shè)計思維可以應(yīng)用于人類經(jīng)驗的任何領(lǐng)域。

             

            它可以用于:

            符號和視覺傳達(dá):這包括平面設(shè)計的傳統(tǒng)工作,如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計算機(jī)顯示。

            材料:這包括對日常用品的形式和視覺外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。

            人類活動和組織性服務(wù):包括對物流的傳統(tǒng)管理關(guān)注,結(jié)合物質(zhì)資源、工具和人類低效的序列和時間表,以達(dá)到特定的目標(biāo)。

            復(fù)雜的系統(tǒng)或環(huán)境:生活、工作、娛樂和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點,或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。

            10. 設(shè)計思維不僅限于設(shè)計師的實踐

             

            設(shè)計思維起源于設(shè)計師的培訓(xùn)和專業(yè)實踐,但這些原則可以被每個人實踐并擴(kuò)展到每個活動領(lǐng)域。(布朗,2013 年)

            在企業(yè)中,設(shè)計過程可以為企業(yè)環(huán)境中的問題解決帶來創(chuàng)新思維。它還可以用于醫(yī)療保健,通過向護(hù)士、醫(yī)生和管理人員教授設(shè)計思維技術(shù),我們可以激勵相關(guān)從業(yè)者貢獻(xiàn)新的想法。

             

            11. 了解問題是第一

             

            不管是什么設(shè)計,理解和研究問題是必不可少的,因為我們能夠從其出發(fā),從而進(jìn)行以用戶為中心的設(shè)計。

             

            設(shè)計思維的最早階段是搞懂你能帶來的情感價值。設(shè)計思維方法迫使你停留在提問與質(zhì)疑階段,而不是準(zhǔn)確定義出問題后進(jìn)入下一階段。我們都有過快進(jìn)入解決方案模式的傾向,所以設(shè)計思維方法迫使你真實地存在于這個不清楚、有時還非常混亂的時刻,從而使你對要解決的問題產(chǎn)生更好的理解。(利特克,2013)

             

            12. 設(shè)計思維需要兩種不同的思維

             

            傳統(tǒng)的問題解決涉及提出一個解決方案,但設(shè)計思維首先使我們發(fā)散,試圖為問題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維,縮小多種可能性,找到單一的最佳解決方案。

             

            13. 設(shè)計思維是可以傳授和學(xué)習(xí)的,它不是一種人格特質(zhì)

            根據(jù)利特卡和奧美 (2011) 的說法,設(shè)計思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問題的方法。正如我們思考創(chuàng)造力一樣,即使是設(shè)計思維也可以通過實踐來教授和改進(jìn)。

             

            14. 設(shè)計過程不是線性的

             

            設(shè)計過程從來都不是線性的,它由多次失敗和迭代組成(布朗,2018)。

            首先,設(shè)計師試圖將問題與過去的類似案例聯(lián)系起來。如果這種方法不能提供任何解決方案,下一步就是使用知識和創(chuàng)造力作為一種實驗思維形式來產(chǎn)生新的想法。使用決策矩陣對這些想法進(jìn)行評估,從而會產(chǎn)生被進(jìn)一步分析和測試的解決方案。如果成功,它將被實施。如果不成功,則需要重新表述問題,并重復(fù)該過程。這是一個迭代過程,即循環(huán)方法。

            這一持續(xù)不斷的重新再設(shè)計過程,源于和客戶親密接觸的洞察。

             

            15. 調(diào)研是設(shè)計思維非常重要的工具

             

            學(xué)習(xí)設(shè)計思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著:學(xué)習(xí)收集和分析大量數(shù)據(jù);學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么;學(xué)習(xí)管理不確定感,以及與許多新的伙伴合作( 利特卡和奧美,2011)。你可以進(jìn)行的研究類型分為三類:生成性研究、評估性研究和驗證性研究。

             

            16. “要么很快失敗,要么經(jīng)常失敗”

             

            一種常見的表述 —— 實際上是設(shè)計思維的另一種視角 —— 即設(shè)計師應(yīng)該預(yù)料到會“很快失敗或經(jīng)常失敗”(布朗,2009)。

            當(dāng)過程早期發(fā)生故障時,例如被拒絕的原型,實質(zhì)上它可以為有效解決方案提供關(guān)鍵見解。這種觀點與傳統(tǒng)的先形成理論,再檢驗正誤的方式相矛盾。

             

            17. 公司正在將設(shè)計思維作為解決問題的核心方法

             

            Airbnb、Braun 和百事可樂等多元化公司都在 采用設(shè)計思維并將其作為核心戰(zhàn)略。例如,IBM 為全球旗下的 44 個設(shè)計工作室聘請了 1600 名設(shè)計師,并且正在培訓(xùn)數(shù)以萬計的設(shè)計師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )

             

            18. 以人為本的思維

             

            設(shè)計思維為我們解決問題添加了以人為本的元素。當(dāng)我們試圖通過牢記人們的想法來解決問題,并使用基于直接觀察乃至訪談的研究時,我們便會捕捉到與消費(fèi)者需求一致的意外見解和創(chuàng)新。

             

            19. 可觀的商業(yè)價值

             

            它有助于將成功的產(chǎn)品更快地推向市場,最終節(jié)省企業(yè)資金。
            IBM 的健康和人類服務(wù)組織的設(shè)計思維實踐,通過有效使用設(shè)計和設(shè)計思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計算出的 ROI 超過 300%。

             

            20. 對復(fù)雜問題的作用性

             

            由于復(fù)雜的問題從來不能被所有人完全理解,因此在嘗試設(shè)計解決方案時,處理歧義和多個并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。

            設(shè)計思維通過綜合和歸納思維,幫助實現(xiàn)質(zhì)的飛躍。它允許通過解構(gòu)來測試約束,并允許通過多樣性思維和批評思維,來擁抱和探索歧義。

            消費(fèi)者通常不知道他們有什么問題需要解決,或者他們無法用語言表達(dá)出來。只有經(jīng)過仔細(xì)觀察,設(shè)計者才能根據(jù)真實消費(fèi)者行為中看到的東西來識別問題,而不是簡單地根據(jù)對消費(fèi)者的想法來確定問題。這有助于定義模棱兩可的問題,并找到解決方案。

             

            21. 別名:跳脫框架的思維

             

            該方法鼓勵“跳出框架思考”(“瘋狂的想法”);它蔑視顯而易見的事物并采用更具實驗性的方法。
            在早期的流程階段鼓勵大膽的想法,以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計師可以嘗試開發(fā)新的不受約束的思維方式,或?qū)ΤR妴栴}的創(chuàng)新解覺方法。

             

            22. 設(shè)計思想家的特征

             

            根據(jù)大多數(shù)設(shè)計學(xué)院的說法,具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計思維的作用。

            同理心:從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費(fèi)者的角度。要成為更好的同理心,必須傾聽和觀察他人的行為,注意并獲得洞察力。

            綜合思維:重要的是不僅要有分析能力,而且要能夠提出新穎的解決方案,還要憑直覺。

            樂觀:除非你相信有解決方案,否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時,你可能會放棄。

            實驗主義:重大創(chuàng)新并非來自漸進(jìn)式調(diào)整。設(shè)計思想家以創(chuàng)造性的方式提出問題并探索限制因素,并朝著全新的方向發(fā)展。

            協(xié)作:產(chǎn)品、服務(wù)和體驗日益復(fù)雜,因此必須擁有一支具有不同背景的團(tuán)隊,以幫助從多個角度看待問題。

            23. 有助于對抗某些偏見

            當(dāng)我們想到一個問題的多種解決方案時,對我們解決問題會非常有幫助,因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定,首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。

             

            24. 實用

             

            為了幫助設(shè)計師利用文科和技術(shù)理論,整合多個領(lǐng)域的知識以找到創(chuàng)新的解決方案,我們采用設(shè)計思維來獲得洞察力。該方法側(cè)重于可視化和操作,因而幫助我們更容易地了解實際解法,而不僅僅是理論模型。

             

            25. 執(zhí)行

             

            第一批美國公司在 2000 年代初期開始實施設(shè)計思維,這一概念引起了德國投資者 Hasso Plattner 的興趣,他于 2006 年資助創(chuàng)建了兩所設(shè)計學(xué)校(d.schools),其中一所位于波茨坦大學(xué)(德國),另一所位于美國斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計思維培訓(xùn),因此該研究重點關(guān)注這些國家,以尋找早期實施者。

             

            26. 團(tuán)隊思考

             

            設(shè)計思維通常涉及希望參與整個設(shè)計和開發(fā)過程的龐大利益相關(guān)者團(tuán)隊。

            觀點、才能和經(jīng)驗的多樣性被認(rèn)為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產(chǎn)生創(chuàng)意(卡振思,2018 年;薩梅和德拉赫-扎哈維,2013 年)。設(shè)計思維的協(xié)作方法和工具可幫助團(tuán)隊以積極的方式利用他們的差異。

            決策是平等的,因為每個成員的意見都被征求和使用(卡爾格倫等,2016)。

            27. 不需要花哨的技術(shù)原型

            當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時,它不是什么花哨的設(shè)備,而是一個用膠帶粘起來的原型。

            低保真原型制作起來既快速又便宜( 想想幾分鐘和幾分錢 ),但可以從用戶和同事那里得到有用的反饋,這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外,將多個原型帶到現(xiàn)場進(jìn)行測試為用戶提供了比較的基礎(chǔ)參考,同時也有助于揭示某些需求。

             

            28. 過程強(qiáng)調(diào)心態(tài)和行動

             

            為了創(chuàng)新,設(shè)計思維意識到認(rèn)知和行動對創(chuàng)新過程很重要。認(rèn)知包括接受度、樂觀和創(chuàng)造性的信心( 凱莉 & 凱莉,2013;鄭,2018),而行動包括快速原型設(shè)計、旅程地圖和假設(shè)浮現(xiàn)( 假設(shè)浮現(xiàn):assumption surfacing,這是一種評估技術(shù),涉及寫出潛在的假設(shè)和反假設(shè)。)( 卡爾格倫等,2016;利特卡,2015)

             

            29. 在組織中實施設(shè)計思維的挑戰(zhàn)

             

            如果領(lǐng)導(dǎo)層不歡迎風(fēng)險、模棱兩可和風(fēng)格的改變,實施起來就會變得更加困難。它會被管理者“質(zhì)疑”其具體指標(biāo)

            沃爾特斯 ( 2011 ) 聲稱,由于設(shè)計思維的模糊性,它與組織文化相沖突。

            據(jù)受訪者稱,在日常業(yè)務(wù)中使用設(shè)計思維之所以不會是最優(yōu)選項, 因為它是資源密集型的,增加了工作量。( 麗莎等,2016)

            在醫(yī)療保健等規(guī)避風(fēng)險的行業(yè)和公司中,“經(jīng)常和早點失敗”的方法被認(rèn)為是非常困難的。

             

            30. 設(shè)計思維的問題

             

            許多設(shè)計師反對設(shè)計思維這一觀點,設(shè)計思維不僅關(guān)乎一個過程,而且關(guān)乎改變思維過程并提高人們可能提出的解決方案的創(chuàng)造力。

            “設(shè)計思維”的推廣已被大型全球公司用來增加業(yè)務(wù)。不過,在更廣泛的設(shè)計世界中,我甚至?xí)f“設(shè)計思維”的過度宣傳導(dǎo)致了所提供設(shè)計質(zhì)量的下降。—— Yasushi Kusume

            弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會助理教授 Lee Vinsel 在《設(shè)計思維運(yùn)動是荒謬的》中寫道,“歸根結(jié)底,設(shè)計思維與設(shè)計無關(guān)。這與文科無關(guān)。這與任何有意義的創(chuàng)新無關(guān)。如果這意味著重大的社會變革,那肯定不是關(guān)于“社會創(chuàng)新”。這是關(guān)于商業(yè)化的。”

             

            31. 為什么需要共情

             

            觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動,可以為你提供有關(guān)人們想法和感受的線索。

            你可能認(rèn)為你知道問題所在,但只有通過觀察才能了解消費(fèi)者真正需要什么。

            宜家派設(shè)計師到人們家中,觀測他們的互動行為來了解他們的需求。這將使設(shè)計者能夠推斷這些經(jīng)歷的無形含義,以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實上,最好的解決方案來自于對人類行為的最佳洞察。

            Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務(wù)機(jī)構(gòu)。起初的問題似乎是設(shè)計不當(dāng)?shù)纳攀巢藛巍H缓笤O(shè)計思維揭示了無數(shù)問題,所有問題都源于服務(wù)本身的性質(zhì)。因此,經(jīng)由對服務(wù)進(jìn)行了徹底改革的之后,最終提高了客戶和員工的滿意度(利特卡,2014)



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

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

            打開設(shè)計思維才能突破瓶頸

            杰睿

            對于設(shè)計師來說,遇到設(shè)計瓶頸期很正常,入行一段時間后所具備的能力就會達(dá)到峰值,無法突破峰值就會遇到瓶頸。主要在設(shè)計思維和設(shè)計技法層面受限,打開設(shè)計思維才能突破瓶頸期,通過積累優(yōu)秀的案例并進(jìn)行總結(jié)分析,可以更快的打破思維限制。

             

             

             

             

             

            分享目錄

             

            一、趣味性的登錄設(shè)計

            二、瓷片區(qū)的趣味性手勢交互

            三、營造懷舊感的溫馨體驗

            四、趣味性的進(jìn)度提示設(shè)計

            五、場景感的點擊操作

            六、動效引導(dǎo)用戶發(fā)帖

            七、卡通形象強(qiáng)化瓷片區(qū)視覺感

            八、不改變布局的曝光強(qiáng)化

            九、可以晃動的 Banner 圖

            十、場景感的底部標(biāo)簽欄設(shè)計

             

             

             

            一、趣味性的登錄設(shè)計

             

            登錄是進(jìn)入產(chǎn)品的第一道防線,也容易讓用戶產(chǎn)生排斥感,降低用戶的防備心理才能提高登錄的意愿度。

             

            盯潮 App 在登錄界面中,以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計,使得頁面視覺感豐富。晃動手機(jī)時元素也會移動,在掉落或者碰撞手機(jī)邊緣時配合震動感,讓體驗變得非常有趣。趣味性的設(shè)計降低了用戶的排斥感,提升了登錄的意愿度和體驗感。

             

             

             

             

             

             

            二、瓷片區(qū)的趣味性手勢交互

             

            瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營模塊,起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁面中的布局比較靈活,設(shè)計表現(xiàn)也非常豐富。

             

            盯潮 App 在首頁瓷片區(qū)設(shè)計中,以柵格式布局進(jìn)行區(qū)塊劃分,占比較大的模塊類似于 Banner 式表現(xiàn)。通過手勢可以任意拖動實現(xiàn)切換,趣味性和互動性相結(jié)合,提高了用戶的使用樂趣。

             

             

             

             

             

             

            三、營造懷舊感的溫馨體驗

             

            童年的記憶是我們逝去的青春,每每看到小時候的畫面,總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營造設(shè)計風(fēng)格的產(chǎn)品,名字叫“軟眠眠”。

             

            這是一款拯救失眠者的治愈系睡眠 App,以一幅小時候生活的環(huán)境插畫填充界面背景,圖標(biāo)設(shè)計也是提取小時候的玩物或者生活用品,視覺風(fēng)格營造極強(qiáng)的懷舊感。無論是畫風(fēng)還是配色、配樂等,都勾起了我們滿滿的回憶,帶給用戶溫馨的體驗。

             

             

             

             

             

             

            四、趣味性的進(jìn)度提示設(shè)計

             

            在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會選擇進(jìn)度條,通過可視化的表達(dá)提高用戶的理解,減輕信息認(rèn)知負(fù)擔(dān)。

             

            軟眠眠 App 在定制睡眠計劃的過程中,完成選項時的進(jìn)度條設(shè)計非常有意思,是一個小孩通過拉動繩子移動。拉動過程中結(jié)合動態(tài)表達(dá),配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快,趣味性的設(shè)計也提高了完成選項任務(wù)的意愿度。

             

             

             

             

             

             

            五、場景感的點擊操作

             

            在保障底層操作體驗的基礎(chǔ)上,設(shè)計會越來越講究細(xì)節(jié)的體驗,逐步強(qiáng)化情感化的融入和場景感的體驗。

             

            最近在體驗小雞上工 App 時,在找工作的列表設(shè)計中加入了“搶”按鈕,在點擊列表時按鈕會有按壓的動效過程。模擬搶拍按鈕獲得機(jī)會的體驗,營造場景氛圍感,提高了設(shè)計表達(dá)的趣味性。

             

             

             

             

             

             

            六、動效引導(dǎo)用戶發(fā)帖

             

            微動效可以提高功能的吸引力,也能讓互動體驗變得更有趣,可以通過動效引導(dǎo)功能操作和提高關(guān)注度。

             

            騰訊動漫 App 在圈子欄目中,以 IP 形象結(jié)合動效強(qiáng)化發(fā)帖按鈕,以此引導(dǎo)用戶參與發(fā)帖。動效不僅突出了發(fā)帖的關(guān)注度,也讓發(fā)帖按鈕設(shè)計更有親和力,進(jìn)而提升用戶的點擊欲。

             

             

             

             

             

             

            七、卡通形象強(qiáng)化瓷片區(qū)視覺感

             

            瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用,提高該模塊的吸引力至關(guān)重要,視覺感的突出也尤為重要。

             

            會玩 App 在首頁“一起玩”的瓷片區(qū)設(shè)計中,以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn),各種裝扮的形象豐富視覺感。卡通形象設(shè)計風(fēng)格統(tǒng)一,卡片色彩豐富且協(xié)調(diào),整體瓷片區(qū)視覺沖擊力十足。

             

             

             

             

             

             

            八、不改變布局的曝光強(qiáng)化

             

            在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上,如何提高局部內(nèi)容或者主推內(nèi)容的曝光度,是產(chǎn)品設(shè)計師不斷探索的方向。

             

            愛奇藝 App 首頁推薦欄目 Banner 圖下方,默認(rèn)情況下以宮格布局推薦影片。前段時間在打開時發(fā)現(xiàn)了一個臨時設(shè)計表達(dá),保持當(dāng)前結(jié)構(gòu)布局不變,放大了圖片填充和推薦影片,整張畫面填充宮格,視覺張力十足。該設(shè)計表達(dá)既不會干擾當(dāng)前布局,也能強(qiáng)化推薦影片的曝光度,解決方案值得探索。

             

             

             

             

             

             

            九、可以晃動的 Banner 圖

             

            Banner 可以在創(chuàng)意、造型、互動形式等方面進(jìn)行設(shè)計發(fā)揮,也呈現(xiàn)了許多優(yōu)秀的方案,產(chǎn)品設(shè)計師也在不斷嘗試更多的可能性。

             

            最近在體驗盯潮 App 時,發(fā)售欄目頂部 Banner 圖設(shè)計引人關(guān)注。當(dāng)用戶左右晃動手機(jī)時,Banner 圖背景層不動,而文案和產(chǎn)品等元素層會跟著晃動的頻率左右移動。可以晃動的 Banner 圖非常有意思,成功地吸引了用戶的關(guān)注度和點擊欲。

             

             

             

             

             

             

            十、場景感的底部標(biāo)簽欄設(shè)計

             

            底部標(biāo)簽欄設(shè)計可以在背景、造型、圖標(biāo)等元素中發(fā)揮,其中圖標(biāo)設(shè)計中的發(fā)揮相對更多一些,在背景和造型層面的案例較少,不過最近也發(fā)現(xiàn)了一個解決方案。

             

            在體驗云游萬里長城小程序時,進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計結(jié)合了長城墻面和結(jié)構(gòu),非常有場景代入感。設(shè)計了深色版和淺色版,圖標(biāo)造型設(shè)計也融入了長城元素,不失為一種優(yōu)秀的差異化設(shè)計探索。

             

             

             

             

            小結(jié)

             

            希望本期的分享可以開啟大家更多設(shè)計思維,從優(yōu)秀的設(shè)計方案中發(fā)現(xiàn)設(shè)計的軌跡,復(fù)用到后期的項目設(shè)計中。本文描述屬于個人理解和總結(jié),不足之處歡迎大家留言補(bǔ)充,我們互相進(jìn)步。



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

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

            探究UI設(shè)計中形狀的創(chuàng)意與應(yīng)用

            杰睿

            形狀設(shè)計可以影響整個界面的視覺效果。通過選擇適當(dāng)?shù)男螤詈团帕蟹绞剑梢詣?chuàng)造出令人愉悅、易于使用和富有吸引力的界面。

            寫在前面

            在UI設(shè)計中,形狀設(shè)計是一個至關(guān)重要的環(huán)節(jié)。對其選擇和排列會直接影響到界面的美觀度和用戶的交互體驗。接下來將詳細(xì)探討UI設(shè)計中的形狀設(shè)計,包括其重要性、基本原則和實際應(yīng)用。

             

            形狀可以幫助用戶理解和操作界面。一個優(yōu)秀的形狀設(shè)計應(yīng)該具有清晰、簡潔和易于理解的特點,我們在平時做設(shè)計中,需要將這些原則深入到每一個細(xì)節(jié)中。

            在設(shè)計中,形狀的識別和理解是至關(guān)重要的。一個成功的形狀設(shè)計應(yīng)該能夠快速地被用戶識別并理解。例如,一個常見的形狀可以使用不同的顏色和大小來區(qū)分主要內(nèi)容和次要內(nèi)容,從而引導(dǎo)用戶的注意力。

             

            1、形狀的一致性

            在UI設(shè)計中,一致性是一個非常重要的原則。一個好的形狀設(shè)計應(yīng)該在整個應(yīng)用程序中保持一致,從而使用戶可以輕松地導(dǎo)航和操作。例如,閑魚APP里的所有的按鈕可以使用相同的形狀和顏色,以便用戶可以輕松地識別并操作。

             

            2、形狀的個性化與品牌識別

            一個獨特的形狀設(shè)計可以幫助品牌在競爭激烈的市場中脫穎而出。一個好的形狀設(shè)計應(yīng)該能夠體現(xiàn)品牌的個性和價值觀,從而增強(qiáng)品牌的識別度。使用獨特的圖標(biāo)和標(biāo)志來傳達(dá)其品牌形象和價值觀。例如:小米的logo、京東狗、淘寶天貓。

             

            1、按鈕設(shè)計

            按鈕是UI設(shè)計中最重要的元素之一。一個好的按鈕設(shè)計應(yīng)該具有清晰的形狀和易于理解的標(biāo)簽。

            按鈕形狀主要有直角、小圓角、全圓角三種樣式。

            ① 直角按鈕具有嚴(yán)謹(jǐn)、力量、高端的特點,適用于大牌美妝、奢侈品類產(chǎn)品;

             

            ② 小圓角按鈕具有穩(wěn)定、中性的感覺,適用于用戶跨度較大的常規(guī)類產(chǎn)品中,例如微信、滴滴、抖音等;

             

            ③ 全圓角按鈕更加溫和、親切,適用于電商類和兒童類的產(chǎn)品中。

             

            按鈕尺寸和比例根據(jù)iOS和Android的規(guī)范,按鈕尺寸至少高于5.5毫米(36 pt),否則用戶點擊時會較為困難。同時,按鈕長度固定,文字長度變化或是按鈕長度根據(jù)文字長短而變化的設(shè)計方式也需要考慮文字距離按鈕上下左右邊距的比例關(guān)系。

            總的來說,UI中按鈕形狀的設(shè)計需要結(jié)合具體的產(chǎn)品屬性和界面風(fēng)格,以及用戶的使用習(xí)慣來進(jìn)行綜合考慮。

             

            2、圖標(biāo)設(shè)計

            圖標(biāo)是UI設(shè)計中另一種重要的具有高度概括性和視覺傳達(dá)性的小尺寸圖像元素。可以幫助用戶快速地識別和理解功能和信息,是靠文案無法實現(xiàn)的。

            例如,天氣圖標(biāo)通過其形狀、色彩和設(shè)計元素直觀地傳達(dá)不同的天氣狀況和氣象信息,幫助人們更好地了解天氣狀況。又如衛(wèi)生間男女圖標(biāo)的設(shè)計讓人們易于識別和理解。

             

            在UI設(shè)計中,圖標(biāo)的圓角度通常是怎么定義的呢?

            ① 大圓角:應(yīng)用在以圓潤、可愛為主要風(fēng)格的UI設(shè)計中,以營造出更加柔和、親切的視覺效果。

            ② 小圓角:小圓角作為一種微妙的細(xì)節(jié)元素,可以增加圖標(biāo)的層次感和細(xì)節(jié)。在追求設(shè)計質(zhì)感的界面中,適當(dāng)添加小圓角可以使圖標(biāo)更加精致和有品質(zhì)感。

            ③ 無圓角:應(yīng)用在科技或現(xiàn)代感的UI設(shè)計中,以營造出更加硬朗、冷峻的視覺效果。但使用需要克制,過多的直角可能會讓整個界面顯得生硬和冷感。

            補(bǔ)充一點,我發(fā)現(xiàn)一個重要細(xì)節(jié),就是很多人在計算內(nèi)圓角數(shù)值時都存在困擾。自工作以來,我注意到這個問題影響了很多人,他們不知道如何正確地計算內(nèi)圓角的數(shù)值。為了解決這個問題,通過以下方式幫助大家更好地掌握計算內(nèi)圓角數(shù)值的方法。

             

            3、輸入框設(shè)計

            輸入框是用戶輸入信息的重要區(qū)域。在UI設(shè)計中,輸入框的形狀設(shè)計可以根據(jù)實際需求和設(shè)計風(fēng)格進(jìn)行變化。以下是一些常見的輸入框形狀設(shè)計:

            ① 方型輸入框:這是最常見的輸入框形狀,它以方形的形式呈現(xiàn),可以在其中輸入文本或信息。這種設(shè)計簡單明了,易于使用,適用于大多數(shù)場景。

            ② 圓角矩形輸入框:這種輸入框在四個角上采用了圓角設(shè)計,使得整個輸入框看起來更加柔和、友好。這種設(shè)計在一些需要強(qiáng)調(diào)用戶輸入的場景下較為常見。

            ③ 下拉菜單輸入框:這種輸入框可以讓用戶從下拉菜單中選擇一個選項,而不是直接在文本框中輸入。這種設(shè)計適用于一些固定選項的場景,可以減少用戶的輸入操作。

            ④ 按鈕式輸入框:這種輸入框?qū)⑤斎肟蚝桶粹o結(jié)合在一起,用戶可以點擊按鈕來輸入信息。這種設(shè)計適用于一些需要強(qiáng)調(diào)點擊操作的場景,例如站酷的登錄。

            ⑤ 語音識別輸入框:這種輸入框允許用戶通過語音來輸入信息,而不是手動輸入。這種設(shè)計適用于一些需要快速輸入或不方便手動輸入的場景,例如駕車、寫字等。

            總的來說,輸入框的形狀設(shè)計應(yīng)根據(jù)實際需求和設(shè)計風(fēng)格來進(jìn)行選擇,同時也要考慮用戶的使用習(xí)慣和操作體驗。

             

            4、導(dǎo)航欄設(shè)計

            導(dǎo)航欄是UI設(shè)計中重要的組成部分之一。它幫助用戶在不同的頁面之間進(jìn)行切換和導(dǎo)航。在設(shè)計導(dǎo)航欄時,應(yīng)考慮其位置、顏色和形狀等因素。以下是一些常見的導(dǎo)航欄形狀設(shè)計:

            ① 頂部導(dǎo)航欄:這是最常見的導(dǎo)航模式,位于頁面頂部,可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項、搜索框等元素。這種設(shè)計簡單明了,易于使用,適用于大多數(shù)場景。

            ② 側(cè)邊導(dǎo)航欄:這種導(dǎo)航模式位于頁面左側(cè),通常用于二級導(dǎo)航或輔助導(dǎo)航。側(cè)邊導(dǎo)航欄可以以垂直或水平方向呈現(xiàn),根據(jù)實際需求進(jìn)行選擇。

            ③ 底部導(dǎo)航欄:這種導(dǎo)航模式位于頁面底部,通常用于一級目錄的導(dǎo)航。底部導(dǎo)航欄可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項、搜索框等元素。這種設(shè)計操作方便,用戶體驗好,適用于大多數(shù)場景。

            ④ 彈出式導(dǎo)航欄:這種導(dǎo)航模式通常用于移動端應(yīng)用,通過點擊或滑動屏幕上的按鈕或圖標(biāo)來喚出導(dǎo)航菜單。彈出式導(dǎo)航欄可以以垂直或水平方向呈現(xiàn),根據(jù)實際需求進(jìn)行選擇。

            總的來說,導(dǎo)航欄的形狀設(shè)計應(yīng)根據(jù)實際的導(dǎo)航模式和設(shè)計風(fēng)格來進(jìn)行選擇,同時也要考慮用戶的使用習(xí)慣和操作體驗。好的導(dǎo)航設(shè)計應(yīng)該簡單明了、易于使用,能夠提供清晰的信息架構(gòu)和層級關(guān)系,幫助用戶快速找到所需內(nèi)容。

             

            5、作為底紋設(shè)計

            將形狀用作底紋,可以增加圖形的視覺層次感和趣味性。尤其是當(dāng)使用如圓圈、條紋、曲線等形狀時,可以使底紋呈現(xiàn)出動態(tài)感和動感。

            也可以強(qiáng)調(diào)文字或圖片中的某些元素,用來引導(dǎo)觀者的視線,以創(chuàng)造出視覺焦點。比如,在一個沉悶的黑色背景上使用鮮艷的彩色形狀作為底紋,可以將觀者的注意力集中在那些形狀上。

            但是,必須著重強(qiáng)調(diào)的是,底紋的使用應(yīng)當(dāng)與整體的設(shè)計風(fēng)格和主題相得益彰。若應(yīng)用不當(dāng),可能會對畫面的整體美感產(chǎn)生破壞性的影響。因此,在決定是否使用底紋時,必須慎重考慮其與整體設(shè)計的和諧度。

             

            1、動態(tài)形狀設(shè)計

            隨著技術(shù)的不斷發(fā)展,動態(tài)形狀設(shè)計已經(jīng)成為一種趨勢。通過使用動畫和過渡效果,可以創(chuàng)建更具吸引力和互動性的界面。例如,使用漸變效果來平滑地轉(zhuǎn)換不同的頁面或狀態(tài)。

             

            2、3D和立體形狀設(shè)計

            3D和立體形狀設(shè)計為UI設(shè)計師提供了更多的可能性。通過使用陰影、光照和深度效果,可以創(chuàng)建更立體、更有層次感的界面。例如,使用3D旋轉(zhuǎn)效果來突出主要內(nèi)容或使用陰影效果來增加界面的深度感。

             

            3、可定制形狀設(shè)計

            隨著用戶對個性化需求的不斷增加,可定制的形狀設(shè)計變得越來越重要。用戶希望根據(jù)自己的喜好和需求來調(diào)整界面。例如,允許用戶自定義選擇自己喜歡的頁面主題風(fēng)格。

             

            總結(jié)

            在UI設(shè)計中,精美形狀設(shè)計的關(guān)鍵是深入理解用戶需求,注重細(xì)節(jié),保持一致性,勇于創(chuàng)新,不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面,提升用戶體驗。簡潔地說,好的形狀設(shè)計來源于用戶需求、細(xì)節(jié)、一致性、創(chuàng)新和自我提升。

            以上總結(jié)僅代表個人觀點,如有不足歡迎大家補(bǔ)充互相進(jìn)步。



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

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

            【設(shè)計理論】UI設(shè)計體驗如何提升?

            杰睿

            企業(yè)多產(chǎn)品線模式下,UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)模化提升多產(chǎn)品線整體體驗中的方法論和實踐經(jīng)驗。

             

             

            前言

            SaaS 產(chǎn)品體驗要求越來越高,用戶體驗已經(jīng)成為產(chǎn)品競爭力的重要組成部分,怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗設(shè)計,本文從貼合業(yè)務(wù)線的設(shè)計規(guī)范、敏捷易用的前端組件庫、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)模化提升多產(chǎn)品線整體體驗過程中方法論和實踐經(jīng)驗。

             

            關(guān)鍵詞:

            用戶體驗設(shè)計;UI設(shè)計規(guī)范;多產(chǎn)品線;體驗文化;UI設(shè)計落地

             

            面對多產(chǎn)品體系,多產(chǎn)品線,需要積極尋找和探索適合我們客觀情況的最佳實踐,我們面臨的問題有:

            1.過往以功能堆砌為主、基本“能用”,缺乏平臺規(guī)范和一致性,體驗不足。

            2.產(chǎn)品線多、體量大。

            3.客戶對產(chǎn)品體驗要求越來越高。

            4.產(chǎn)品歷史包袱、修復(fù)改動困難。

            5.對用戶體驗認(rèn)知不一,協(xié)同、溝通成本高。

            6.重復(fù)的開發(fā)成本。

            7.第三方組件與業(yè)務(wù)的匹配度不佳。

             

             

             

             

            解決以上幾大難題,我們啟動了UI 設(shè)計規(guī)范的搭建、UI組件庫的開發(fā)等,讓規(guī)范和組件庫成為各產(chǎn)品線堅實底座的一部分,使用戶體驗文化賦能前端和產(chǎn)品經(jīng)理,協(xié)同 QA 力量一起推動產(chǎn)品體驗升級,以下整理分享的實踐方法適用于中小型UED團(tuán)隊支撐復(fù)雜、多業(yè)務(wù)線的企業(yè),本文嘗試從以下幾個方面總結(jié)和提煉實踐經(jīng)驗,跟業(yè)界同行探討。

             

             

            貼合業(yè)務(wù)線的UI設(shè)計規(guī)范

             

            設(shè)計規(guī)范體系的搭建對于新的團(tuán)隊,如何從復(fù)雜海量的業(yè)務(wù)場景中制定出一套適用于自己產(chǎn)品的UI設(shè)計規(guī)范,是第一道待翻越的高墻,完整的設(shè)計規(guī)范應(yīng)該是包含視覺規(guī)范與交互規(guī)范,本文主要針對設(shè)計規(guī)范實踐過程進(jìn)行闡述。

             

            貼合場景的設(shè)計規(guī)范:

            雖然市面上已經(jīng)有眾多成熟的設(shè)計規(guī)范體系可供使用,但是當(dāng)前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場景等綜合因素,決定了需要重新搭建一套符合我們自己業(yè)務(wù)場景的設(shè)計規(guī) 范體系。

             

             

             

             

            UI規(guī)范效益最大化:

            一旦我們決定制作規(guī)范,就要把規(guī)范當(dāng)成一個產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程,去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價值。 依據(jù)規(guī)范效益模型,在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%,先解決統(tǒng)一性,再解決場景細(xì)分,打造高質(zhì)量通用的模式庫以提高質(zhì)量和效率,并力求讓更多人從這套設(shè)計體系中獲益, 從而讓規(guī)范體系發(fā)揮更大的價值。

             

             

             

             

            UI規(guī)范制定的策略:

            明確用戶對設(shè)計規(guī)范的訴求,構(gòu)建適合產(chǎn)品的UI設(shè)計規(guī)范,首先,需要明確規(guī)范體系的用戶群體經(jīng)過設(shè)計團(tuán)隊多輪調(diào)研,確定設(shè)計規(guī)范面向的目標(biāo)用戶群、基于核心用戶的訴求,為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。

             

             

             

             

            確定UI設(shè)計價值觀:

            產(chǎn)品歷史包袱重,系統(tǒng)結(jié)構(gòu)復(fù)雜,在提升用戶體驗時,內(nèi)容表達(dá)「清晰明確」是第一要務(wù),例如尊重已經(jīng)形成的用戶習(xí)慣,優(yōu)化改造時,注意版本之間的銜接,讓用戶「清晰明確」,這也是為什么將「清晰明確」作為價值觀之首,另外提升效率是企業(yè)級產(chǎn)品用戶體驗的永恒主題,同時兼顧系統(tǒng)的簡潔與一致。

             

             

             

             

            梳理UI規(guī)范框架:

            UI設(shè)計規(guī)范包括設(shè)計價值觀、全局規(guī)則、組件庫、模式庫、典型頁面、移動端規(guī)范和設(shè)計資源框架整理主要從以下3個方面進(jìn)行:

            1.梳理現(xiàn)有組件,剔除不使用的部分 。?

            2.同類競品的框架借鑒,查漏補(bǔ)缺。 ?

            3.場景驗證,與業(yè)務(wù)場景深度結(jié)合經(jīng)過充分論證和梳理,對規(guī)范框架做了重新定義,增補(bǔ)了業(yè)務(wù)缺少的內(nèi)容。

            如上圖所示,例如對高頻的工具欄組件的補(bǔ)充,典型頁面的補(bǔ)充,增加模式庫以及全局規(guī)則,當(dāng)前第一個版本的規(guī)范框架是基于業(yè)務(wù)場景優(yōu)先級最高的內(nèi)容進(jìn)行制定,更多的規(guī)范內(nèi)容的增加依托于不斷的迭代,逐漸完善規(guī)范框架。

             

             

             

             

            規(guī)范內(nèi)容的制定及評審:

            組件規(guī)范包含:變更記錄、組件定義、何時使用、組件的類型、組件的響應(yīng)。

             

             

             

             

            規(guī)范內(nèi)容制定的原則: ?

            1.有明確場景可依。?

            2.精簡不必要的分支 例如在定義表單規(guī)范時,對于表單標(biāo)簽的對齊方式做了統(tǒng)一的約束,標(biāo)簽右對齊,輸入框左對齊全局保持統(tǒng)一。

             

             

             

             

            邏輯正確、規(guī)則明確易懂: ?

            例如常見的alert (警告提示)名稱調(diào)整為常駐提示,語義更貼合場景,便于理解。

             

             

             

             

            規(guī)則的可拓展性,多場景的兼容性: ?

            產(chǎn)品架構(gòu)是PC端到移動端的自動適配,因此在組件設(shè)計的時候需同時考慮PC端與移動端的對應(yīng)關(guān)系以及兩端場景的兼容性。

             

             

             

             

            協(xié)作及敏捷迭代: ?

            規(guī)范發(fā)布后,伴隨著實際項目的檢驗,業(yè)務(wù)場景的擴(kuò)充變化,如何高效的對設(shè)計規(guī)范進(jìn)行迭代,決定了設(shè)計系統(tǒng)能否持續(xù)的走得更遠(yuǎn),規(guī)范內(nèi)容定期評審,必須通過業(yè)務(wù)、技術(shù)、設(shè)計評審,確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負(fù)責(zé),同時有backup,可以幫助走查復(fù)盤雙重保障規(guī)范的質(zhì)量。

             

             

             

             

            敏捷易用的前端組件庫: ?

            復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點,快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫,是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。

             

             

            敏捷易用的前端組件庫

             

            復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點,快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫,是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。

            前端組件庫建立目標(biāo): ?

            1.提高開發(fā)效率,對高頻使用、通用組件進(jìn)行代碼化封裝,避免重復(fù)開發(fā)工作。 ?

            2.提高開發(fā)質(zhì)量,通過各類業(yè)務(wù)場景和業(yè)務(wù)線的錘煉,沉淀組件代碼最佳實踐。 ?

            3.提高產(chǎn)品體驗,組件封裝代碼化,減少在多角色協(xié)同中因為理解偏差、信息傳遞問題等導(dǎo)致的不確定性和結(jié)果不可控性,不同業(yè)務(wù)線、不行項目、共用一套基礎(chǔ)代碼,保證體驗的一致性,組件的組織形式: 結(jié)合實際業(yè)務(wù)場景和原子設(shè)計理論,將組件劃分為不同顆粒度:基礎(chǔ)組件、業(yè)務(wù)組件、典型頁面 組件,以適用于不同研發(fā)場景使用。

             

             

             

             

            1.基礎(chǔ)組件,基礎(chǔ)組件為組件庫最小顆粒度,構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?

            2.業(yè)務(wù)組件,在基礎(chǔ)組件的基礎(chǔ)上,結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場景,梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁面組件,梳理具有業(yè)務(wù)特點的典型頁面,相比基礎(chǔ)組件和業(yè)務(wù)組件,典型頁面更加具體, 為用戶提供具有代表性的內(nèi)容和框架,并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹右表典型 頁面組件,作為最為常見的頁面結(jié)構(gòu),各業(yè)務(wù)場景可復(fù)用頁面組件,保證了頁面組件內(nèi)各基礎(chǔ)組 件的一致性,最大程度的實現(xiàn)不同產(chǎn)品線產(chǎn)品中頁面體驗的一致性。

             

             

             

             

            推進(jìn)前端組件庫落地執(zhí)行: ?

            前期設(shè)計規(guī)范落地到組件庫過程中,面臨諸多問題和阻礙,比如開發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗收及修復(fù)問題不到位等問題。處理這些問題對UI團(tuán)隊資源造成很大消耗, 通過總結(jié)復(fù)盤前期組件庫落地時的經(jīng)驗和教訓(xùn),梳理落地執(zhí)行流程,在新的協(xié)作流程下,新一 批的組件開發(fā)不論在協(xié)作效率和開發(fā)質(zhì)量上都有質(zhì)的提升。

             

            分層推進(jìn): ?

            組件庫開發(fā)是一個持續(xù)迭代的過程,考慮到組件庫開發(fā)資源極為有限且無專職負(fù)責(zé)人員,在跟組 件庫開發(fā)團(tuán)隊協(xié)同過程中,我們通過分步開發(fā)來解決組件庫更新優(yōu)化的問題并通過不斷優(yōu)化協(xié)作流程來助力組件庫高效落地。

            前端組件庫分步開發(fā)原則: ?

            1.優(yōu)先級原則,優(yōu)先開發(fā)適用于業(yè)務(wù)線普適場景的組件。 ?

            2.緊急性原則,對于急需的業(yè)務(wù)線所需組件優(yōu)先開發(fā)。 ?

            3.快速可實現(xiàn)原則,開發(fā)實現(xiàn)成本高的組件暫緩處理。

             

             

             

             

            自查走查驗收: ?

            組件UI責(zé)任人梳理出下屬組件需開發(fā)落地的細(xì)節(jié)點,整理為文檔,待開發(fā)人員完成組件開發(fā)后,自行參照UI提供的自查文檔,查漏補(bǔ)缺,保障進(jìn)入UI驗收環(huán)節(jié)的前端組件不會出現(xiàn)較多的缺陷,降低后期走查和溝通修改的工作量,同時監(jiān)督開發(fā)人員提高組件落地還原度和質(zhì)量。

             

             

             

             

            組件庫的持續(xù)迭代: ?

            UI團(tuán)隊通過一套標(biāo)準(zhǔn)的流程來把控組件庫迭代的質(zhì)量,在日常工作中經(jīng)常會收到產(chǎn)品經(jīng)理或項目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門作為推動組件庫搭建的核心環(huán)節(jié),需要以全局 和更深入的視角加以判斷把關(guān),保證前端組件庫內(nèi)容的普適性和高質(zhì)量,避免組件庫內(nèi)容冗余, 降低研發(fā)維護(hù)成本。

             

             

             

             

            產(chǎn)品研發(fā)協(xié)作流程保障: ?

            好的過程是好的結(jié)果的有力保障,一個業(yè)務(wù)需求從產(chǎn)生到開發(fā)落地需要經(jīng)過多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程,確保各角色清楚自己職責(zé)以及如何跟上下游銜接,同 時我們也希望協(xié)作流程能夠確保設(shè)計資源可以向重點業(yè)務(wù)模塊傾斜,以及發(fā)揮各個角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗。

             

             

            UI角色需融入規(guī)范化的研發(fā)流程

             

            UED團(tuán)隊建立之初,我們面臨的首要問題是:需求隨機(jī),完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個人,為了解決這個問題,我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問題。

            企業(yè)級產(chǎn)品特點、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團(tuán)隊人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團(tuán)隊進(jìn) 行設(shè)計,在判斷哪些需求需要流轉(zhuǎn)至UI團(tuán)隊設(shè)計時,我們給出了如下指導(dǎo)性方向: ?

            1.用戶量角度,大量終端用戶使用的場景,例如訂票、報銷、采購頁面 。 ?

            2.用戶重要程度角度,核心、重要用戶使用的場景 eg.公司領(lǐng)導(dǎo)、決策層。 ?

            3.通用性角度,通用組件或框架,需要UI通盤考慮各個業(yè)務(wù)線場景需求進(jìn)行設(shè)計。 其他需求則主要由產(chǎn)品經(jīng)理進(jìn)行設(shè)計,UX以評審方式輕度參與。

             

             

             

             

            協(xié)作流程迭代,UI驗收成為必要一環(huán): 隨后我們又面臨新的問題:設(shè)計還原度差,被公司老板生動的形容為:看設(shè)計稿是“精裝修”, 開發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計還原質(zhì)量,我們在研發(fā)流程中明確了所有涉 及前端頁面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負(fù)責(zé)人驗收,在產(chǎn)品團(tuán)隊TAPD中記 錄UI缺陷、標(biāo)明嚴(yán)重程度,對于 “嚴(yán)重” 級別以上UI缺陷,禁止發(fā)版。

             

             

             

             

            UI工期評估合理化:

            為了既能盡力配合各產(chǎn)品線迭代計劃又要爭取合理UI設(shè)計時間、保證產(chǎn)出質(zhì)量,合理評估設(shè)計周期對UI人力管理尤其重要。對此,我們對設(shè)計需求分成了ABC三級進(jìn)行評估。 對于A和B級需求,通常模塊較大,先有UI設(shè)計方案再去分期迭代開發(fā),對于這兩類需求,在評估 模型中給出了大致工期概念,比如以月為單位,大于1個月或2個月。

            對于C級需求,通常為產(chǎn)品經(jīng)理先排進(jìn)某個迭代再來提UI設(shè)計需求,設(shè)計范圍相對明確,我們則結(jié)合典型頁面數(shù)量因子和設(shè)計難度因子給出了UI工期大概評估公式,以天為單位。 ?

            1.設(shè)計難度因子:根據(jù)業(yè)務(wù)線的復(fù)雜程度而定,范圍為(0.8~1.5)。 ?

            2.典型頁面數(shù)量因子:評估需求范圍規(guī)模(N)。

             

             

             

             

             

            設(shè)計體驗文化打造

             

            UI設(shè)計團(tuán)隊在協(xié)作過程中面臨諸多挑戰(zhàn):產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長、各級人員對產(chǎn)品認(rèn)知及重視程度不一、好的體驗設(shè)計難落地、溝通成本高等問題,想要解決這些問題,若僅靠UI團(tuán)隊自身力量是不夠的,需要動員公司各個環(huán)節(jié)和人員重視用戶體驗,共同促進(jìn)產(chǎn) 品體驗提升。

            搭建體驗文化灌溉機(jī)制:

            UI部門通過多維度的體驗知識內(nèi)容矩陣、多渠道多場景全員覆蓋,普及和加深各級對產(chǎn)品體驗 價值的認(rèn)識,提升產(chǎn)品體驗思考力和洞察力,幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗的關(guān)系,賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出,“以用戶為中心”和“打造產(chǎn)品極致體驗” 的價值觀根植與企業(yè)文化中,指導(dǎo)研發(fā)流程中各項工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個產(chǎn)品體驗維度,以實現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗”目標(biāo)。 通過搭建體驗文化灌溉機(jī)制,提升全員體驗意識,能為產(chǎn)品研發(fā)帶來長久的價值: ?

            1.提高設(shè)計還原度 ?

            2.減少培訓(xùn)成本 ?

            3.提升跨部門溝通效率 ?

            4.提升UI團(tuán)隊影響力 ?

            5.提升客戶滿意度

             

             

             

             

            體驗文化落地實踐:

            針對不同類型的體驗知識,我們采取不同的傳播渠道進(jìn)行透,以期達(dá)到最好的效果,避免形式化, 將體驗文化滲透、學(xué)習(xí)落到實處,最終影響產(chǎn)品研發(fā)的各個環(huán)節(jié)。

             

            以下為UI團(tuán)隊在企業(yè)體驗文化 推廣的主要渠道和方法: ?

            極致體驗公眾號主要發(fā)布產(chǎn)品體驗的基礎(chǔ)原理,體驗價值、項目復(fù)盤、常見體驗問題等深度長文。讓公司各級人 員認(rèn)識用戶體驗及價值,讓用戶體驗理念深入人心。 ?

            體驗知識小卡片整理產(chǎn)品體驗小的知識點,閱讀學(xué)習(xí)成本低。利用員工碎片時間,對細(xì)小體驗知識點的學(xué)習(xí),積 跬步,至千里。 ?

            直播宣講針對重點且復(fù)雜的產(chǎn)品體驗內(nèi)容,如交互規(guī)范宣講、重點問題復(fù)盤、產(chǎn)品經(jīng)理及開發(fā)人員應(yīng)知應(yīng) 會的知識點,采用宣講直播的方式,更好的對內(nèi)容進(jìn)行詳細(xì)解說和疑難問題溝通。 ?

            體驗調(diào)研分享UI部門成員對核心競品進(jìn)行體驗調(diào)研,整理分析后對產(chǎn)品經(jīng)理及相關(guān)人員進(jìn)行分享,賦能產(chǎn)品經(jīng) 理,為產(chǎn)品的體驗設(shè)計提供新的思路。

             

             

             

             

             

            UI設(shè)計質(zhì)量品控

             

            UI團(tuán)隊專業(yè)水平一定程度上決定了公司產(chǎn)品體驗的上限,持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗。

             

            設(shè)計自查:

            企業(yè)級產(chǎn)品的大量體驗問題都是設(shè)計基礎(chǔ)問題。因此需要設(shè)計師不論在內(nèi)審前,還是內(nèi)審過程中都要牢記設(shè)計原則,查漏補(bǔ)缺,守住底線。我們在部門內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來檢查設(shè)計方案,通過這些自查點來避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗問題,從UI設(shè)計師自己這里 把好第一道關(guān)。

             

             

             

             

            在日常工作中,UI自查表始終占據(jù)工區(qū)的醒目位置。在評審過程中,大家也會通過線上文檔的形 式來對設(shè)計原則的條目進(jìn)行逐一檢查。

             

             

             

             

            做好UI內(nèi)部評審:

            設(shè)計團(tuán)隊內(nèi)評審(Design critique)是幾乎所有國內(nèi)外設(shè)計團(tuán)隊的普遍、經(jīng)典做法,可以有效提 高設(shè)計產(chǎn)出水平、保證團(tuán)隊對外輸出質(zhì)量。方法是普適的,但具體執(zhí)行時如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評審上,我們進(jìn)行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評審委員會” 團(tuán)隊內(nèi)評審時邀請全員參加,但發(fā)現(xiàn)只有少數(shù)同事發(fā)言,另外一些同事因資歷淺、不了解評審產(chǎn)品或者積極性不高給不出建議。同時隨著團(tuán)隊成員數(shù)量從幾個增加到十幾個,評審會議的時間成 本大大增加。

            選取團(tuán)隊內(nèi)相對資深和積極提出問題、建議的同事組成內(nèi)部評審委員會,以月為周期輪流進(jìn)行, 可以有效分散評審委員在團(tuán)隊內(nèi)部評審上的工作負(fù)荷,并明確一次UI內(nèi)部評審除了內(nèi)部評審委員 會還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請評審內(nèi)容關(guān)聯(lián)同事,比如“消息中心” UI評審跟另外一位同事負(fù)責(zé)的“討論消息”有關(guān)聯(lián),則需要邀請這位同事一起評審,以便發(fā)現(xiàn)關(guān)聯(lián)問題,整體考慮設(shè)計方案。

            以上參與評審機(jī)制明確在團(tuán)隊內(nèi)部協(xié)作工具上,做到人人清楚。另外,對于評審建議,要做到有 記錄、有回應(yīng)、有跟蹤,確保有效發(fā)揮了內(nèi)部評審的價值。

             

             

             

             

            UI設(shè)計師的能力模型:不言而喻,UI設(shè)計師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對于設(shè)計師能力培養(yǎng)通道上,我 們引入了以下模型。

             

             

             

             

            我們將UI設(shè)計師能力歸納成了3x3能力矩陣。這可以設(shè)計師在工作中也可以有目的提升自身薄弱環(huán)節(jié),同時也讓企業(yè)對UI設(shè)計師的要求更加清晰,除此之外,我們要求UI設(shè)計師也需要多了解業(yè)務(wù)和前端知識,往前多走一步,跟上下游角色更好的銜接,一方面,UI設(shè)計師需要理解業(yè)務(wù),要能夠有半個產(chǎn)品經(jīng)理的業(yè)務(wù)知識儲備, 如果能站在更高的行業(yè)視角對自己所服務(wù)的業(yè)務(wù)領(lǐng)域(向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進(jìn)一點)有一定的理解是更好的了,另外一方面,UI設(shè)計師跟自己的下游-前端 開發(fā)工程師也需要很好的銜接上,知道相關(guān)前端技術(shù)概念、基本頁面布局和交互實現(xiàn)邏輯、方法,能夠無縫地將界面和交互設(shè)計翻譯成前端可理解的語言。

             

             

             


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

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

            日歷

            鏈接

            個人資料

            存檔

            主站蜘蛛池模板: 亚洲日韩电影久久| 一本色道久久综合熟妇| 毛茸茸亚洲孕妇孕交片| 又黄又爽又高潮免费毛片| www.午夜| 亚洲人成网站18禁止人| 久久精品国产亚洲αv忘忧草| 精品国产一区二区三区四| 亚洲国产av精品一区二区蜜芽| 少妇高潮潮喷到猛进猛出小说| av最新高清无码专区| 蕾丝视频污| 91密桃精品国产91久久| 亚洲 欧美 国产 动漫 综合| 一本到无码av专区无码| 日韩不卡视频在线观看| 久激情内射婷内射蜜桃| 大陆国产乱人伦| 影音先锋啪啪| 国产精品国产精品偷麻豆| 另类 亚洲 图片 激情 欧美| 99福利资源久久福利资源| 操处女逼视频| 成在人线av无码免费漫画| 可以免费看av的网站| 午夜在线不卡| 无码国模国产在线观看| 久久久噜噜噜久久熟女| 色窝av| 国产真人无遮挡免费视频| 国产福利社区一区二区| 巨茎爆乳无码性色福利| 91在线精品秘密一区二区| 男男车车的车车网站w98免费| 国产成人一区二区三区别| 人妻熟女αⅴ一区二区三区| 国产成人av在线| 欧美精品大片| 18禁成人网站免费观看| 精品日产一卡2卡三卡4卡自拍| 五月婷婷色综合|