您現在的位置是:電腦技術吧?>? 編程技術 ??>??簡述app圖標尺寸設計規范,app視覺設計規范??>??正文詳情

簡述app圖標尺寸設計規范,app視覺設計規范

於綠蓉2019-11-18 17:10:35 人圍觀
簡介如何制作app圖標產品圖標網格形成了一個統一的標準,為圖形元素的定位建立了一套清晰的規則。這種標準化帶來了靈活和連貫的系統,以上是網格的基礎。可以單擊鼠標右鍵并保存用

產品圖標網格已經形成了一致的標準,且建立了一套明確的圖形元素定位規則。

這種標準化帶來了靈活,而連貫的系統。

  以上已經是全尺寸比例高寬網格圖可以右擊另存作為參考圖使用  網格

  關鍵線的形狀  關鍵線的形狀是網格的基礎。

利用這些核心形狀做為向導,即可使整個相關產品的圖標保持一致的視覺比例。

  方形  高寬: 152

  圓形  直徑: 176

  豎直矩形  高:176 寬:128

  水平矩形  高:128 寬:176  DP 單位網格  設備上的啟動器以 48dp 的尺寸顯示產品圖標 (邊緣 1dp),所以當你創建圖標時,請使用 48dp 的尺寸,必要時可將其放大 400% 到 192 x 192 dp (邊緣變位 4dp)。

  保持這樣的放縮比即可在尺寸在縮小時保持邊緣的鋒利和對齊的正確性。

  1:1 單元網格

  4:1 單元網格  幾何  我們為這幾種特定的關鍵線制定了預設規則:圓形線、方形線、矩形線、正交線和對角線。

這個通用且簡潔的元素調板形成的目的是統一產品圖標和規范它們在網格上的布置。

  為什么要這樣設計?以上右圖著名的視覺錯覺案例可以例證:  一樣長的線段不同的視覺表現產生不一樣的視覺感知,矩形的視覺感知面積相對大,所以相對網格線居中定格最小部分來設計來達到各種其他形狀樣式的圖標統一感。

  內容區域  內容應該保持在活動區域以內,如有必要,內容可以延展至修飾區域之中,但不能超出。

  活動區域

  修飾區域  關鍵線形狀  關鍵線形狀是網格的基礎,通過關鍵線,即可保持系統圖標的一致性。

  方形  寬高:18px

  圓形  直徑:20px

  豎直矩形  高:20px, 寬:16px

  豎直矩形  高:20px, 寬:16px  幾何  我們為這幾種特定的關鍵線制定了預設規則:圓形線、方形線、矩形線、正交線和對角線。

這個通用且簡潔的元素調板形成的目的是統一 Google 系統圖標和規范它們在網格上的布置。

  構建

  組成  系統圖標剖析  筆劃末端  角  留白  筆觸  內部角  邊界區域

  角  一致的圓角半徑(2px)是統一全系列系統圖標的關鍵,不要修改它。

  圖標內部的角應為直角,也不要修改它。

  外部角

  ?部角  筆觸  一致的畫筆寬度(2px)也是統一全系列系統圖標的關鍵,請在內外部的邊角上保持使用2px的寬度。

  一致

  折線和角

  筆劃末端

  內部角  視覺校正  極端情況下必要的校正能夠增加圖標的清晰度。

如有必要,需與其他圖標保持一致的幾何形狀,不要加以扭曲。

  復雜

  縮小  清空  為了可讀性和觸摸操作的需要,圖標周圍可以留有一定的空白區域。

  清空區域

  放置  ----------------------------------------------------------------------------------------------  最佳范例  一致的圖標可以有利于用戶理解,在不同應用中也盡量使用已有的系統圖標。

  (上圖)可取  使用相同的畫筆寬度以及方形的筆劃末端。

  (上圖)不可取  不要使用不相同的畫筆寬度以及非方形的筆劃末端。

  (上圖)可取  讓圖標顯得正面且堅定。

  (上圖)不可取  不要傾斜、旋轉圖標,或是讓圖標顯得立體。

  (上圖)可取  簡化圖標使其更具清晰度和可讀性。

  (上圖)不可取  不要過度擬物化使得圖標復雜。

  (上圖)可取  讓圖標更加幾何化而變得更加顯眼。

  (上圖)不可取  不要過度精細,使用過細畫筆寬度。

  (上圖)可取  使用一致的幾何形狀。

  (上圖)不可取  不要使用過于松散的形狀。

  (上圖)可取  讓圖標在像素點上(X、Y 坐標值不包含小數)。

  圖標應有相等的寬高(e.g. 24x24),避免扭曲。

  (上圖)不可取  圖標不在像素點上。

  寬高不等。

