상세 컨텐츠

본문 제목

(Updated) 모바일 UI 디자인 패턴 참고 사이트 20개 총정리

pRODUCT dESIGN

by 몬스터디자인 2013. 1. 20. 16:55

본문

0) 구글에서 제공하는 안드로이드 공식 디자인 사이트 : 안드로이드 UI에 대한 모든게 다 있다고 보면 된다. http://developer.android.com/design/index.html


1) 모바일 디자인 패턴 갤러리 : 동명의 책과 연계된 사이트, 책과 관련된 다양한 슬라이드와 각종 스텐실도 공유하고 있다. http://www.mobiledesignpatterngallery.com/mobile-patterns.php


2) 안드로이드 인터랙션 디자인 패턴스 : 무엇보다 자세한 설명이 굿~
http://www.androidpatterns.com


3) Inspired UI : 패턴 스크린샷이 가장 많다. http://inspired-ui.com


4) Mobile - Patterns : UI 패턴별 iOS 어플리케이션 스크린샷 모음 http://www.mobile-patterns.com


5) Mobile Patterns : 4번과 이름이 동일한 패턴 스크린샷 모음 사이트 
http://www.mobilepatterns.com


6) pttrns : 돋보기 기능으로 다른 패턴 사이트들과 차별화에 성공했다. http://pttrns.com


7) 안드로이드 pttrns : 6번 pttrns 사이트와 동일한 구조로 안드로이드 UI패턴을 제공한다. http://androidpttrns.com





8) 코코아 콘트롤스 : 다양한 커스텀 UI 콘트롤을 공유하고 판매한다. 
http://www.cocoacontrols.com


9) Patterns of Design : iPad UI 패턴도 볼 수 있다. http://www.patternsofdesign.co.uk


10) iOS Developer Library > Human Interface Guidelines : 애플 공식 iOS 디자인 가이드라인 https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556-CH1-SW1

--> 한글 번역 사이트 : http://www.xgenesis.org/index.php?mid=iOS_Human_Interface_Guidelines&act=dispWikiTreeIndex


11) 러블리 UI : 분류가 좀 더 세분화되어있다. http://www.lovelyui.com


12) UI Parade : 패턴도 다양하지만, 유용한 라이브툴도 제공한다. http://www.uiparade.com


13) 4ourth mobile patterns wiki : 일반 UI 패턴뿐만 아니라 하드키, 벨소리, 제스쳐, 햅틱 피드백, LED등 까지 무척 자세하게 설명하고 있다. http://4ourth.com/wiki/Index


14) 노키아 모바일 디자인 패턴스 wiki : 현재 98개 패턴 아티클 제공중...   
http://www.developer.nokia.com/Community/Wiki/Category:Mobile_Design_Patterns


15) UX Archive : 기능별, 카테고리별로 정리된 다양한 아이폰 앱 화면들을 볼 수 있다.
http://uxarchive.com/





★ 2014-02-19 추가


16) Android Niceties : 각종 안드로이드앱의 화면을 원하는 크기로 바꿔가며 볼 수 있다.
http://androidniceties.tumblr.com/


17) Pattern Tap : PC웹 화면의 다양한 패턴을 제공한다.
http://patterntap.com/


18) Little Big Details : 다양한 사례를 통해 깨알같은 UI 디테일들을 공유한다.
http://littlebigdetails.com/


19) Capptivate.co : 아이폰앱의 다양한 애니메이션효과를 그대로 볼 수 있다. (주의: PC느려짐)
http://capptivate.co/

관련글 더보기