色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

超全面的新擬態設計的詳細講解

焦點訊 ? 來源:焦點訊 ? 作者:焦點訊 ? 2022-02-09 14:44 ? 次閱讀

“新擬態設計之父”Alexander Plyuto在追波和ins上發布了一張作品后突然爆火,瀏覽超30W+,獲得眾多設計師的喜愛,并被追波收錄到2020設計趨勢預測里面。有設計師稱這種設計叫Neumorphism(新擬態)或者Soft UI(軟UI),之后新擬態就慢慢傳開了。

2020年2月11日舉行的三星視覺發布會也使用新擬態的設計手法,新擬態也被眾人所熟知。

新擬態設計風格的處理方式

從設計作品中可以看出,擬態設計主要特點就是在可點區域做了一些「浮雕」的效果。通過觀察,總結新擬態設計風格的處理方式有以下4點。

?左上角亮色投影,右下角深色投影(有且只有一個光源照射)

?元素與背景對比度比較弱

?常常用于按鈕組件和卡片

?按鈕狀態,視覺上凸出代表未選中,凹進去表示已選中狀態

擬態設計作品最大的一個特點就是有且只有一個光源照射。因此在進行設計時,可以想象在組件的左上方有一束光,斜著照射在組件上,導致左上角呈現亮色,右下角呈現深色投影。

因為新擬態的光源是唯一的,是從左上角照射的,所以就很容易理解,或者分析得到,左上角亮色投影,右下角深色投影。而這一基礎規律,不單單適用于新擬態風格的按鈕,它還適用于所有新擬態風格表現手法的視覺組件。可以看到下圖中,卡片、轉盤、按鈕,他們的受光面都是在左上角。

pYYBAGIDYsqASgTCAABLv73zVzU05.jpeg

為了加深對新擬態設計的更進一步了解,可以把它與UI設計師常用的另一種設計風格-扁平化做對比。

pYYBAGIDYsqADdRKAACiff2fzqc80.jpeg

以上圖為例,我們最常熟知的蘋果界面就屬于扁平化設計風格。它的外觀更簡單,同時又使其用戶易于理解。一直到今天,扁平化設計風格仍然是UI設計的標準。新擬態風格與扁平化風格完全相反,可以理解成“加高光、加漸變、加陰影”,其原理是為界面的UI元素賦予真實感,是一種具有流線感的設計風格,介于扁平與投影之間。

新擬態設計方法

說了那么多理論,相信大家已經完全理解新擬態設計風格了,那么就動手實操演示一下吧。

步驟1. 使用Pixso繪制畫板,選擇一個非純黑或非純白的背景顏色

背景顏色的選擇是新擬態設計中非常重要的一步,主要是為了區別之后需要表現的高光和陰影。我們可以在Pixso的畫板上繪制三個相同的形狀,中間的形狀填充上你想要的顏色,左側填充稍淺的顏色,右側填充稍深的顏色。然后將三個圖形居中,將淺色和深色圖層分別像左上和左下移動相同像素,得到三者重疊的圖形。為方便觀察,以顏色填充作為演示,實際應用中建議使用與背景色較為相近的顏色。

poYBAGIDYsuAM0-iAABt6RDuvQo821.png

步驟2.給圖層加上模糊和內陰影效果,具體步驟如下圖:

pYYBAGIDYsuAYOssAABZ5yUAQvg642.png

凹陷步驟則是將內陰影的高光和陰影位置互換,得到以下效果:

poYBAGIDYsuAQY1SAAB_iX7ticI610.png

以上就是快速制作新擬態設計作品的方法,技術方面,完全可以通過Pixso來實現。設計方面,適用于一些功能承載率要求不是很高的界面,比如登陸頁;更適用于智能家居等與新擬態形式比較近似的產品,像淘寶這樣的電商產品,要求頁面承載率比較高,商品內容也各式各樣,不太適合大面積使用新擬態。總之,新擬態風格是設計上非常好的嘗試和突破,但是若想要在UI設計中落地應用還有待優化和改善。