版權聲明:本文由 於綠蓉 整理編輯。

原標題:app啟動圖標設計規范,2018app設計規范

轉載注明出處:http://www.dn9ww09s.icu/program/13567.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • cue文件是什么,cue文件是什么意思

    cue文件是什么,cue文件是什么意思 相關圖片生成cue文件是什么意思這里我們所說的線索不是臺灣綜藝節目中的口頭語言,而是指CD-ROM圖像(圖像)輔助文件或標記文件,稱為CuSeHET。提示文件不僅可以減少錄制的準備工作,提高錄...

  • 全民k歌哪個模式好聽,全民k歌練唱評價順序

    全民k歌哪個模式好聽,全民k歌練唱評價順序 相關圖片全民k歌唱歌技巧我想每個喜歡唱歌的人都用過全國性的卡拉OK。你知道怎么唱好國歌嗎?如何開始合唱?現在,跟著超人軟件來了解一下民族k歌的相關內容,希望大家都喜歡全民k歌vi...

  • 落葉飄飄像,落葉飄飄

    落葉飄飄像,落葉飄飄 相關圖片秋風蕭瑟落葉飄飄本教程主要使用焰火制作落葉效果落葉飄飄落葉在笑...

  • 抖音的相機是什么相機,抖音相機

    抖音的相機是什么相機,抖音相機 相關圖片抖音同款相機樓層攝像機是近年來自助餐廳推出的一項新功能。我相信很多用戶還是不知道自助餐故事相機是什么?怎么玩?然后,超人軟件編輯將為您帶來自助故事相機的相關介紹。...

  • 事件,紀湘事件

    事件,紀湘事件 相關圖片407事件HTML 5畫布事件處理引入了DOM是web前端領域非常重要的一部分。DOM不僅用于處理HTML元素,還用于圖形編程。例如SVG繪圖,各種圖形都以DOM節點的形優衣庫事件完視頻...

  • 藍牙的最大傳輸距離,藍牙在水中傳輸距離

    藍牙的最大傳輸距離,藍牙在水中傳輸距離 相關圖片藍牙傳輸在WiFi出現之前,藍牙是應用最廣泛的無線連接功能。即使在如今的WiFi時代,有了藍牙可穿戴設備,這項功能在手機中仍然扮演著非常重要的角色。藍牙耳機、運動手鐲等藍牙連...

  • 無線網絡被禁用啟用失敗,ccleaner官網怎么下載

    無線網絡被禁用啟用失敗,ccleaner官網怎么下載 相關圖片你沒有首選無線網絡 win10配置無線網絡時,有時無線適配器或訪問點有問題。有些用戶不知道如何解決。當你遇到這種情況時,你不必擔心。您通常可以通過排除故障并遵循相應的解決...

  • 卡通動畫,卡通人物有哪些

    卡通動畫,卡通人物有哪些 相關圖片動畫可愛人物動畫分析:1。眉毛是固定的,只占一層;2。睜眼和閉眼的時間間隔:本例中,從睜眼到閉眼總共有20幀,閉眼10幀,睜眼5幀,從睜眼到閉眼3的動畫過程有5幀。注意眼睛漫...

  • 抖音后期自己配音,抖音里配音的圓圈怎么弄

    抖音后期自己配音,抖音里配音的圓圈怎么弄 相關圖片抖音上的siri配音自助餐作為一種流行的手機短視頻拍攝應用,受到了很多人的喜愛。最近,有很多用戶想知道如何配音和編輯視頻。現在,超人軟件會給你帶來震動的聲音抖音怎么自己...

  • 如何制作導航條,導航條的制作

    如何制作導航條,導航條的制作 相關圖片ps導航條制作教程一。首先,創建一個1x6表,參數為:border=0cellpacking=3cellpadding=0;2。在表格的每個單元格中插入寬度和高度設置為100%的dreamweaver制作導航條...

