<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    2. 

    <del id="afajh"><form id="afajh"></form></del>
    

    5. 

        1. <th id="afajh"><progress id="afajh"></progress></th>

          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>
          網(wǎng)頁設計中的圖標
          共
                3352字，需瀏覽
                    7分鐘
                
           ·
          2021-04-12 10:12
          
                    

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

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


          
                
          瀏覽
                    63
          點贊
    
          評論
    
          收藏
    
          分享
        
          手機掃一掃分享
          分享
    
          
        舉報
    
          評論
          圖片
          表情
          推薦
        
          點贊
    
          評論
    
          收藏
    
          分享
        
          手機掃一掃分享
          分享
    
          
        舉報
    
          

          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            2. 

            <del id="afajh"><form id="afajh"></form></del>
            

            5. 

                1. <th id="afajh"><progress id="afajh"></progress></th>

                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  

学生妹看毛片
|
成人无码免费
|
成人性生活影视av
|
婷婷精品AV
|
人人操人人爱人人射
|