審核編輯:符乾江

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 設計
    +關注

    關注

    4

    文章

    818

    瀏覽量

    69888
  • ui
    ui
    +關注

    關注

    0

    文章

    204

    瀏覽量

    21369
收藏 人收藏

    評論

    相關推薦

    芯片封裝工藝詳細講解

    芯片封裝工藝詳細講解
    發表于 11-29 14:02 ?1次下載

    電感技術的講解

    詳細講解電感的原理及計算
    的頭像 發表于 09-06 02:07 ?2127次閱讀
    電感技術的<b class='flag-5'>講解</b>

    第12章-ADC采集電壓和顯示 基于STM32的ADC—電壓采集(詳細講解+HAL庫)

    第12章-ADC采集電壓和顯示 基于STM32的ADC—電壓采集(詳細講解+HAL庫)
    的頭像 發表于 08-21 16:31 ?2484次閱讀
    第12章-ADC采集電壓和顯示 基于STM32的ADC—電壓采集(<b class='flag-5'>詳細</b><b class='flag-5'>講解</b>+HAL庫)

    AT指令速通FTP:合宙Air780EP模塊詳細教程

    合宙Air780EP低功耗4G模組AT開發接入FTP詳細示例!
    的頭像 發表于 08-20 17:40 ?2495次閱讀
    AT指令速通FTP:合宙Air780EP模塊<b class='flag-5'>超</b><b class='flag-5'>詳細</b>教程

    神經擬態計算是如何降耗的

    自計算機問世以來,運算效能與能耗消耗兩大議題始終困擾著計算產業。在人工智能崛起的背景下,全球各地科研機構及相關公司積極探索提高處理器算力的新方法,神經擬態處理器即是一種創新嘗試。
    的頭像 發表于 06-07 15:35 ?681次閱讀

    用于制造紫外構表面的定制化高折射率納米復合材料

    納米壓印光刻(NIL)技術已被用于解決光學構表面(metasurfaces)的高成本和低產量的制造挑戰。為了克服以低折射率(n)為特征的傳統壓印樹脂的固有局限性,引入了高折射率納米復合材料直接用作構原子(meta-atoms)。然而,對這些納米復合材料的
    的頭像 發表于 05-09 09:09 ?594次閱讀
    用于制造紫外<b class='flag-5'>超</b>構表<b class='flag-5'>面的</b>定制化高折射率納米復合材料

    Nullmax旗下智能駕駛方案MaxDrive憑借全面的行泊一體優勢獲獎

    4月26日上午,由中國國際貿促會汽車行業委員會指導、汽車觀察主辦的「智輅獎?2024 中國汽車智能創新技術評選」在北京車展現場公布最終獲獎名單,Nullmax旗下平臺型智能駕駛方案MaxDrive憑借全面的行泊一體優勢獲獎。
    的頭像 發表于 04-28 14:24 ?480次閱讀
    Nullmax旗下智能駕駛方案MaxDrive憑借<b class='flag-5'>全面的</b>行泊一體優勢獲獎

    英特爾發布新一代神經擬態系統Hala Point,11.5億神經元,12倍性能提升

    基于英特爾Loihi 2神經擬態處理器打造而成,旨在支持類腦AI領域的前沿研究,解決AI目前在效率和可持續性等方面的挑戰。在英特爾第一代大規模研究系統Pohoiki Springs的基礎上,Hala
    的頭像 發表于 04-19 09:43 ?488次閱讀
    英特爾發布新一代神經<b class='flag-5'>擬態</b>系統Hala Point,11.5億神經元,12倍性能提升

    瑞薩電子擁有全面的產品組合,來支持工業以太網解決方案

    瑞薩電子擁有全面的產品組合,來支持工業以太網解決方案,從而提高工廠生產效率并降低生產成本。
    的頭像 發表于 03-27 13:38 ?575次閱讀

    楷登電子Cadence推出業界首個全面的AI驅動數字孿生解決方案

    中國上海,2024 年 3 月 22 日——楷登電子(美國 Cadence 公司,NASDAQ:CDNS)推出業界首個全面的 AI 驅動數字孿生解決方案,旨在促進數據中心的可持續發展及現代化的設計,標志著在優化數據中心能效和運營能力方面取得了重大飛躍。
    的頭像 發表于 03-22 11:38 ?729次閱讀

    基于三維面的聲學復眼裝置,可用于全向寬帶信號增強

    西安交通大學機械工程學院馬富銀教授課題組提出一種基于三維面的聲學復眼裝置。模仿對應多個方向的昆蟲復眼系統,將多個梯度折射率的亞波長平板表面聚焦透鏡在空間中組成球面陣列。
    的頭像 發表于 03-18 10:21 ?761次閱讀
    基于三維<b class='flag-5'>超</b>球<b class='flag-5'>面的</b>聲學復眼裝置,可用于全向寬帶信號增強

    基于構表面的拉普拉斯光學微分處理器可用于光學成像

    近日,北京理工大學黃玲玲教授團隊實現基于構表面的拉普拉斯光學微分處理器,可以激發對入射角度具有選擇性的環形偶極共振
    的頭像 發表于 03-04 09:24 ?1166次閱讀
    基于<b class='flag-5'>超</b>構表<b class='flag-5'>面的</b>拉普拉斯光學微分處理器可用于光學成像

    COMSOL Multiphysics在材料與表面仿真中的應用

    透射反射分析。此外,COMSOL Multiphysics還提供了豐富的物理場求解器,可以對面的光學性能進行詳細分析。 周期性面的
    發表于 02-20 09:20

    較為全面的倉庫溫濕度管理知識

    溫濕度管理是倉庫管理中的重要環節,它關乎著貨品質量的安全。同時,做好溫濕度管理更是訂單能夠及時履行的關鍵所在。很多倉庫管理人員大致了解一些關于溫濕度管理方面的知識,但還不夠全面。搜集總結一些有關倉庫
    的頭像 發表于 01-27 00:00 ?2156次閱讀
    較為<b class='flag-5'>全面的</b>倉庫溫濕度管理知識

    詳細講解Altium Designer 23的安裝教程

    在PCB設計中,軟件的安裝是我們邁出的第一步,接下來將詳細講解Altium Designer 23安裝教程。
    的頭像 發表于 01-09 10:02 ?9142次閱讀
    <b class='flag-5'>詳細</b><b class='flag-5'>講解</b>Altium Designer 23的安裝教程
    主站蜘蛛池模板: 午夜在线播放免费人成无| 国产人成无码视频在线观看| 在线免费看a| 亚洲视频免费| 亚洲大片免费看| 亚洲成人精品| 亚洲 欧美 日韩 国产 视频| 爽娇妻快高h| 无码AV免费精品一区二区三区| 色婷婷粉嫩AV精品综合在线| 热热久久超碰精品中文字幕| 人人碰国产免费线观看| 人人爽天天碰狠狠添| 妻子+免费观看完整| 欧美特级午夜一区二区三区| 男女啪啪久久精品亚洲A| 男同志在线观看| 欧美丰满少妇久久无码精品| 欧美人与善交大片| 青青青青草| 特级淫片大乳女子高清视频| 四房播播最新地址| 亚洲国产精品热久久| 亞洲人妻AV無碼在線視頻| 在线国产三级| 0855福利| YY600800新视觉理论私人| 动漫美女的阴| 国产色无码精品视频国产| 花蝴蝶hd免费| 老师在讲桌下边h边讲课| 欧美色图天堂网| 入禽太深视频免费视频| 亚州三级久久电影| 在线黑人抽搐潮喷| VIDEOSGGRATIS欧美另类| 国产AV精品白浆一区二| 国产一区二区内射最近更新 | 亚州AV人片一区二区三区99久| 亚洲精品AV中文字幕在线| 一本之道高清在线3线观看|