• <strong id="7actg"></strong>
    1. 

      <table id="7actg"></table>
      

      3. <address id="7actg"></address>
      <address id="7actg"></address>
        4. <object id="7actg"><tt id="7actg"></tt></object>
        網(wǎng)頁設(shè)計(jì)中的圖標(biāo)
        共
                3352字，需瀏覽
                    7分鐘
                
         ·
        2021-04-12 10:12
        
                    

                    
                    
                    
                    
        英文 | https://medium.com/outcrowd/icons-in-web-design-824f57cb2db0
        翻譯 | web前端開發(fā)

        有一些用戶不喜歡的圖標(biāo)。他們說圖標(biāo)不清楚，難看或根本無法解釋他們想要表達(dá)的意思或者喜歡的東西。原因很簡單，在此類圖標(biāo)中，違反了其構(gòu)造的一項(xiàng)或多項(xiàng)基本原則。
        今天，我們在本文中，將幫助你避免錯誤并創(chuàng)建用戶肯定喜歡的圖標(biāo)。這些原則與網(wǎng)站和應(yīng)用程序圖標(biāo)都相關(guān)，并且可以應(yīng)用于所有類型的圖標(biāo)。
        讓我們從一些基礎(chǔ)知識開始。網(wǎng)頁設(shè)計(jì)中的圖標(biāo)只是很小的元素，而不是重要性的。只需要它們來指示信息。這些是視覺錨點(diǎn)，有助于吸引用戶的注意力并指導(dǎo)他們執(zhí)行目標(biāo)明確的動作。
        圖標(biāo)有助于：
        • 吸引眼球;
        • 了解含義；
        • 瀏覽界面；
        • 節(jié)省視覺空間；
        • 與用戶建立聯(lián)系。
        圖標(biāo)的使用并不像乍看起來那樣容易，它需要設(shè)計(jì)能力和周到的方法。（最好由單獨(dú)的專家來處理圖標(biāo)。）
        一些設(shè)計(jì)師最大的擔(dān)心是他們的圖標(biāo)看起來是否整潔，是否正確居中以及像素是否完美匹配。他們根據(jù)公式對齊元素，但忘記了最重要的事情。就是創(chuàng)建每個人都喜歡的圖標(biāo)的最重要的原則是什么？
        下面我們一起來看看。
        1、簡單性原則
        用戶不喜歡復(fù)雜的東西。
        一個好的圖標(biāo)應(yīng)該簡單易讀。它不需要文字說明。你就可以通過非設(shè)計(jì)人員來測試該圖標(biāo)。如果他們沒有猜到它的大致含義，則此圖標(biāo)可能有問題。
        簡單性的主要敵人：
        1）、多余的元素
        2）、不必要的細(xì)節(jié)
        它們阻礙感知，分散用戶注意力并使其迷惑。通常，圖標(biāo)包含的元素越少越好。具有3種或更多種顏色的圖標(biāo)不再是象形文字，而是插圖。
        元素和顏色強(qiáng)調(diào)的堆積使圖標(biāo)在視覺上沒有區(qū)別和模糊：
        過多的細(xì)節(jié)并不能使圖標(biāo)更清晰，但是相反，它使你難以感知：
        許多強(qiáng)調(diào)小的元素也應(yīng)該考慮它的簡單性。
        3）、考慮細(xì)節(jié)
        圖標(biāo)的細(xì)節(jié)應(yīng)該合理。
        不要以為細(xì)節(jié)是一種邪惡，而“設(shè)計(jì)中的魔鬼”是Web設(shè)計(jì)師發(fā)明的。任何細(xì)節(jié)都會使圖標(biāo)變得復(fù)雜。但是，如果它符合設(shè)計(jì)概念并且是專業(yè)制造的，則是合理的。
        例如，你的目標(biāo)是使用戶狹窄地查看圖標(biāo)，以便他們在頁面上停留一段時間。那么細(xì)節(jié)就說得通了。在大多數(shù)情況下，用戶不會傾向于睜大眼睛，也無法即時“閱讀”復(fù)雜的圖標(biāo)。
        頁面上不應(yīng)該有很多詳細(xì)的圖標(biāo)。不要將它們彼此靠近。它們的背景必須是唯一的顏色，并且調(diào)色板要有限。
        對于初學(xué)者，我們不建議從詳細(xì)的圖標(biāo)開始。他們的創(chuàng)作需要扎實(shí)的經(jīng)驗(yàn)，藝術(shù)品味和精通能力。
        2、即時傳達(dá)
        用戶不喜歡他們不了解的事物。
        不清楚的圖標(biāo)需要“解密”，用戶不喜歡它。如果圖標(biāo)沒有任何意義，這也是一個很大的缺點(diǎn)。圖標(biāo)的主要目的是即時傳達(dá)信息。
        因此，我們的任務(wù)是刪除所有阻止其執(zhí)行此操作的不必要的東西。
        1）、簡化的好壞
        用戶不喜歡界面元素，甚至不屑一顧。因此，圖標(biāo)必須易于“閱讀”，這一點(diǎn)非常重要。圖標(biāo)的識別取決于其簡單性，可理解性和隱喻性。但是，有不同類型的簡單性。簡單不能保證清晰。你可以簡化圖標(biāo)以至于無法識別。
        過度簡化或相反，表格過于復(fù)雜會使用戶不清楚圖標(biāo)。
        不要認(rèn)真對待“固體圖標(biāo)更易于閱讀”的建議。任何設(shè)計(jì)良好的圖標(biāo)都易于閱讀。
        2）、尺寸
        元素的大小也會影響圖標(biāo)的識別。圖標(biāo)中的小元素越多，就越難理解它所代表的含義。
        制作不佳的圖標(biāo)的示例：
        第一個圖標(biāo)的形狀沒有引起必要的關(guān)聯(lián)，并且小的元素妨礙了其識別性。這些元素的大小與其他兩個圖標(biāo)的大小不對應(yīng)，線寬和顏色也不同。
        這違反了風(fēng)格上的統(tǒng)一，缺少適當(dāng)?shù)碾[喻，過多的小元素。所有這些都是圖標(biāo)“難以辨認(rèn)”的原因。
        3）、隱喻的清晰度
        好的圖標(biāo)對于不同文化，年齡和背景的人來說都是普遍的。但是，你應(yīng)該研究目標(biāo)受眾，并選擇最適合該人群并可以理解的顏色和隱喻。
        適當(dāng)?shù)碾[喻可確保圖標(biāo)清晰且內(nèi)容豐富。
        這些隱喻甚至對于孩子來說也應(yīng)該是很清楚：
        這是一個令人困惑的圖標(biāo)示例：
        用戶不喜歡毫無意義的東西。
        在富有創(chuàng)意的爆發(fā)中，設(shè)計(jì)師喜歡創(chuàng)造美麗卻毫無意義的元素。這種方法剝奪了圖標(biāo)的主要功能：即刻傳達(dá)信息。
        但是，有時圖標(biāo)必須形象化一個復(fù)雜或抽象的概念，很難找到一個隱喻。在這種情況下，允許使圖標(biāo)抽象并使用文本傳達(dá)含義。我們案例中的一個例子：
        在這種情況下，圖標(biāo)是引人注目的錨點(diǎn)，而必要的信息則通過大字體的文本傳達(dá)。
        如果僅需要將圖標(biāo)用作平衡設(shè)計(jì)的視覺重點(diǎn)，并且文本提供了信息性，則可以使用不包含隱喻的圖標(biāo)。但是，即使在這種情況下，也希望找到合適的視覺關(guān)聯(lián)。
        3、風(fēng)格統(tǒng)一
        用戶不喜歡不和諧的事物。
        當(dāng)人們無法解釋他們對圖標(biāo)不滿意的情況時，就是這種情況。我們都在直覺上感到不和諧。和諧之路在于風(fēng)格的統(tǒng)一。
        風(fēng)格的統(tǒng)一表明圖標(biāo)設(shè)計(jì)與品牌風(fēng)格和設(shè)計(jì)理念相匹配。
        1）、品牌要求
        圖標(biāo)應(yīng)該反映出品牌的本質(zhì)和價值，不僅是視覺上的，而且是心理上的，都是其有機(jī)的組成部分。可以將品牌的風(fēng)格視為強(qiáng)硬或柔和，豪華或經(jīng)濟(jì)，正式或私密，精英或民主等。圖標(biāo)設(shè)計(jì)必須首先滿足品牌指示的要求。
        2）、設(shè)計(jì)要求
        樣式的統(tǒng)一假設(shè)一組圖標(biāo)的通用參數(shù)，例如：
        • 一致的調(diào)色板；
        • 圖形和典型的統(tǒng)一性（柵格或矢量，2D或3D，實(shí)體或輪廓）；
        • 大小相等；
        • 線寬相等；
        • 相等的視覺重量；
        • 元素的均等平衡；
        • 相同級別的細(xì)節(jié)；
        • 強(qiáng)調(diào)統(tǒng)一原則；
        • 節(jié)奏均勻，動感或靜態(tài)；
        • 相同的陰影（如果有）；
        • 符合徽標(biāo)風(fēng)格和整體設(shè)計(jì)理念；
        • 字體的視覺對應(yīng)。
        設(shè)計(jì)師通常必須使用Web上現(xiàn)成的收藏夾中的圖標(biāo)或?qū)⑵渥鳛榛A(chǔ)。但是，該集合可能沒有必要的圖標(biāo)，因此有必要自己創(chuàng)建它們。一個常見的錯誤是你的“自己的”圖標(biāo)與集合略有不同。原因是違反了上述一個或多個統(tǒng)一性參數(shù)。
        以相同樣式制作的圖標(biāo)：
        風(fēng)格的統(tǒng)一不僅是對品牌風(fēng)格的美學(xué)和支持的致敬。樣式的一致性使圖標(biāo)的感知更加容易，簡化了導(dǎo)航，并為用戶帶來了良好的體驗(yàn)。
        4、獨(dú)特性
        有兩種類型的唯一性-圖標(biāo)集的唯一性和每個單獨(dú)圖標(biāo)的唯一性。
        1）、集合的獨(dú)特性
        第一類唯一性幾乎不需要任何解釋。這種設(shè)計(jì)允許將一組圖標(biāo)與許多相似的圖標(biāo)區(qū)分開，以使其特別，有趣且令人難忘。圖標(biāo)的獨(dú)特性有助于品牌的獨(dú)特性。
        唯一性并不意味著你需要創(chuàng)建世界尚未見過的圖標(biāo)。你沒有必要這樣，把一個大家都不太熟悉的圖標(biāo)創(chuàng)造出來，而是在現(xiàn)有的圖標(biāo)上進(jìn)行創(chuàng)新。
        互聯(lián)網(wǎng)用戶已經(jīng)習(xí)慣了某些標(biāo)準(zhǔn)和刻板印象，打破它們并不是一個好的選擇。這些陳規(guī)定型觀念限制了創(chuàng)造力，但它們使UI元素可預(yù)測和可理解。人們不應(yīng)該費(fèi)力地去理解自己所看到的東西，而浪費(fèi)時間解決重路。
        使用每個人都熟悉的圖標(biāo)，但使它們的視覺實(shí)現(xiàn)獨(dú)特。用戶不想破譯謎語。
        具有獨(dú)特實(shí)現(xiàn)的簡單圖標(biāo)（貼紙）：
        2）、圖標(biāo)的唯一性
        圖標(biāo)的唯一性應(yīng)理解為與集合中的圖標(biāo)不同。為了追求統(tǒng)一，設(shè)計(jì)師有時會犧牲最重要的東西-圖標(biāo)的含義。不應(yīng)忘記統(tǒng)一和單調(diào)遠(yuǎn)非同一回事。每個圖標(biāo)都有其自己的用途。（現(xiàn)代圖標(biāo)設(shè)計(jì)師的口號是EIM-每個圖標(biāo)都很重要。）
        用戶無法欣賞或理解帶有視覺上無法區(qū)分的圖像的精美套裝。人們感到尷尬，無法將一個圖標(biāo)與另一個圖標(biāo)區(qū)分開。
        “統(tǒng)一”并不意味著“相同”！
        具有視覺上相同的元素的設(shè)計(jì)示例（保持樣式的統(tǒng)一）：
        5、視覺平衡
        這是第3點(diǎn)“風(fēng)格的統(tǒng)一”的特例，但值得特別提及。
        視覺上不平衡的圖標(biāo)是用戶乍一看不喜歡的圖標(biāo)。人們幾乎不看圖像就能直觀，立即感覺到不平衡。元素對齊中的錯誤也指平衡干擾。但是，盡管元素對齊的重要性非常重要。
        但對齊的微小不規(guī)則并不是圖標(biāo)在視覺上令人不快的主要原因。在許多情況下，對準(zhǔn)和對中誤差不是造成不平衡的原因。
        由于形狀和顏色強(qiáng)調(diào)的不一致性，破壞了平衡。
        這是吸引用戶眼球的第一件事，而不是一個或兩個像素移動一個元素。
        總結(jié)
        設(shè)計(jì)師非常了解圖標(biāo)有許多要求。因此，他們準(zhǔn)備無休止地改進(jìn)它們，拋開每個細(xì)節(jié)并計(jì)算每個像素不說。我只想說，如果違反了創(chuàng)建圖標(biāo)的基本原則，那么這些努力將毫無意義。即以下內(nèi)容：
        • 簡潔明了；
        • 隱喻性（信息的明確性）；
        • 風(fēng)格的統(tǒng)一（視覺和諧統(tǒng)一）；
        • 設(shè)計(jì)的獨(dú)特性和每個圖標(biāo)的個性；
        • 視覺平衡。
        遵循這些原則可以確保你的圖標(biāo)清晰，美觀和實(shí)用。這意味著每個人都將會喜歡這些圖標(biāo)！
        感謝閱讀。
        學(xué)習(xí)更多技能
        請點(diǎn)擊下方web前端開發(fā)


        
                
        瀏覽
                    63
        點(diǎn)贊
    
        評論
    
        收藏
    
        分享
        
        手機(jī)掃一掃分享
        分享
    
        
        舉報(bào)
    
        評論
        圖片
        表情
        推薦
        
        點(diǎn)贊
    
        評論
    
        收藏
    
        分享
        
        手機(jī)掃一掃分享
        分享
    
        
        舉報(bào)
    
        

          2. <strong id="7actg"></strong>
        1. 

          <table id="7actg"></table>
          

          3. <address id="7actg"></address>
          <address id="7actg"></address>
            4. <object id="7actg"><tt id="7actg"></tt></object>
            
91成人免费电影片
|
爱爱内含光无删减床戏
|
欧美黑人操逼纲站
|
777色色色
|
伊人黄色片|
国产精品久久久久电影
|
国产特黄大片aaaa毛片
|
国产性生活毛片
|
护士爽躁多水快深小说
|
狠狠色伊人亚洲综合网
|