熱評文章

  • 電腦磁盤碎片整理有什么用,win10磁盤碎片整理有什么用

    電腦磁盤碎片整理有什么用,win10磁盤碎片整理有什么用 相關圖片win7碎片整理有什么用當電腦在一段時間后有點卡住時,我們通常聽到人們說最好清理磁盤垃圾,并對磁盤碎片進行一些清理。由于電腦配有360或保安管家,電腦垃圾往往會自動清理。但...

  • 華為mate10和華為p10對比,華為mate9與p10的區別

    華為mate10和華為p10對比,華為mate9與p10的區別 相關圖片mate9pro和p10哪個好雖然mate10和P10都是華為的產品,但在價格和定位上都有所不同。哪一個更好取決于自己的需求價格是不同選擇的最大原因,華為P10 4GB內存和64內存華為p10plus和mate9...

  • textarea回車換行,textarea不能回車換行

    textarea回車換行,textarea不能回車換行 相關圖片textarea內容回車實現換行注意:文本區域值中的返回換行代碼如下:%=內容值%。更換(RN,)。替換(n,)%textarea輸入換行...

  • bt 下載種子鏈接,什么叫bt種子文件

    bt 下載種子鏈接,什么叫bt種子文件 相關圖片迅雷種子下載什么意思BT種子是一種基于P2P原理的下載方法。下載的人越多,速度就越快!P2P是點對點的傳輸。您的下載需要另一臺機器來提供服務,它將通過點對點傳輸來傳輸您需要下...

  • ad9鼠標跟隨,鼠標跟隨特效代碼

    ad9鼠標跟隨,鼠標跟隨特效代碼 相關圖片flash怎么做鼠標跟隨本教程是flash創建的基礎課程,主要包括工具的使用、顏色的使用和修補形狀的制作。代碼部分沒有說明打開flash,設置文檔屬性大小:寬1024,高768,背景:鼠標跟隨...

  • 全民k歌一鍵制作mv,全民k歌制作照片視頻

    全民k歌一鍵制作mv,全民k歌制作照片視頻 相關圖片全民k歌怎么換滾動照片作為國家級卡拉OK軟件,國家級卡拉OK不僅可以唱歌,還可以制作MV和發行專輯。那么如何為國歌制作MV呢?如何制作國歌專輯?現在,讓我們來學習一下超人軟件...

  • 三年級知識點歸納總結,九年級英語知識點歸納總結

    三年級知識點歸納總結,九年級英語知識點歸納總結 相關圖片初三數學知識點歸納一。字體是什么?字體是文本的外部形式。這是文本的風格。這是課文的大意。例如,行書、楷書和草書都是一種字體。每個人都可以用不同的方式寫同一個詞。可...

  • 雷神加速器暫停規則,雷神加速器忘關了怎么辦

    雷神加速器暫停規則,雷神加速器忘關了怎么辦 相關圖片雷神加速器關機會自動暫停嗎雷神加速器以其小巧穩定的內存受到了眾多游戲玩家的喜愛,但很多上班族并沒有時間每天都玩游戲。如果加速器可以暫停,它可以節省很多成本。那么雷...

  • 第一彈app怎么下載,第一彈里的資源怎么下載

    第一彈app怎么下載,第一彈里的資源怎么下載 相關圖片第一彈下載的視頻不見了作為一種以強大資源和動畫為主題的社交傳播軟件,最近,很多小伙伴都表示想知道如何下載第一顆子彈?如何為第一顆子彈找到資源?現在,讓我們跟隨超人...

  • 表格,簡單的統計表格

    表格,簡單的統計表格 相關圖片...

關注微信

变脸官网查询