黑色是一種具有多個不同文化意義的顏色，總帶有一種蘊藏的神秘感。黑色一直處于時尚的前沿，且永遠都是經典不過時的權威代表。黑色也一直是設計師重點關注的色彩。當黑色遇見明亮的充滿生機的元素時會更加完美地展現它所具有的力量，設計師們也會經常在作品中使用對這種鮮明的對比，比如黑色和黃色，黑色和亮藍，以及其他等等。以下是這種方法在app中的運用，看看能不能幫你獲得些許靈感：
本文標簽: 作品, 欣賞, 界面設計, 顏色
-
- 推薦
- 熱門
- 隨機
-
如何通過練習提升自己？
寫在前面 經常遇到很多伙伴咨詢如何去提升專業、練習應該怎么去做、靈感從哪里來等等問題。結合這些問題總結和梳理了一下自己的點滴經驗，希望能幫助到大家，與之共勉。 本文的目的是給剛入行的新人分享個…
-
iPhone X的壁紙居然是這樣制作出來的
每當蘋果公布新的壁紙，總會有人或者手機廠商去模仿蘋果家的壁紙，因為他家的壁紙是真的好看啊。今天我們來學習一下最新的iPhone8和 iPhone x的壁紙是怎樣做出來的？ 值得注意的是，…
-
三分鐘搞清iPhone X 設計尺寸和適配
被iPhone X刷了一天屏，到下午實在受不了各種標題寫著“iPhone X 適配、指南、設計稿” 內容卻是發布會回顧和手機介紹的標題黨。索性自己寫一篇只針對iPhone X適配的貼子，與適配無關的內…
-
從設計指南說起，詳解iOS系統組件分類體系
@Echo 由于iOS 和 Material Design的組件體系有些不一樣，所以關于組件的分類體系我會分iOS篇和Android篇來講解，本篇文章為iOS 篇。 對于大部分入門設計師及中級設…
-
20歲到30歲，設計師應該知道的真相
如果你關注過一些取得大成就的人，總會在他的成長故事中發現很多傳奇的經歷，比如少年時代的天賦異稟，或是30、40歲的大器晚成，為了做好某件事的廢寢忘食等等…然后摸摸自己的胸脯說，他們是天才，我只是個普通…
-
PS修圖會嗎？你是美工？還是設計師？
@Micu設計你是美工？還是設計師？你是合格的設計師嗎？ 設計工作中最基礎的修圖會嗎？找素材拼圖會嗎？ 如果這最基礎都不會，能稱自己是設計師嗎？能漫天要價嗎？ 如果有點職業道德，先學會最基礎的修圖，再談設計吧！ 一起看看別人是如何將圖片合成的！ 第1組:采集素材 完成設計： 第2組: 第3組: 第4組: 第5組: 第6組: 第7組: 第8組: 第9組: 第10組: 第11組: 第12組: 第13組: 第14組: 第15組: 第16組: 第17組: @Micu設計投稿，自 weibo
-
APP切圖那點事兒–詳細介紹android和ios平臺
從2011年開始接觸APP，到現在為止也做了幾個了，發現了一個共同點就是和每一個技術搭檔切圖的時候，會遇到不同的問題，因為技術的水平高低有限，所以他們要求你給切圖的時候也會不一樣，針對切圖后來我總結了一套規律分享給大家，希望互相學習~ 相關閱讀： 設計師需要掌握的圖片原理與優化技巧 Android設計中的.9.png 切圖小貼士 一.android版 在做android版本設計的時候，尺寸有很多種，這時我們要以一種尺寸為基準，那這個基準尺寸是480px*800px，設計圖完成之后就開始切圖了，我拿我之前設計的一張圖為例子講解下： ? 當看到上邊這張設計圖的時候，我們首先分析下應該給技術切哪些圖（為了避免以后少改動，建議切圖之前最好和技術先溝通下，怎么切）； 1、底部欄目的icon和背景： ? 這個一般有2種切法：（有默認和選中之后的效果） ? 2、頂部欄目的背景切圖： 由于頂部導航欄的是漸變樣式，所以切圖只需要切一小條，技術來平鋪拉伸就可以~（PS：如果是花紋背景，就必須切整條了，因為花紋切一小條就會被拉伸了~） 3、標注文字大小和行間距：（以這張圖為例子，我標注好了，請看下圖） 需要注意的： A：android主要有3種屏，即： QVGA和WQVGA屏density=120; HVGA屏density=160; WVGA屏density=240; B：apk的資源包中， 當屏幕density=240時使用hdpi標簽的資源 當屏幕density=160時使用mdpi標簽的資源 當屏幕density=120時使用ldpi標簽的資源； C：我們標注的是PX，但是技術的算法是DP，所以需要PX和DP進行轉化，PX和DP的轉化主要跟密度有關系，當密度density=160即（屏幕尺寸：320*480）時，1PX=1DP；當密度density=240即（屏幕尺寸：480*800）時，1PX=0.75DP；當屏幕的尺寸大于480*800的時候，密度都按照240計算即可；當密度density=120即（屏幕尺寸：240*320）時，這個現在幾乎沒有人用了，所以我也不知道轉化公式，如果您知道，可以留言告訴我啊~? 注意：因為我們做的是基于480*800尺寸的，大家都知道android的尺寸太多了，要想適配現在流行的尺寸，比如：640*960；720*1280等，唯一的解決辦法就是圖標可以根據不同尺寸各做一套，也就是圖標需要做480、640和720共3套圖標，不過如果你們的產品的要求不嚴格，做一套就可以，只不過是在大于480尺寸的屏幕上有些圖標被拉大變虛而已~ 二.ios版 在做ios版本設計的時候，尺寸有3種，分別是：320*480、640*960、640*1136；這時我們要以一種尺寸為基準，那這個基準尺寸是640px*960px，設計圖完成之后就開始切圖了，我拿我之前設計的一張圖為例子講解下： ? 當看到上邊這張設計圖的時候，我們首先分析下應該給技術切哪些圖（為了避免以后少改動，建議切圖之前最好和技術先溝通下，怎么切）； 1、底部欄目的icon和背景： ? 這個一般有2種切法：（有默認和選中之后的效果） ? 2、頂部欄目的背景切圖： ? 由于頂部導航欄的是多顏色的，所以只能切一整條給技術，商圈的圖標要單獨切出來 ? 3、二級標題欄目的切圖： … 繼續閱讀
-
初級設計師如何踏上自學之路（周陟設計隨筆）
周陟?（@UCDChina 深圳負責人、交互設計專業委員會（@IxDC）部長） ：我發現一個問題，大部分剛入行或者經驗不多的設計師在碰到問題的時候都喜歡”索取”，最好有個現成的東西放那兒給他供著。這暴露了我們設計師群體一個嚴重的現狀——自學能力的欠缺。 我上次提到設計師的三大素質（我自己覺得是這樣，也是招人的時候重點考察的），這次就專門聊聊自學能力的問題，與各位打拼靠自己的朋友共勉。 作者還有一篇很有意思的分享：普通UI設計師與頂級UI設計師的區別是什么？ 什么是設計師的自學能力？ 我們對自學能力的理解是從上學的時候建立的，但那個時候的”自學能力”相對單純，無非也就是如何通過自己看書、做題，復習到達熟練記憶，以便應付各種苛捐雜稅式的考試。 但進入設計行業后，這個自學能力不僅僅限制在”了解知識、復述知識”的范圍，設計師要學習各種軟件，學習如何尋找靈感，學習如何與客戶溝通，學習怎樣規劃自己的行業前景……這種交叉性的自學要求會成為很多人的屏障。并且，很難定義一個所謂的”自學能力”的量化目標。 就我個人理解，設計師的自學能力是使用合適的時間、方法、資源達到獨立的、正確的解決問題的能力。 如何才能有效的自學？ 你細心的話，應該注意到上面我的用詞，這些關鍵點就是有效自學的途徑。在設計這個行當，光努力是不夠的，我們不只是要強調效率，也要強調效能?；剡^來看，你們學校歷史中是不是總有那么幾個無論如何努力都始終分數不高的貨色？ 首先是合適的時間； 如果一件需要花時間的學習任務超出了你的時間成本，你就不應該去碰它，或者換一個更好的方式，比如：你現在是一個從事了8年平面設計的設計師，你覺得目前做動畫的收入高，你希望通過自學動畫，然后跨行到這個領域，那么未必是最好的選擇，首先你的8年的平面經驗幾乎沒有再升值的空間，其次作為一個新人，也許你還要3年的等待，好死不死，你的腦子不錯，等到你學有所成，動畫行業又是另一個新的天地了。 正確的方法是重要的； 方法不僅是你練習的方式，還有思考問題的方式，這里強調的是設計師快速發現問題的能力，只有準確的了解需要自學的領域的難度、行業標準、設計思路、應用形態，你才知道從何入手； 比如：你想自學網頁設計，并把網頁視覺設計師作為自己的職業發展，你就應該首先了解，一個網站的基本結構，每個結構需要哪些工作崗位，他們的職責有何不同，一個網站視覺設計師應該干什么，抓住重點（而不要一開始去學什么HTML代碼，那不是你最該關心的，我這話是說給某個朋友聽的）。 資源指的是任何能夠讓你了解到所需知識的平臺； 基礎的東西先看維基和google，然后去書店翻一翻行業著作，然后下載一些軟件的學習版知道你要使哪些工具，這些都是你的資源，如果湊巧你還能找到一些資深的從業人士咨詢就更好了，但是要提醒的是，別人沒有義務回答你，所以你先要準備好自己的問題。 獨立性決定了你在自學途徑中對自己的要求；你善于堅持的品質是你能夠成功通過自己的努力達到目標的前提條件，在你周圍沒有更多的資源可以利用的時候，你只能靠自己不斷的練習，思考。我發現要求很多設計師練習沒有問題，要求他們思考卻很難，自學的過程中，”想”永遠是最關鍵的。 自學不是萬能靈丹 你的性格不適合自學。這是正常的，有部分朋友他們的性格天生就是依賴性強，缺乏主見，在遇到困難的時候選擇逃避，那么這樣的性格想完全通過自學來達到一個”好高騖遠”的目標是不太可能的。你需要選擇一個付費的培訓機構或者老師，通過一些外部的壓力，讓你有所提高。 除了自學還應該參與交流。交流當然是重要的，通過交流可以達到解惑的效果，有個前提需要注意，你要和別人交流，別人也需要知道值得和你交流，因此你要有所儲備，交流既然是平等的也就需要基礎，別以菜鳥之心度老鳥之腹，既冷了場又露了怯。 自學的技術必須轉化為實際項目。你的自學有可能是為了自我提升，自我積累設計經驗，但如果是為了解決實際問題，那么你自學的成績就必須經過實際項目的檢驗，比如：你學習了一些新的交互設計的工作技巧，那么在你自己從事項目的時候你就應該爭取機會導入進去，否則到頭來，你也只是做了一嘴的好交互。 “人一定要靠自己”，說的不是拋棄階級感情和團隊協作，而是面對困難和障礙的時候，往往只有你自己才是靠得住的。缺乏自學能力的設計師，從性格與技能上都會落于下風，因此請不要讓自己”被飛”的日子來得太早。 原文出處：《閑言碎語：周陟設計隨筆》，感謝作者的無私分享，推薦童鞋們閱讀原著，受益無窮 : ）
-
iOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程
移動app開發中多種設備尺寸適配問題，過去只屬于Android陣營的頭疼事兒，只是很多設計師選擇性地忽視android適配問題，只出一套iOS平臺設計稿。隨著蘋果發布兩種新尺寸的大屏iPhone 6，iOS平臺尺寸適配問題終于還是來了，移動設計全面進入“雜屏”時代?？纯聪旅嫒頸Phone尺寸和分辨率數據就知道屏幕有多雜了。 加上Android生態中紛繁復雜的各種奇葩尺寸，現在APP設計開發必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設計稿解決適配大中小三屏的問題？設計和開發之間采用什么協作模式？一個基本思路是： 1、選擇一種尺寸作為設計和開發基準； 2、定義一套適配規則，自動適配剩下兩種尺寸； 3、特殊適配效果給出設計效果。 手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審核。先曬一下我們采用的協作模式，再慢慢說明原委。 第一步，視覺設計階段，設計師按寬度750px（iPhone 6）做設計稿，除圖片外所有設計元素用矢量路徑來做。設計定稿后在750px的設計稿上做標注，輸出標注圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子里切圖。 第二步，輸出兩個交付物給開發工程師：一個是程序用到的@3x切圖資源，另一個是寬度750px的設計標注圖。 第三步，開發工程師拿到750px標注圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發。此階段不能用固定寬度的方式開發界面，得用自動布局（auto layout），方便后續適配到其它尺寸。 第四步，適配調試階段，基于iPhone 6的界面效果，分別向上向下調試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配。 為什么選擇iPhone 6作為基準尺寸？ 當面對大中小三種屏幕需要適配的時候，很容易想到先做好一種屏幕，再去適配剩下兩種屏幕。第一個決定是到底以哪種屏幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準，基于幾個原因： 1、從中間尺寸向上和向下適配的時候界面調整的幅度最小。375pt下的設計效果適配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計，到320pt可能元素之間比例就不是那么回事了，比如圖片和文字之間視覺比例可能失調。 2、iPhone 6 plus有兩種顯示模式，標準模式分辨率為1242×2208，放大模式分辨率為1125×2001（即iPhone 6的1.5倍）?？梢姽俜较到y里iPhone 6和iPhone … 繼續閱讀
-
通俗易懂！全面的移動端尺寸基礎知識科普指南
初涉移動端設計和開發的同學們，基本都會在尺寸問題上糾結好一陣子才能摸到頭緒。我也花了很長時間才弄明白，感覺有必要寫一篇足夠通俗易懂的教程來幫助大家。從原理說起，理清關于尺寸的所有細節。由于是寫給初學者的，所以不要嫌我啰嗦。 現象 首先說現象，大家都知道移動端設備屏幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640×960, 640×1136, 750×1334, 1242×2208。 不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規律可循。 像素密度 要知道，屏幕是由很多像素點組成的。之前提到那么多種分辨率，都是手機屏幕的實際像素尺寸。比如480×800的屏幕，就是由800行、480列的像素點組成的。每個點發出不同顏色的光，構成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。剛好兩倍，然而兩款手機都是3.5英寸的。 所以，我們要引入最重要的一個概念：像素密度，也就是PPI（pixels per inch）。這項指標是連接數字世界與物理世界的橋梁。 Pixels per inch，準確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度，等于2.54厘米，大約是食指最末端那根指節的長度。像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。 倍率與邏輯像素 再用iPhone 3gs和4s來舉例。假設有個郵件列表界面，我們不妨按照PC端網頁設計的思維來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機其實是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。 在現實中，這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當1個像素使用。比如原本44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質卻更清晰。 在以前，iOS應用的資源圖片中，同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準備好，iOS會自己判斷用哪張，Android道理也一樣。 由此可以看出，蘋果以普通屏為基準，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達到了3倍）。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。 Android的解決方法類似，但更復雜一些。因為Android屏幕尺寸實在太多，分辨率高低跨度非常大，不像蘋果只有那么幾款固定設備、固定尺寸。所以Android把各種設備的像素密度劃成了好幾個范圍區間，給不同范圍的設備定義了不同的倍率，來保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。 如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，并賦予了相應的倍率： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] … 繼續閱讀
- 你應該掌握的移動APP的7種動效
您可能聽說過：好的設計是顯而易見的而優秀的設計是無形的。同樣的原理也適合于開發移動APP的動效：一個優秀的動效使您的APP便于使用并且抓人
- 如何打造一款成功的產品：以小為始，公聽并觀
如果你正著手打造自己的創業項目，那么通常會希望產品能盡快被用戶接受，并帶來實際的回報。這意味著你要以最小形態來發布產品，并確保用戶
- 你所需要知道的 VR 交互方式
交互設計發展史上的每一個重要里程碑，都源自技術和人性的碰撞。從最初的紙帶打孔，發展到鍵盤輸入、鼠標輸入，再到現在的觸摸操作，語音識
- 長投影制作教程+資源+案例大合集
隨著扁平化設計趨勢的日漸流行，尤其是在網絡世界里，接著脫穎而出的便是長投影的使用，特別是在小型UI元素和圖標上。這些陰影有著特征性的水
- DON’T BE ALONE！自由職業者與外界接觸聯系的6個方法
如果你是一個自由職業者，或者在家工作，那你一定很清楚地了解，在自己的小世界中是什么滋味。把自己困在工作室里，直到工作完成。也許你像
-
-
專題
-
-
