Olgoo Haye Tarahi Vaset Kar Bar PDF

www.DrStartup.
ir
www.StartupAcademy.ir
‫‪www.DrStartup.ir‬‬
‫‪www.StartupAcademy.ir‬‬
‫الگظ های فشاحی طاسك کاسةش ةشای ‪،iOs‬اصذسطیذ ط سایش سیسخو غانل ها‬
‫الگظهای فشاحی طاسك کاسةش‬

‫طیژى اةضاس های نظةایل‬
‫صظیسضذى ‪:‬حشصا صیل‬
‫ةا نلذنه ‪:‬جضیفش حذطل‬
‫حالیف ط حشجهه ‪ :‬نهذی غلیپظس سخاطی‬
‫الگظهای فشاحی طاسك های کاسةش طیژى اةضاسهای نظةایل‬
‫صناصی که صها ححد فضاس صیادی ةشای فشاحی یک طاسك کاسةشی نضاسث ‪،‬ةا نضظهای آساش ط کاسةش پسضذ ةشای یک نحغظل‬
‫صشم افضاسی ححد نظةایل هسخضیذ ‪،‬دیگش طكد ایط سا صذاسیذ که دطةاسى چشخ سا اخخشاع کضیذ !ایط کخاب یک ساهضهای‬
‫کاسةشدی ط غهلی اسد که دس آش‪ 7:‬الگظ ی فشاحی طاسك کاسةش ‪،‬ةشای فشاحی اصظاع اپلیکیضط های نظةایل اسایه صذى‬
‫اسد‪.‬ایط الگظها دس كالث ‪ 4::‬حغظیش اص صهظصه های نظفم ط طاكػی اص صشم های ‪Web ،BalckBerry ،Android،iOs‬‬
‫‪ Windows Mobile،OS‬ط اپلیکیضط های ‪ Symbian‬اسایه صذى اصذ‪.‬‬
‫حشصا صیل ‪ ،‬نخخغػ فشاح طاسك کاسةش ط کاسةشپزیشی ط صظیسضذى کخاب نػشطف فشاحی طاسك های کاسةشی طب‬
‫(‪ ) Designing Web Interfaces‬صها سا ةه یک سفش هیجاش اصگیض دس صنیضه فشاحی طاسك های کاسةشی دس نظةایلها ةا ‪0:‬‬
‫دسخه ةضذی نظؽظغی جذا گاصه خظاهذ ةشد! دس هش دسخه ةضذی ةه خقاها ط اصختاهاج سایج فشاحی اصاسى خظاهذ صذ ‪.‬اگش‬
‫صها فشاح ةشصانه های نظةایل هسخیذ ‪ ،‬یا ایذى های نظةایلی جذیذ سا پیادى ساصی نیکضیذ ‪ ،‬نیخظاصیذ اص ایط کخاب ط الگظ های‬
‫آش ةشای حل کشدش نسایل فشاحی خظد اسخفادى کضیذ! ایط الگظها ساى حل های نظسد اسخفادى ةضسگاش عضػد حظلیذ اپلیکیضط‬
‫های نظةایل هسخضذ !پس ةشای نسایل فشاحی خظد چشخ سا دطةاسى اخخشاع صکضیذ ! ایذى ةگیشیذ ط سشیؼ کاس سا پیط ةتشیذ !‬
‫الگظ های فشاحی دس دسخه های صیش اسایه نی صظصذ ‪:‬‬
‫‪ ‬پیهایط ةیط عفحاج (‪ : )Navigation‬الگظهای نشحتك ةا پیهایط اص عفحاج اطلیه ةه راصظیه سا ةتیضیذ !‬
‫‪ ‬فشم های طسطد افالغاج (‪ : ) Forms‬سطش های صا نضاسث فشاحی فشم های صا نضاسث‪ ،‬که نذج هاسد غادج‬
‫صشکد های صشم افضاسی اسد‪،‬سا کضاس ةگزاسیذ !‬
‫‪ ‬جذاطل ط لیسد ها (‪ : )Tables and Lists‬فلك نههخشیط ط کاسةشدی حشیط افالغاج سا صهایط دهیذ !‬
‫‪ ‬جسخجظ ‪،‬نشحث ساصی ط فیلخش کشدش (‪ : )Search,Sort,Filter‬ایط کاسها سا حا جاییکه انکاش داسد سادى ساصی‬
‫کضیذ!‬
‫‪ ‬اةضاس ها (‪ :)Tools‬ساههای ةهخشی ةشای حػانل نسخلیو ةا اةضاس ها سا اسایه دهیذ !‬
‫‪ ‬صهظداس ها (‪ : )Charts‬ةهخشیط الگظهای فشاحی ط ساهکاسهای نظفم اسایه صهظداس ها سا دس اپلیکیضط خظد یاد ةگیشیذ!‬
‫‪ ‬دغظج صانه (‪ : )Invitations‬صحظى دغظج کشدش اص کاسةشاش ط صشطع ةه کاس ط کضف اپلیکیضط سا ةتیضیذ!‬
‫‪ ‬کضخشل ها ط فیذةک ها (‪: ) Controls ,Feedback‬ةه کاسةشاش کهک کضیذ حا ةا ةشصانه حػانل داصخه ةاصضذ ط ةه آصها‬
‫دس صناش های نضاسث فیذةک های نضاسث سا ةذهیذ !‬
‫‪ ‬ساهضها (‪ : )Help‬ساهضهاهای نضاسث دس كالث اجضای فشم ها سا ةه کاسةشاش اسایه دهیذ !‬
‫صظشاج دیگشاش دسةاسى کخاب‬
‫ایط کخاب یک کاحالظگ کاسةشدی ط کاس ساى اصذاص اسد که نط ههیضه ةشای الهام گشفخط ایذى های فشاحی ةه آش سجظع نی‬
‫کضو!‬
‫ةیل اسکاج ‪ ،‬نذیش اسصذ فشاحی طب دس ‪Pay Pal‬‬
‫غالیه !‬
‫اسیط نالظش ‪ ،‬یکی اص ههکاساش ‪Tangible UX‬‬
‫یه حضکش سشیؼ ال سیش اص صظیسضذگاش ط اصخضاساج نشحتك ةا ایط کخاب داسم ‪ ،‬ایط کخاب یک ساهضهای نضاسث ط کاسةشدی ةشای‬
‫فشاحی اسد ‪ ،‬دیگش صیاصی ةه دطةاسى کاسی صیسد !نخغظعا دس صنیضه پشطژى هایی که ةایذ سشیؼ فشاحی ط ححظیل دادى‬
‫صظصذ !‬
‫آگاحا جظش ‪،‬فشاح طاسك کاسةش‬

‫فهشسد‬
‫نلذنه نخشجو ط نظلف ‪1 ............................................................................................................................‬‬
‫نلذنه جضیفش حذطل ‪3 ...............................................................................................................................‬‬
‫نلذنه ‪5............................................................................................................................................‬‬
‫فغل اطل‪:‬پیهایط)‪6 .................................................................................................................. (Navigation‬‬
‫الگظهای اعلی صاطةشی (پیهایط) ‪7 ...............................................................................................................‬‬
‫‪- Springboard‬حخخه ی صیش جه ‪8 ..........................................................................................................‬‬
‫‪ -List menu‬نضظی لیسخی ‪15...............................................................................................................‬‬
‫‪ -Tabs‬صةاصه ها ‪19 ............................................................................................................................‬‬
‫‪- Gallery‬گالشی‪42 ..........................................................................................................................‬‬
‫‪47 ............................................................................................................................. Dashboard‬‬
‫‪ - Metaphor‬اسخػاسى ‪48 ...................................................................................................................‬‬
‫‪ -Mega Menu‬نضظی نیلیظصی ‪34 ...........................................................................................................‬‬
‫پیهایط راصظیه‪32 .................................................................................................. Secondary Navigation -‬‬
‫‪ -Page Carousel‬عفحاج چشخضی ‪36 .....................................................................................................‬‬
‫‪ - Image Carousel‬حغظیش چشخضی ‪2: ......................................................................................................‬‬
‫‪ - Expanding list‬لیسد های حظسػه ای ط ةاصصظصذى ‪23 ...................................................................................‬‬
‫فغل دطم ‪ :‬فشم ها)‪25 .....................................................................................................................(Forms‬‬
‫‪ - Sign In‬طسطد ‪28 ..........................................................................................................................‬‬
‫‪ - Registration‬رتد صام ‪51.................................................................................................................‬‬
‫‪ - Checkout‬صهایی کشدش خشیذ ‪55 ..........................................................................................................‬‬
‫‪ -Calculate‬نحاسته ‪57 .....................................................................................................................‬‬
‫‪- Search Forms‬فشنهای جسخجظ ‪61 ........................................................................................................‬‬
‫‪62 ............................................................................................................................. Multi-Step‬‬
‫‪ - Long Forms‬فشنهای فظالصی ‪68 .........................................................................................................‬‬
‫فغل سظم‪ :‬جذاطل ط لیسد ها ‪71 ...................................................................................................................‬‬
‫‪75 .............................................................................................................................Basic Table‬‬

www.DrStartup.ir
75 .............................................................................................Header ‫ جذطل ةذطش‬- Headerless Table
76 ........................................................................................................ ‫ سخظش های راةد‬- Fix Column
77 ............................................................................................ ‫صهایه ط خالعه دادى‬-Overview plus Data
8:.......................................................................................... ‫ – سقش های دسخه ةضذی صذى‬Grouped Rows
81 .................................................................................................. ‫ لیسد های آةضاسی‬- Cascading Lists
83 .......................................................................... ‫ جذطل ةا الهاش های ةغشی‬- Table with visual indicators
82 .................................................................................................. ‫ جذطل كاةل طیشایط‬- Editable Table
86 ..................................................................................................... ‫نشحث ساصی ط فیلخش‬، ‫ جسخجظ‬: ‫فغل چهاسم‬
87 ........................................................................................................................... ‫ جسخجظ‬- Search
88 .................................................................................................... ‫ جسخجظی عشیح‬- Explicit Search
9: ........................................................... ‫ جسخجظ ةا اسخفادى اص کانل کضضذى خظدکاس‬-Search with Auto Complete
92...................................................................................................... ‫ جسخجظی پظیا‬- Dynamic Search
92........................................................................................ ‫ جسخجظی نحذطدى ةضذی صذى‬- Scoped Search
96....................................................................... ‫ جسخجظ های اخیشط رخیشى صذى‬- Saved and Recent Searches
98 ........................................................................................................... ‫ فشم جسخجظ‬- Search Form
1:: .................................................................. ‫ صخایج جسخجظ ط صهایط صخایج‬- Search Results and View Results
1:4 ........................................................................................................................ ‫الگظهای نشحث ساصی‬
1:3........................................................................................................................ On Screen Sort
1:2 ................................................................................................................... Sort Order Selector
1:7......................................................................................................... ‫ فشم نشحث ساصی‬- Sort Form
1:8............................................................................................................................... ‫ فیلخش‬- Filter
1:9 ...................................................................................................................... On Screen Filter
114 .......................................................................................................................... Filter Drawer
113 ........................................................................................................................... Filter Dialog
112 ........................................................................................................... ‫ فشم فیلخشیضگ‬- Filter Form
14: .................................................................................................................. (TOOLS) ‫ اةضاسها‬: ‫فغل پضجو‬
145 .................................................................................................................... ‫ صظاس اةضاس‬- Toolbar
13:..........................................................................................................................Option Menu
www.DrStartup.ir
134 .............................................................................................................. Call To Action Button
135 ..................................................................................................................... Contextual tools
139 ........................................................................................................................ Inline Actions
121 ..................................................................................... ‫ الگظی دکهه چضذ طؽػیخی‬- Multi state Button
125 ....................................................................................................... ‫ غهلیاج گشطهی‬-Bulk Action
129................................................................................................................(Charts) ‫ صهظداس ها‬: ‫فغل صضو‬
154 .......................................................................................... ‫ صهظداس ةا كاةلید فیلخش‬-Chart With Filters
157 .................................................................................................................... Preview Window
159 ................................................................................................................. Overview Plus Data
164.................................................................................................................... DataPoint Details
166 ............................................................................................................................. Drill Down
168 .................................................................................................................................. Zoom
17:............................................................................................................................ Pivot Table
174 ........................................................................................................................... Spark Lines
175 ..................................................................................................... (Invitation) ‫دغظج اص کاسةش‬: ‫فغل هفخو‬
178 ................................................................................................................................. Dialog
179 ..................................................................................................................................... Tip
181 .....................................................................................................................................Tour
183 ......................................................................................................................... Video Demos
185 ........................................................................................................................ Transparency
186 .................................................................................................................... 1st Time Through
187 ............................................................................................................................. Persistent
188 .......................................................................................................................... Discoverable
19: .............................................................................................. (Feedback & Affordain) ‫ ةاصخظسد‬:‫فغل هضخو‬
191 .................................................................................................................................. Feedback
191 ........................................................................................................................ Error Messages
193 ........................................................................................................................ Confirmation
198 .................................................................................................... ‫ طؽػید سیسخو‬- System Status

www.DrStartup.ir
4:4 ............................................................................................................................... Affordance
4:4 ..................................................................................................................................... Tap
4:2 ....................................................................................................................................Flick
4:7 .................................................................................................................................... Drag
41: ....................................................................................................................... (Help) ‫ساهضها‬: ‫فغل صهو‬
411 ................................................................................................................................. How to
413 ........................................................................................................................... Cheat Sheet
412 ....................................................................................................................................Tour
418 ......................................................................................................................... ‫ؽذ الگظ ها‬: ‫فغل دهو‬
419................................................................................ ! ‫ – ؽذالگظی ایذى های ةذیؼ ط جذیذ‬Novel Notation
448 ....................................................................... ‫ ها‬Metaphor ‫ؽذ الگظی غذم اصقتاق‬-Metaphor Mismatch
449 ............................................................................ ‫ صانضاسث ةظدش ةکاسگیشی کضخشل ها‬- Control Mismatch
436 ............................................................................................................................ Chart Junk
42: ........................................................................................... ‫ اكیاصظسی اص دکهه ها‬- Oceans of Buttons

‫نلذنه نخشجو‬
‫دس دصیای سكاةخی ط پظیای انشطص ‪ ،‬نحغظل ط خذنخی نظفم اسد که ةخظاصذ ةه ةهخشیط صحظ ط صیظى نهکط ‪،‬صیاص های کاسةشاش‬
‫ط نضخشیاش خظد سا ةا ةاالحشیط کیفید ةشآطسدى ساصد‪،‬ایجاد یک حجشةه لزج ةخط دس ةشخظسد ةا یک صشم افضاس ‪،‬طب ساید ط‬
‫صضاسایی طپاسخ گظیی عحیح ةه صیاص کاسةشاش‪ ،‬نههخشیط غانل نظفلید نحغظالج ط خذناج صشم افضاسی اسد‪.‬‬
‫انشطصى سطصهای گشدآطسی صیاصنضذی ها ‪،‬حظسػه صشم افضاس ط حسد ط غشؽه آصها ةه ةاصاس نخحظل صذى اسد‪،‬سطصهای حظسػه‬
‫چاةک ‪ ،‬حاکیذ ةشسطی صلط نالک نحغظل ‪ ،‬اسخفادى اص اسکشام ‪ ،‬حهیه ‪ MVP‬ها ط‪ ....‬ههه ط ههه سطصهایی هسخضذ که‬
‫نضخشی سا نحظس كشاس دادى اصذ ط ةه دصتال آش هسخضذ که صیاص های طی سا ةه ةهخشیط ط نظرشحشیط سطش پاسخ دادى ط طی سا‬
‫صگفد صدى صهایضذ‪.‬کاسةشاش انشطصی دس نػشؼ حػذاد صیادی نحغظل ط خذند صشم افضاسی كشاس گشفخه اصذ ‪ ،‬طلی حظاش‬
‫اسخفادى اص ههه آصها سا صذاسصذ ‪،‬لزا نظاسدی سا اصخخاب نی صهایضذ که ةشای آصها نقلظةید ةیضخشی داصخه ةاصذ‪ ،‬ایط انش‬
‫صناصی احفاق نی افخذ که صشم افضاس نتخضی ةش نذل رهضی کاسةش فشاحی ط حظسػه یافخه ةاصذ ‪ .‬نذل های رهضی ط كالث های‬
‫رهضی کاسةشاش چه هسخضذ؟ایط ةحس دس غلو حػانل اصساش ط ناصیط نظسد ةشسسی كشاس نی گیشد‪.‬انشطصى ةحس فشاحی ساةك‬
‫کاسةش ‪،‬کاسةشد پزیشی‪،‬فشاحی حػانل ط سایش نتاحس نشحتك ةا اسحتاـ ناصیط ط اصساش نظسد حظجه كشاس گشفخه اسد ط ةکاسگیشی‬
‫كظاصیط فشاحی ط الگظهای نضاسث آش‪،‬غانلی سكاةخی ط نخهایض کضضذى دس نحغظالج اسایه صذى حظسك صشکد ها نی ةاصذ‬
‫‪،‬طلی نخاسفاصه نضاةؼ فاسسی سسهی ط كاةل اسخفادى دس ایط حظصى کهخش یافد نی صظصذ‪.‬اص فشفی ظهظس حلفط های هظصهضذ‬
‫‪،‬افم های جذیذی سا پیط سطی کاسةشاش طحظسػه دهضذگاش صهایاش صهظدى اسد‪،‬ةگظصه ای که دس آیضذى ای صه چضذاش دطس ةشای‬
‫هش کاسةشدی ‪ ،‬یک صشم افضاس نظةایل اسایه خظاهذ صذ ‪،‬ط ایط یػضی ححلم آسناش اسخیظ جاةض "‪."There is An App For It‬‬
‫دس کخاب حاؽش که حشجهه ای آصاد اص کخاب ‪Mobile Design Pattern Gallery UI Patterns for Mobile‬‬
‫‪ Applications‬صظصخه خاصو جضیفش حذطل نیتاصذ‪،‬الگظ های فشاحی طاسك کاسةش ‪ ،‬دس حهانی کاسةشی های صشم افضاس های‬
‫حلفط ههشاى نتخضی ةش اسخاصذاسد های سیسخو غانل ‪Android، iOS‬ط ‪ BlackBerry‬ةغظسحی نضظو نظسد ةشسسی كشاسدادى‬
‫صذى اسد که خظد گضجیضه اسصصهضذی ةشای ایذى های فشاحی نی ةاصذ !‬
‫نط صخغا ةاسها ط ةاسها دس پشطژى های صشم افضاسی نظةایل اص ایط الگظ ها اسخفادى صهظدى ام ط صخایج جالتی اص صظشاج نضخشیاش‬
‫دسیافد کشدى ام ‪ ،‬صایذ ةخظاش گفد که نجهظغه حاؽش یک کاحالظگ حغظیشی اص ةهخشیط الگظ های فشاحی طاسك کاسةش ‪،‬ةا‬
‫سطیکشد کاسةشد پزیشی ةاصذ که نی حظاش اص آصها جهد حغظل افهیضاش اص کیفید فشاحی طاسك کاسةشدس صشم افضاس های‬
‫نظةایل اسخفادى صهظد‪.‬جالث اسد ةذاصیذ که ةسیاسی اص صشم افضاس های نظفم ایشاصی صیض اص ایط الگظها اسخفادى صهظدى اصذ ‪،‬که‬
‫دس آیضذى نقالتی پیشانظش صلذ ط ةشسسی ایط صشم افضاس ها اسایه خظاهو کشد‪.‬‬
‫انیذطاسم ةا ةهشى نضذ صذش اص نقالث اسایه صذى دس ایط کخاب ‪،‬کیفید ‪ App‬های ایشاصی سطص ةه سطص ةیضخش صذى ط صاهذ‬
‫صکظفایی ایط ةشصانه ها دس غشعه ةیط الهللی ةاصیو‪.‬‬
‫‪www‬‬ ‫‪1‬‬
‫اصآصجاییکه ایط کخاب سا دس اطكاج فشاؾد دس صشکد حشجهه ط حالیف کشدى ام ‪،‬كقػا خالی اص اصکال صخظاهذ ةظد‪،‬خظصحال‬
‫نی صظم که ایط نظاسد سا ةشایو اص فشیم ایهیل (‪ )Mahdi.alipour.sakhavi@gmail.com‬اسسال صهاییذ حا دس طیشایط های‬
‫ةػذی ‪،‬ایشاداج کهخشی سا صاهذ ةاصیو‪.‬‬
‫نهذی غلیپظس سخاطی‬
‫نظسس اسخاسحاپ آطاةظک ‪،‬نضاطس ط نشةی اسخاسج آپ‬
‫‪www.DrStartUp.ir‬‬
‫‪www.startupacademy.ir‬‬
‫‪http://facebook.com/Mahdi.Alipour‬‬
‫‪http://www.linkedin.com/profile/view?id=334039026‬‬
‫‪http://twitter.com/Alipourmahdi‬‬
‫‪www‬‬ ‫‪2‬‬
‫نلذنه جضیفش حذطل‬

‫ایضکه صها چه صانی سا ةشای یک پذیذى اصخخاب کضیذ ‪،‬خظدش سشآؾاصی ةشای صضاخد طدسک آش پذیذى اسد‪.‬‬
‫پسش ‪ 5‬ساله نط ‪،‬ههاصضذ ههه ةچه های ایط سط ط سال اص صگاى کشدش ةه اةشها لزج نی ةشد!ههیط چضذ هفخه پیط پسشم‬
‫نخظجه صذ که اةشها ةش اساس صظع آصها اسو های نخخلفی داسصذ‪.‬پس صشطع کشد ةه حفظ کشدش صام اصظاع نخخلف اةشها ‪،‬نط‬
‫هشچیضی که دس ایط ساةقه نی داصسخو ةه اط یاد دادم طلی جالث ةظد که صام ةشخی اص اةشها سا خظدم هو ةلذ صتظدم ط حاکضظش‬
‫صضضیذى ةظدم‪.‬‬
‫دس حال حاؽش هش طكد پسشم ةه آسهاش صگاى نی کضذ صام اةشها سا حک حک ةیاش نی کضذ‪،‬جالث حش ایضکه ةش اساس صام هش اةش‬
‫حظؽیحاحی دس نظسد طؽػید آب ط هظا هو اسایه نی دهذ ‪،‬اط ةش اساس ایضکه اصذاصى اةش چلذس اسد ‪ ،‬جهد حشکخط ةه چه‬
‫سهخی اسد ‪،‬سصگ ط اسحفاع آش چلذس اسد ‪،‬پیط ةیضی های جالتی سا اصجام نیذهذ‪.‬‬
‫ةچه های ایط سط ط سال اص داصسخط صام اصیا لزج نیتشصذ ! نهو صیسد ایط اصیا دایضاسظس ةاصضذ ‪،‬ناصیط ةاصضذ یا اةش!جالث‬
‫حش ایط اسد که خالكید آصها نحذطد صهی صظد ط صیهکشى ساسد آصها هضظص فػال اسد‪،‬نزال پسش نط حضخیػ نی دهذ که هش‬
‫اةش صتیه چه چیض هایی اسد ‪،‬اسدک ‪،‬ناصیط ط‪ ...‬چیضی که نا ةضسگخش ها صایذ صخظاصیو حضخیػ دهیو‪.‬‬
‫دكیلا ایط یادگیشی ها ط حظاش پیضگظیی دس نا ةضسگخش ها صیضطجظد داسد ‪ ،‬رهط نا ههظاسى دس حال فتله ةضذی کشدش حجشةیاج‬
‫ط آنظصى ها ط صکاحی اسد که حا ةه انشطص آصها سا حجشةه کشدى اسد‪.‬ایط فتله ةضذی دس پیضگظیی کهک نی کضذ‪.‬دس دصیای‬
‫صشم افضاس رهط نا ةشخی طاسك های کاسةش سا ةیضخش اص سایش طاسك های کاسةش نی پسضذد‪،‬دس ةشخی طاسك های کاسةش ‪،‬صحظى‬
‫فشاحی ةه گظصه ای اسد که رهط خظد ش نشحله ةػذی یا گام ةػذی دس طاسك کاسةش سا پیضگظیی نیکضذ‪.‬اص فشفی ةشخی اص‬
‫ایط پیضگظیی ها ةش اساس نذل رهضی ای که دس نا صهادیضه صذى اسد عظسج نی گیشد‪.‬دس نظسد نذلهای رهضی دس‬
‫ةشخظسد ةا طاسك های کاسةش صشم افضاس ها صیض الگظ هایی طجظد داد ‪.‬‬
‫خظب ‪،‬ایط الگظ ها سا چگظصه یاد ةگیشیو حا ةخظاصیو اص آصها دس صشم افضاس هایهاش اسخفادى کضیو؟‬
‫دس صناصیکه پسشم دسحال یادگیشی صام اةشها ةظد ‪،‬ةهخشیط اةضاس یادگیشی حغاطیش نشحتك ةا اةشها ةظد‪.‬اط حغاطیش صیادی سا دیذ ط‬
‫حػذادی اص آصها سا ةػضظاش الگظ اصخخاب کشد‪.‬التخه ةػؾی اص ایط اةشها آش كذس صتیه هو ةظدصذ که ةا هو اصختاى نی صذصذ‪.‬‬
‫دكیلا ایط نسئله دس دصیای فشاحی طاسك های کاسةش طجظد داسد ‪،‬ةایذ نزال ها ط صهظصه طاسك های کاسةشی صیادی سا ةتیضیذ‬
‫حا ةخظاصیذ الگظی نظسد صظش سا اصخخاب صهایذ‪.‬نقالث صیادی سانی حظاش دس صنیضه الگظهای فشاحی طاسك کاسةش اسایه داد ‪ :‬ایط‬
‫الگظ ها چیسخضذ ‪،‬چه کاسةشد هایی داسصذ ‪،‬چشا ایضگظصه فشاحی صذى اصذ ‪،‬چه حفاطج هایی ةا یکذیگش داسصذ ط‪ ...‬طلی یک صکخه‬
‫ةشای نط ةػضظاش صظیسضذى سطصط اسد ط آش سا ةاسها ط ةاسها حجشةه کشدى ام ‪ :‬افشادی که كغذ فشاحی طاسك کاسةش سا داسصذ‬
‫‪،‬صیاص خیلی صیادی ةه صکاج غلهی ط حفسیش های نشحتك ةا الگظ های فشاحی طاسك کاسةش صذاسصذ ‪،‬آش ها صیاص ةه ایط داسصذ که ةا‬
‫‪www‬‬ ‫‪3‬‬
‫یک الگظی فشاحی طاسك کاسةش ‪،‬سشیؼ آصضا صظصذ‪،‬حظؽیحاحی نخخغش دس صنیضه نظسد کاسةشد آش سا ةخظاصضذ ط دس آخش صیاص‬
‫داسصذ که صهظصه هایی غهلی اص ایط الگظ سا ةتیضضذ حا ةخظاصضذ ایذى های فشاحی خظد سا سشیؼ پیادى ساصی کضضذ‪.‬‬
‫دس ایط کخاب‪،‬حشصا صیل‪،‬یک نجهظغه دیذصی ط جزاب اص حغاطیش الگظهای فشاحی که دس غهل پیادى ساصی صذى اصذ سا اسایه‬
‫کشدى اسد‪.‬ایط کاس ‪،‬یک کاس غظیو اسد ‪،‬ایضکه صها حک حک ةشصانه ها سا ةا دكد ةشسسی کضیذ ط الگظهای فشاحی نضاسث سا‬
‫اص آصها اسخخشاج کضیذ ‪،‬ط حهانی حغاطیش سا دس كالث یک کاحالظگ نضظو دسخه ةضذی کضیذ‪،‬کاس ةسیاس صناصتش ط سخخی اسد‪.‬‬
‫ایط کخاب ةشای ةشصانه صظیساش نظةایل ط فشاحاش طاسك کاسةش حکو یک گضج سا داسد!ایط کخاب سا کانل ةخظاصیذ ‪،‬طلی نههخش‬
‫اص خظاصذش ایط اسد که اص الگظهای غالی ط اس خاصذاسد آصها ‪،‬دس ساسخای اسحلای کاسةشدپزیشی ةشصانه هایخاش دس غهل اسخفادى‬
‫کضیذ‪.‬‬
‫‪ ‬ةش اساس نضقم کاسی ةشصانه هایی که دسحال فشاحی آصها هسخیذ ‪،‬صهظصه ط الگظی نظسد صظش سا اص نیاش نزال های‬
‫فشاطاصی که دس ایط کخاب اسایه صذى اسد ‪ ،‬اصخخاب کضیذ ط ةهخشیط نظسد سا ةشای کاس خظد اصخخاب صهاییذ!‬
‫‪ ‬اص ایط کخاب ةػضظاش نضتػی ةشای ایذى های فشاحی اسخفادى کضیذ‪،‬نط صخغا اص ایذى های صیادی ‪،‬حخی دس صنیضه‬
‫فشاحی آیکظش ةشصانه ها اص ایط کخاب ةهشى نضذ صذى ام‪.‬‬
‫‪ ‬اص ایط کخاب ةػضظاش نضتؼ داصضی دس صنیضه كظاصیط فشاحی ةشصانه های کاسةشدی که دس دصیا نظسد اكتال غهظنی‬
‫كشاس گشفخه اصذ اسخفادى کضیذ‪ .‬ةا اسخفادى اص ایط نضتؼ دیگش صیاص صیسد ةشصانه ها سا داصلظد ط صغث کضیذ ‪،‬حهانی‬
‫اسکشیط ها ط حغاطیش آصها دس ایط نضتؼ نظجظد اسد‪.‬‬
‫صها خظدحاش صیض نی حظاصیذ الگظ های فشاحی سا ةا جسخجظ اسخخشاج کضیذ طلی ایط افهیضاش سا ةه صها نی دهو که ةا نقالػه‬
‫ایط کخاب خظدحاش نخظجه اسصش آش خظاهیذ صذ ‪،‬صشـ نی ةضذم که ةػذ اص نقالػه آش دس صناش فشاحی ةشصانه هایخاش ةاسها ط‬
‫ةاسها ةه آش سجظع خظاهیذ کشد!‬
‫انیذطاسم حجشةه ای لزج ةخط سا اص نقالػه ایط کخاب داصخه ةاصیذ!‬
‫جضیفش حذطل‬
‫‪www‬‬ ‫‪4‬‬
‫نلذنه‬
‫اخیشا سفاسش فشاحی ط پیادى ساصی یک ةشصانه ی نظةایل ةه نا اسجاع دادى صذ ‪ ،‬ةشای اصجام ایط پشطژى حهانی فشاحاش طاسك‬
‫کاسةش سا دطس هو جهؼ کشدیو ‪ .‬ایط نسئله ةاغس صذ که نط نجتظس صظم دس نذج کهخش اص یک هفخه حهانی داصط ط حجشةه‬
‫ی خظدم سا ةه یک فشاح طاسك کاسةش اصخلال دهو ‪.‬ةشای ههیط نط یک ساهضهای گام ةه گام صانل حػذاد صیادی اص ‪Screen‬‬
‫‪ Shot‬هایی اص ةشصانه های نظةایل که حاطی صکاحی دسةاسى ی فظج ط فط فشاحی ط ههچضیط صکخه های نضفی فشاحی ةظدصذ‬
‫سا آنادى کشدم ط ایضقظس ةظد که یک گالشی صستخا جانؼ اص الگظهای فشاحی طاسك کاسةش ةشصانه های نظةایل پا ةه غشعه ظهظس‬
‫گزاصد‪.‬‬
‫دس حالی که ایط الگظهای فشاحی سا دسخه ةضذی نی کشدم ةه ایط صکخه پی ةشدم که اسصش طاكػی حضها دس خظد الگظها صیسد‬
‫ةلکه ایط اسصصها دس نزال های فشاطاصی اسد که اص صشم افضاس ها ط ‪ App‬های نظةایل جهؼ آطسی کشدى ةظدم ‪.‬ةضاةشایط ةجای‬
‫ایضکه ةغظسج ةسیاس اد ةی ط سسهی (ههاصقظس که ةسیاسی اص صظیسضذگاش غاصم آش هسخضذ )الگظها سا حظؽیح دهو اص سطصی‬
‫کاسةشدی ط نتخضی ةش نزال اسخفادى کشدم (سطصی نتخضی ةش صهظصه های غهلی ط طاكػی )‪ .‬ایط کخاب حاطی ةیط اص ‪ 4::‬حغظیش‬
‫اص صشم افضاس های ‪ iOS ,Android ,Blackberry , Symbian‬ططیضذطص اسد که ةشاساس صظع الگظدسخه ةضذی صذى‬
‫اصذ‪.‬غالطى ةش ایط دس طةساید ایط کخاب ‪ WWW.MobileDesignPatternGallery.com‬ط ساید ‪ Flickr‬حغاطیش ةیضخشی‬
‫اص ایط ةشصانه ها آطسدى صذى اسد ‪.‬‬
‫ایط کخاب طاكػا ةشای چه کساصی صظصخه صذى اسد؟‬
‫ایط کخاب ةشای نذیشاش ط نالکاش نحغظل ‪ ،‬فشاحاش ط حظسػه دهضذگاش صشم افضاس صظصخه صذى اسد که كغذ داسصذ ةشصانه‬
‫های نظةایل حظلیذ کضضذ!کهپاصی هایی که دس حال حؿییش اسخشاژی خظد ةه سهد حظلیذ صشم افضاسهای نظةایل هسخضذ دچاس‬
‫چالط های جذی دس صنیضه ی اعظل فشاحی طاسك های کاسةشةشای صشم افضاسهای نظةایل نیضظصذ ‪،‬نخغظعا اگش ةخظاهضذ‬
‫صشم افضاسصاش سا ةشای سیسخو غانل های نخخلف حظسػه دهضذ‪ ،‬ةا نضکالج صیادی نظاجه نی صظصذ‪.‬‬
‫چه صها كشاس ةاصذ که یک ةشصانه ی سادى ‪iOS‬یا ‪ Android‬حظلیذ کضیذ ط چه ةخظاهیذ یک صشم افضاس حشفه ای که كقػا نظسد‬
‫اسخفادى حػذاد صیادی اص کاسةشاش كشاس خظاهذ گشفد فشاحی کضیذ ‪ ،‬ایط کخاب کاس صها سا سادى کشدى ط ایذى های ةسیاسی سا‬
‫دس صنیضه ی فشاحی دس كالث نزالهای فشاطاش اسایه نیذهذ!‬
‫‪www‬‬ ‫‪5‬‬
www.DrStartup.ir
(Navigation) ‫پیهایط‬:‫فغل اطل‬
(Navigation) ‫الگظهای اعلی پیهایط‬
Springboard , List Menu ,Tab menu ,Gallery ,Dashboard ,Mega menu ,Metaphor
(Navigation)‫الگظهای راصظیه پیهایط‬
Expanding list ,Image Carousel ,Page Carousel(‫)چشخ ط فلک‬
www 6
‫نط خیلی دطسد داسم حا صظشاج نشحتك ةا ةشصانه های نظةایل اسایه صذى دس ةاصاس سا نقالػه ط نشطس کضو ط ایضکه ةذاصو نشدم‬
‫صظشصاش دس نظسد ‪ App‬ها چیسد ط چه فیذةک هایی دادى اصذ ! سیسخو صظش دادش ط سحته ةضذی ‪ App‬های نظةایل که دس‬
‫فشطصگاى ها اسائه صذى اسد نضتؼ ةسیاس اسصصهضذی دس صنیضه افالغاج کاسةشدپزیشی اسد ‪.‬ایط سیسخو دس نظسد ‪website‬‬
‫ها ط صشم افضاسهای کاةشدی ‪ Desktop‬ةه ایط طسػد طجظد صذاصخه اسد‪.‬‬
‫ةقظس کلی حیخش صظشاج دس نظسد ةشصانه های ‪4‬ط‪ 5‬سخاسى خیلی خاظ ط دكیم صیسخضذ ‪.‬صها ةیضخش غتاساحی نزل ‪ :‬خیلی‬
‫ةاحاله‪...‬یا ایط ةشصانه خیلی غالی کاس نی کضه سا نی ةتیضیذ ‪ .‬طلی دس نظسد ةشصانه های ‪ 0‬یا ‪2‬سخاسى صظشاج کاسةشاش ةغظسج‬
‫دكیم حش اسائه نی صظصذ آصها دكیلا نضکل ةشصانه ها سا نػشفی نی کضضذ ‪:‬ةیضخش صکایاج ط صاسؽایخی های آصها حظل نظاسدصیش‬
‫اسد‪:‬‬
‫‪Crash‬صذش ةشصانه‬ ‫‪‬‬

‫‪ ‬صتظدش یک ‪ Feature‬خاظ دس ةشصانه نزل ‪:‬جسخجظ‪ ،‬غذم یکپاسچگی حساةهای کاسةشی ط ‪..‬‬
‫‪ ‬ؽػف دس پیهایط ‪ :‬صهی حظاش ةه غلث یا عفحه ی كتلی ةشگضد ‪،‬صهی حظاش گضیضه ی نشةظـ سا یافد‬
‫‪ ‬طاسك کاسةش پیچیذى‬
‫دط نظسد اطل ةا اسخفادى اص الگظهای فشاحی ةهتظد صهی یاةضذ طلی دس نظسد سظم ط چهاسم كقػا ةا اسخفادى اص الگظهای‬
‫فشاحی ةهتظد هایی حاعل نی صظصذ‪.‬‬
‫الگظهای فشاحی نشةظـ ةه پیهایط که دس ادانه ةه نػشفی آصها نی پشداصیو‪ ،‬ایط نظسد سا که کاسةشاش ةه ساحخی دس صشم افضاس‬
‫صها ةخظاصضذ پیهایط کضضذ ط ةه گضیضه ها ط انکاصاج اعلی صشم افضاس کانال دسخشسی داصخه ةاصضذ سا حؾهیط نی کضضذ‪.‬‬
‫الگظهای اعلی صاطةشی (پیهایط)‬

‫صاطةشی ط پیهایط خظب‪،‬ناصضذ یک فشاحی خظب ‪،‬صانشئی ط ؾیش كاةل دیذش اسد ‪.‬ةشصانه هایی ةا کاس ةشی نضاسث ةه عظسحی‬
‫نلهظس ط غیضی‪،‬حس خظةی سا دس اصجام کاسها ةه صها نیذهضذ‪.‬کاسهایی نزل نشطس افالغاج دطسخاش دس یک ةشصانه ی صتکه‬
‫ی اجخهاغی‪،‬اجاسى کشدش یک طام دس یک ةشصانه ی ةاصکی‪،‬ط‪...‬ةا ایضکه گضیضه هاط سطش های ةسیاس صیادی ةشای اصجام غهل‬
‫پیهایط دس ةشصانه های نظةایل طجظد داسد ‪،‬نط دس ایضجا كغذ داسم ‪6‬الگظ سا ةه غضظاش الگظهای اعلی صاطةشی نػشفی کضو ‪.‬‬
‫ةله‪ ...‬الگظهایی ةشای نضظی اعلی ةشصانه!‬
‫‪www‬‬ ‫‪7‬‬
‫الگوهای پیمایش اولیه‬
‫‪ - Springboard‬حخخه ی صیش جه‬

‫‪ Springboard‬یکی اص الگظهایی اسد که طاةسخگی ةه سیسخو غانل صذاسد ط دس اةضاس ها ط سیسخو غانل های نخخلف ةه‬
‫ساحخی کاس نی کضذ‪.‬ةشخی نظاكؼ اص آش ةه غضظاش ‪ LaunchPad‬صیض یاد نی صظد‪ .‬ایط الگظ ةه ایط عظسج غهل نیکضذ که دس‬
‫عفحه ی اعلی گضیضه های اعلی صشم افضاس که هش کذام اص آصها صها سا ةه ةخضی اساسی ط کلیذی اص صشم افضاس هذاید نی‬
‫کضضذ چیذى صذى اصذ‪.‬‬
‫‪Facebook‬اص ایط الگظ ةشای فشاحی صشم افضاس خظد دس ‪ iOS‬اسخفادى کشد طةػذ اص آش دس ةسیاسی اص صشم افضاسها اص ایط ایذى‬
‫ةهشى ةشداسی صذ!‬
‫‪www‬‬ ‫‪8‬‬
www.DrStartup.ir
Ovi Maps ‫ و‬Facebook Springboard
www 9
www.DrStartup.ir
LinkedIn‫ و‬Trulia
www 10
‫‪NewsRoom on Palm and Yahoo! on Nokia‬‬
‫‪ Springboard‬های صخغی صذى سا صیض نیخظاش جهد صهایط افالغاج صخغی پشطفایل کاسةشاش ةه ههشاى گضیضه های‬
‫اعلی نضظهاةکاسةشد ‪.‬كقػا دس ایط نظسد ةایذ اص ‪ Springboard‬هایی که ‪ Layout‬آصها كاةلید صخغی ساصی صذش سا داسصذ‬
‫اسخفادى کشد ‪.‬‬
‫‪www‬‬ ‫‪11‬‬
‫‪PayPal personalized springboard and early Gowalla‬‬
‫‪ Layout‬هایی ةا ‪ Grid‬های ‪3x3,2x3,2x2‬ط‪1x2‬سایج حشیط ‪ Layout‬ها هسخضذ ‪.‬التخه هیچ لضطنی صذاسد که اص‬
‫‪Layout‬های نتخضی ةش ‪ Grid‬اسخفادى کضیو‪.‬ةشخی اص گضیضه ها دس الگظی ‪ Springboard‬نیخظاصضذ ةضسگخش اص سایش گضیضه ها‬
‫ةاصضذ‪،‬ایط کاس ةه جهد اههید فشاطاش ط پشکاسةشد ةظدش گضیضه ی نشةظـ اصجام نی صظد‪.‬ناصضذ گضیضه ی ‪ Video‬دس‬
‫‪ Masters iPhone App‬که ‪2‬یا ‪3‬ةشاةش ةضسگخش اص سایش گضیضه ها اسد‪.‬‬
‫‪www‬‬ ‫‪12‬‬
‫‪Grid layouts for springboards‬‬
‫‪2x2 grid layout, Norton Mobile; irregular layout, Masters‬‬
‫صناصی اص ‪ Layout‬نتخضی ةش ‪ Grid‬اسخفادى کضیذ که اههید گضیضه ها یکساش اسد‪.‬ههچضیط اص ‪Layout‬‬

‫های صانخلاسش صناصی اسخفادى کضیذ که ةخظاهیذ ةشخی اص گضیضه ها سا نههخش یا پشکاسةشد حش جلظى دهیذ‪.‬دس‬
‫‪www‬‬ ‫‪13‬‬
www.DrStartup.ir
. ‫ؽهط نظاسدصخغی ساصی سا صیض نذ صظش كشاس دهیذ‬
www 14
‫‪ -List menu‬نضظی لیسخی‬

‫ایط الگظ صیض نضاةه الگظی ‪ Springboard‬انکاش جهط ةه كسهد های اعلی صشم افضاس سا اسایه نی دهذ‪ .‬التخه ایط الگظ‬
‫داسای نذلهای نخخلفی اسد که غتاسحضذ اص ‪List Menu‬های صخغی صذى ‪،‬لیسد های گشطى ةضذی صذى ‪،Grouped List‬‬
‫لیسد های اسحلا یافخه ‪.Enhanced list‬‬
‫‪ Enhanced List‬یک لیسد سادى اسد که داسای انکاصاج اؽافی نزل جسخجظ ‪،‬فیلخش کشدش ط‪Browse‬کشدش نی ةاصذ!‬
‫‪List menus: Valspar Paint and Kayak‬‬
‫‪www‬‬ ‫‪15‬‬
www.DrStartup.ir
List menus: radiotime Palm and Cozi
www 16
www.DrStartup.ir
Personalized lists: Blackboard and Zoho CRM
www 17
‫‪Enhanced list, Amazon MP3; grouped list, Stratus‬‬
‫‪ List Menu‬ها ةشای گضیضه هایی که غضظاش آصها فظیل هسخضذ یا صیاص ةه حظؽیحاحی دس سقشی جذاگاصه‬
‫داسصذ ‪،‬ةسیاس نضاسث هسخضذ ‪.‬ةشصانه هایی که كشاس اسد اص ایط الگظ اسخفادى کضضذ ةایذ یک گضیضه دس حهانی‬
‫عفحاج خظد ةشای ةاصگضد ةه عفحه ی ‪ List menu‬اسایه دهضذ طنػهظال ةهخش اسد یک دکهه دس صظاس‬
‫ةشصانه ةا غضظاش نضظی اعلی یا آیکظصی ةا نفهظم لیسد حػتیه کضضذ !‬
‫‪www‬‬ ‫‪18‬‬
‫‪ -Tabs‬صةاصه ها‬
‫الگظی ‪ Tab‬حا نذج ها پیط ةسیاس طاةسخه ةه سیسخو غانل ةظد حا ایضکه هش کذام اص سیسخو غانل ها ساهضها ها ط اسخاصذاسد‬
‫های خظد سا ةشای ةکاسگیشی اص ایط الگظ اسایه دادصذ!صناصی که نی خظاهیذ اص ایط الگظ اسخفادى کضیذ حخها گضیضه ی سیسخو‬
‫غانل سا نذ صظش داصخه ةاصیذ ط دس هش سیسخو غانل اص ساهضهای نشةظـ اسخفادى صهاییذ ‪.‬‬
‫‪Tab orientation for various OSs‬‬
‫اسخفادى اص ‪ Tab‬ها دس كسهد پاییط ةشصانه ‪،‬دس سیسخو غانل های ‪iOS‬ط‪ WebOS‬ط ‪ BlackBerry‬ةسیاس کاسةشپسضذ هسخضذ‪.‬‬
‫‪www‬‬ ‫‪19‬‬
www.DrStartup.ir
Jamie Oliver Recipes and Molome, bottom tabs
BlackBerry App World and WorldMate, bottom tabs
www 20
‫اسخفادى اص ‪ Tab‬های افلی ةا كاةلید ‪ Scroll‬ههاصقظس که دس اپلیکیضط ‪ Starbucks‬ط ‪Blue Mobile‬صهایط دادى صذى‬
‫اسد کاسةشی ةسیاس نضاستی سا ةشای دسخشسی ةه گضیضه های ةیضخش ةذطش صیاص ةه فؾای اؽافی سا اسایه نی دهذ‪.‬‬
‫‪Starbucks and Blue Mobile, scrolling bottom tabs‬‬
‫اسخفادى اص ‪ Tab‬ها دس كسهد های ةاالی صشم افضاس دس ‪ Windows،Symbian ،Android‬ةسیاس سایج اسد ‪ .‬ههچضیط ایط‬
‫سطش الهام گشفخه اص الگظهای فشاحی پیهایط دس طةساید ها اسد ‪Nokia.‬ط‪Windows‬هش دط اص ‪Tab‬هایی ةا كاةلید‬
‫‪Scroll‬دس كسهد ةاالی صشم افضاس ةشای اسایه دادش گضیضه های ةیضخش اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪21‬‬
www.DrStartup.ir
Harvest TimeTractor and Fring on Nokia, scrolling top tabs
www 22
‫‪Foursquare and HitPost, top tabs‬‬
‫ةا سطصی کانال آصکاس ط نخفاطج گضیضه ای که اصخخاب صذى اسد سا اص سایش گضیضه ها نخهایض کضیذ!جهد‬
‫سهظلد کاسةش غالطى ةش ‪ icon‬اص غضظاصی نضاسث ةشای گضیضه ها اسخفادى کضیذ!‬
‫‪www‬‬ ‫‪23‬‬
‫‪- Gallery‬گالشی‬
‫الگظی گالشی ةشای نشطس اجضای نخخلف نحخظا ةکاس نی سطد‪.‬نحخظا نػهظال یک نلاله ‪ ،‬دسخظس ؾزایی‪،‬غکس یا نحغظل اسد‬
‫که نی حظاصذ دس دسخه ةضذی هایی نخخلف ةه عظسج چشخضی ‪ Grid ،‬ط ‪ Slide Show‬ةه صهایط دس آیذ‪.‬‬
‫‪BBC and PULSE‬‬
‫‪www‬‬ ‫‪24‬‬
‫‪Flickr and PictureIt Palm‬‬
‫دس ةشخی نظاكؼ اگش نحخظا دسخه ةضذی صظد نشطس ط پیهایط آصها سادى حش نی ةاصذ‪ .‬ةشصانه ی ‪ Dwell‬اص ‪Tab‬های کضاس‬
‫عفحه ةشای دسخه ةضذی ط نذیشید نحخظا اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪25‬‬
www.DrStartup.ir
Dwell
www 26
‫الگظی گالشی ةشای نظاكػی که نحخظا ةه حذسیج ةه سطص نی صظد ةسیاس کاسةشد داسد!‬
‫‪Dashboard‬‬
‫الگظی ‪ Dashboard‬یک لیسد كاةل پیهایط اصیکسشی‪ KPI‬های نهو ( پاسانخشهای نهو ) سا صضاش نی دهذ‪.‬هشیک اص‪KPI‬ها‬
‫نی حظاصذ ةضا ةه خظاسخه ی کاسةش افالغاج صیادحشی سا اسائه دهضذ‪،‬ایط الگظی اعلی پیهایط دس صشم افضاسهای نالی ط‬
‫اةضاسهای ححلیلی ط ههچضیط ةاصاسیاةی ط فشطش ةسیاس کاسةشد داسد‪.‬‬
‫‪Mint and ego dashoards‬‬
‫‪ Dashboard‬سا ةا پاسانخشها ط‪KPI‬های ؾیش ؽشطسی صلظؽ صکضیذ! سػی کضیذ کاسةشدی حشیط ط نفیذحشیط‬
‫افالغاج سا دس اخخیاس کاسةش كشاس دهیذ!‬
‫‪www‬‬ ‫‪27‬‬
‫‪ - Metaphor‬اسخػاسى‬
‫ایط الگظ ةه غضظاش یک سطش نضاسث‪ ،‬جهد ایجاد یک اسخػاسى اص کاسةشد ةشصانه دس دصیای طاكػی ةکاس نی سطد‪.‬ههچضیط ایط‬
‫الگظ نػهظال دس ةاصی ها ةکاس نی سطد‪ .‬دس ةشصانه هایی که ةه افشاد کهک نی کضضذ حا نظاسدی نزل صظصخه ها ‪ ،‬کخاةها‪ ،‬ط حخی‬
‫صظصیذصی های خظد سا دسخه ةضذی ط نشحث ساصی کضضذهو ایط الگظ کاسةشد داسد‪.‬‬
‫‪Awesome Note‬‬
‫‪www‬‬ ‫‪28‬‬
www.DrStartup.ir
Cellar
www 29
www.DrStartup.ir
DoItTomorrow and TripJournal
www 30
‫‪Aldiko Book Reader‬‬
‫اصایط الگظ ةه دكد اسخفادى کضیذ صیشا اگش اسخػاسى ةه فظس عحیح ط نضاسث پیادى ساصی صضظد ةه یک ؽذ الگظ‬
‫حتذیل خظاهیذ صذ که دس فغل ‪ 9‬آش سا ةیضخش ةشسسی خظاهیو کشد‪.‬‬
‫‪www‬‬ ‫‪31‬‬
‫‪ -Mega Menu‬نضظی نیلیظصی‬

‫الگظی ‪ Mega Menu‬دس نظةایل دكیلا ناصضذ الگظی نضاةه آش دس طب غهل نی کضذ‪،‬یک پضل ةضسگ حاطی صیش دسخه های‬
‫گظصاگظش اص گضیضه های نضظ نی ةاصذ ‪ .‬طةساید ‪ RipCurl‬اص ‪Mega Menu‬ةشای دسخه ةضذی آیخو ها دس صیش دسخه های‬
‫نخخلف دس حظصى ی پظصاک اسخفادى نی کضذ‪.‬‬
‫‪RipCurlShop.com‬‬
‫صسخه ی ‪ WebOS‬ةشصانه ی ‪، Facebook‬اص ‪Mega Menu‬ةشای پیهایط ‪ Stream Line‬ةجای گضیضه های صیاد نظجظد دس‬
‫الگظی ‪SpringBoard‬اسخفادى نی کضذ‪Walmart.‬صیض اص الگظیی نضاةه ‪،‬دس ‪ App‬اصذسطیذ خظد اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪32‬‬
‫‪Facebook webOS and Walmart Android‬‬
‫كتل اصفشاحی الگظی پیهایضی خظد‪،‬حخها نػهاسی ط اسخشاحژی افالغاج نظجظد دس اپلیکیضط سا دس صظش‬
‫ةگیشیذ‪.‬سػی کضیذ اص نضاسث حشیط الگظ ةشاساس کاسةشی افالغاج نظجظد دس صشم افضاس اسخفادى کضیذ (نزال‬
‫اسخفادى اص ‪Tab‬ها طكخی که گضیضه ها نحذطد ةاصضذ)‪.‬‬
‫‪www‬‬ ‫‪33‬‬
‫پیهایط راصظیه‪Secondary Navigation -‬‬

‫ایط فغل فلك ةا نػشفی الگظهای پیهایط نضظیی ‪،‬کانل صهی صظد‪ ،‬لزا نا دس ایط كسهد نتحزی سا ةه غضظاش پیهایط راصظیه‬
‫نقشح نی کضیو ‪.‬نضظظس اص پیهایط راصظیه ‪،‬پیهایط دس یک عفحه یا ناژطل اسد ‪.‬نزال الگظی ‪SpringBoard‬دس ةشصانه ی‬
‫کاسةشدی ‪ANZ‬یک پیهایط راصظیه اسد صیشا ایط الگظ دس یک ‪(Tab‬اص الگظ های پیهایط اطلیه)كشاس دادى صذى اسد‪.‬دكیلا‬
‫ههیط الگظ دس اپلیکیضط دسخظساج آصپضی ‪ Jamie Oliver’s‬ةکاس سفخه اسد ‪.‬الگظی لیسد ةػضظاش یک پیهایط راصظیه دس‬
‫داخل ‪Tab‬ها که الگظی پیهایط اطلیه هسخضذ ةکاس سفخه اسد ‪.‬‬
‫‪(Left) Primary, tabs; secondary, springboard. (Right) Primary, tabs; secondary, list.‬‬
‫هشیک اص الگظهای اطلیه نی حظاصضذ ةػضظاش الگظهای راصظیه ةکاس سطصذ‪.‬ایط نسئله که صها ‪Tab‬ها سا دس داخل یکذیگش ةتیضیذ‬
‫ةسیاس نشسظم اسد‪Tab ،‬ها ‪ Dashboard،‬ها ‪ Springboard ،‬ها‪ Gallery،‬ط‪...‬‬
‫‪www‬‬ ‫‪34‬‬
www.DrStartup.ir
(Left) Primary, tabs; secondary, dashboard. (Right) Primary, tabs; secondary, tabs.
www 35
‫غالطى ةش ایط حػذادی الگظی دیگشصیض طجظد داسصذ که ةسیاس نضاسث پیهایط راصظیه هسخضذ‪،‬طلی ایط الگظها نضاسث پیهایط‬
‫اطلیه صهی ةاصضذ‪.‬‬
‫‪Secondary navigations patterns‬‬
‫‪ -Page Carousel‬عفحاج چشخضی‬

‫ایط الگظ ةشای پیهایط عفحاحی که نضفغل هسخضذ ط سةقی ةه یکذیگش صذاسصذ ةسیاس کاسةشد داسد‪.‬صضاصه ی ‪(Page‬نضظظس‬
‫ههاش دایشى ها که دس اسالیذس های طب ساید ها صیض نشسظم اسد)صضاش دهضذى ی حػذاد عفحاج دس چشخط نی‬
‫ةاصضذ‪.‬غهلیاج کضیذش ةه چپ ط ساسد ‪،‬عفحاج سا حؿییش نی دهذ‪.‬‬
‫حهانی چهاس نزالی که دس ادانه آنذى اسد اص ایط الگظ دس داخل ‪Tab‬ها اسخفادى کشدى اصذ‪.‬‬
‫‪www‬‬ ‫‪36‬‬
www.DrStartup.ir
Nigella Quick Collection and Zappos
www 37
‫‪Yahoo! Finance and iMobile‬‬
‫الگظی ‪ Page Carousel‬داسای نحذطدید هایی صیض هسد‪.‬فشؼ کضیذ ةخظاهیذ آیخو هایی سا ةا حػذاد ةیضخش اص ‪ 8‬آیخو‬
‫صهایط دهیذ!‬
‫‪www‬‬ ‫‪38‬‬
‫‪ExcellentAnalytics—Too many pages‬‬
‫الگظی ‪ Page Carousel‬ةشای پیهایط آیخو هایی ةا حػذاد کو نضاسث اسد ‪.‬حخها اص یک الهاش ةغشی‬
‫ةشای صهایط حػذاد عفحاج نظجظد ط صخغی کشدش عفحه ی جاسی دس ایط الگظ اسخفادى کضیذ ‪.‬غهل‬
‫کضیذش ةه چپ ط ساسد ةهخشیط سطش حؿییش عفحاج اسد‪.‬‬
‫‪www‬‬ ‫‪39‬‬
‫‪ - Image Carousel‬حغظیش چشخضی‬

‫الگظی حغاطیش چشخضی نی حظاصذ ةغظسج دط ةػذی پیادى ساصی صظد‪.‬اپلیکیضط ‪IMDB‬اص الگظی ‪ Image Carousel‬ةشای‬
‫پیهایط فیلو هایی که ةیضخش حظسك کاسةشاش طیضید صذى اصذ‪ ،‬اسخفادى نی کضذ‪.‬نا اص ایط الگظ ةشای صهایط کاالهای طیژى دس‬
‫یک صشم افضاس ‪Android‬که ةشای‪ Adoble Flex‬فشاحی صذى ةظد‪ ،‬اسخفادى کشدیو !‬
‫‪IMDB and Adobe Flex 4.5 Showcase App‬‬
‫اپلیکیضط ‪ Photo Cookbook‬صیض یک نزال خظب اص صحظى ی ةکاسگیشی الگظی ‪ Image Carousel‬اسد التخه ؾزاها دس‬
‫دسخه ةضذی هایی ةغظسج سخظصی ةش اساس صظع ؾزا اسایه نی صظصذ‪.‬‬
‫‪www‬‬ ‫‪40‬‬
‫‪The Photo Cookbook‬‬
‫اپلیکیضط ‪ tap’n’Scrap‬صیض یک نزال جالث دس صنیضه ی ةکاسگیشی ایط الگظ دس‪2‬نذل اسد‪.‬آصها دس كسهد‪،Background‬‬
‫‪Frame Selection‬دس صشم افضاس اص الگظی ‪ Image Carousel‬ةغظسج دطةػذی ط ةشای اصخخاب ط دیذش دفخشچه ی‬
‫یادداصد ها اص سطش ‪Coverflow‬که ةغظسج سه ةػذی اسد اسخفادى کشدى اصذ‪.‬‬
‫‪Tap’n’Scrap‬‬
‫اپلیکیضط ‪ ANZ Banking‬جهد صهایط افالغاج یک حساب ط نضاةؼ پشداخد اص سطش سه ةػذی اسخفادى نیکضذ‪.‬التخه ةا‬
‫ایضکه ایط سطش جزاب اسد ط صهایه خظةی داسد ‪ ،‬طلی ةػذ اص چضذ ةاس کاسکشدش دیگش جزاةید خظدسا اص دسد نی دهذ!‬
‫‪www‬‬ ‫‪41‬‬
‫‪Image Carousel in ANZ for payment selection demos well, but gets old fast‬‬
‫الگظی ‪ Image Carousel‬ةشای صهایط نحخظاهای حاصى ةغظسج ةغشی نزل نلاالج ‪،‬نحغظالج ط حغاطیش‬
‫ةسیاس نضاسث اسد‪.‬نػهظال ایط الگظ ةا یکسشی ساهضهاهای ةغشی ةشای کاسةش که ةفههذ چگظصه ةیط آیخو‬
‫ها حشکد کضذ ههشاى نی ةاصذ‪.‬‬
‫‪www‬‬ ‫‪42‬‬
‫‪ - Expanding list‬لیسد های حظسػه ای ط ةاصصظصذى‬

‫الگظی لیسد های ةاص صظصذى ةه صها ایط انکاش سا نی دهذ که دس یک عفحه ةا کلیک ةش سطی آصها ‪ ،‬آیخو های ةیضخشی سا‬
‫ةغظسج ةاصصظصذى ط کضظیی ةتیضیذ‪ .‬دس اصذسطیذ صسخه ی ‪ Gingerbread‬اص ایط الگظ ةشای صهایط ساةله ی حهاس ها‬
‫اسخفادى نی کضذ‪.‬حهانی حهاس های نشحتك ةا یک صهاسى حلفط دس كالث یک سدیف صهایط دادى نی صظصذ‪ ،‬ةا صدش آیکظش‬
‫نشةظـ ‪ ،‬لیسد حظسػه نی یاةذ ط ةاص نی صظد ‪ ،‬ههچضیط آیخو های جضئی حش صهایط دادى نی صظصذ‪.‬‬
‫‪Android Call Log‬‬
‫ایط الگظ ةیضخش دس طةساید های ‪ Optimized‬صذى ةشای نظةایل کاسةشد داسد ‪،‬حا دس اپلیکیضط ها !التخه نی حظاش اص ایط الگظ‬
‫دس هش دط عظسج ةهشى نضذ صذ‪.‬ةشای نزال ساید ‪ www.Gap.com‬سا ةا نظةایل نشطس کضیذ‪ ،‬دس ایط طةساید ‪،‬اص ایط الگظ‬
‫ةشای دسخه ةضذی لتاس ها اسخفادى صذى اسد‪.‬‬
‫‪www‬‬ ‫‪43‬‬
‫‪Gap Mobile Website‬‬
‫ایط الگظ ةشای ایضکه افالغاج دكیم حش یک آیخو سا ةغظسج حذسیجی اسایه دهیو ‪،‬ةسیاس نضاسث اسد‪.‬‬
‫‪www‬‬ ‫‪44‬‬
www.DrStartup.ir
(Forms) ‫ فشم ها‬: ‫فغل دطم‬
:‫الگظها‬
Sign in, Registration, Checkout, Calculate, Search Criteria ,Multi-Step, Long Form
www 45
‫ةسیاسی اص صشم افضاسهای ححد طب ةقظس جذی نتخضی ةش فشم های طسطد افالغاج ‪ ،‬اصجام حضظیهاج ط‪...‬هسخضذ‪.‬ةا ایضکه‬
‫اسخاصذاسد های ةسیاس صیادی دس صنیضه ی فشاحی فشم های طسطد دادى‪ ،‬دس طب اسایه صذى اصذ هضظص صاهذ طب ساید هایی‬
‫هسخیو که داسای فشم های حشسضاک طسطد افالغاج هسخضذ که ةسیاس صانضاسث فشاحی صذى اصذ‪.‬نا کاسةشاش هو ‪ ،‬چظش چاسى‬
‫ای صذاسیو نجتظس هسخیو اص ایط فشم ها ةشای حکهیل فشآیضذ خشیذ‪ ،‬اسسال افالغاج ط پاسخگظیی ةه صظشسضجی ها اسخفادى‬
‫کضیو‪.‬‬
‫فشنها دس اپلیکیضط های نظةایل ‪،‬ةا نحذطدید های سایض عفحه طاةضاسها ی طسطد افالغاج ‪،‬نهلد ط نجال کهخشی ةشای‬
‫خقا کشدش ط فشاحی های صانضاسث سا داسصذ‪.‬‬
‫كتل اص فشاحی هشگظصه فشنی دس اپلیکیضط های نظةایل حخها نلاالج ط کخث صیش سا نقالػه کضیذ !‬
‫‪‬‬ ‫)‪Filling in the Blanks: Web Form Design, by Luke Wroblewski(Rosenthal Media‬‬
‫‪‬‬ ‫)‪Forms on Mobile Devices: Modern Solutions, by Luke Wroblewski(Smashing Magazine‬‬
‫‪‬‬ ‫)‪Mobile Form Design Strategies, by Chui Chui Tan (UX Booth‬‬
‫‪www‬‬ ‫‪46‬‬
‫الگظهای فشاحی ای که دس ادانه نی آیضذ افالغاج ط الگظهای نظجظد دس ایط کخث ط نلاالج سا کانل حش نی کضضذ‪.‬‬
‫‪Form patterns‬‬
‫‪www‬‬ ‫‪47‬‬
‫‪ - Sign In‬طسطد‬
‫فشم های طسطد ةه صشم افضاس ةایذ داسای حذاكل الهاصهای طسطدی ةاصضذ(صام کاسةشی‪ ،‬کلهه ی غتظس‪،‬دکهه ی طسطد‪،‬ساهضهای‬
‫کلهه ی طسطد‪،‬گضیضه ای ةشای رتد صام )‪.‬ةشخی اص صشم افضاسها ایط غهلیاج ط الگظ سا دس یک عفحه اصجام نی دهضذ ‪ ،‬ناصضذ‪:‬‬
‫اپلیکیضط ‪ Photobucket‬ط ‪. Groupon‬‬
‫‪Photobucket and Groupon‬‬
‫ةشخی دیگش اص اپلیکیضط ها نزل ‪Kik‬ط‪ Springpad‬ةه کاسةش عفحه ای ةا دط اصخخاب رتد صام ط طسطد سا صضاش نی دهضذط‬
‫کاسةش ةا اصخخاب هشیک اص آصها ةه عفحه ی نشةظـ هذاید نی صظد‪.‬اپلیکیضط هایی نزل ‪Springpad‬ط‪Groupon‬حخی‬
‫انکاش طسطد ةا اسخفادى اص سشطیس هایی نزل ‪ Facebook‬طسشطیس های دیگش سا صیض اسایه نی دهضذ‪.‬‬
‫‪www‬‬ ‫‪48‬‬
‫‪kik and springpad‬‬
‫یکی اص الگظهای جالث ‪ ،‬اسخفادى اص الگظی ةذطش صام کاسةشی اسد ط کاسةش جهد طسطد‪ ،‬فلك ةایذ پسظسد سا طاسد کضذ‪.‬کاسةش‬
‫دس صناصی که ةشصانه صغث نی صظد صضاسایی ط فلك دس عظسحی که ةخظاهذ ةه افالغاج حساسی دسخشسی پیذا کضذ ةایذ‬
‫‪Password‬سا طاسد کضذ‪.‬ایط الگظ دس نظسد صشم افضاسهای نالی ةسیاس پشکاسةشد اسد نزل اپلیکیضط کیف نجاصی‬
‫‪.PNCs‬التخه ایط الگظ دس صشم افضاسهای دیگش هو نی حظاصذ کاسةشد داصخه ةاصذ‪.‬‬
‫پیط فشؼ گشفخط ‪Pin code‬گظصی نظةایل ةه غضظاش کلهه ی غتظس هو نی حظاصذ کاسةشدی ةاصذ‪.‬‬
‫‪www‬‬ ‫‪49‬‬
‫‪PNC's VirualWallet‬‬
‫دس عفحه ی رتد صام اص خالكید ط صظآطسی خظدداسی کضیذ ط سػی کضیذ اص الگظهای نػهظل اسخفادى‬
‫صهاییذ‪،‬ةا ایط کاس ‪،‬کاسةش احساس ساحخی ةیضخشی داسد‪.‬دسؽهط حخها ساهکاسی ةشای ةه یاد آطسی کلهه ی‬
‫غتظس فشانظش صذى یا ههاش ‪Forget Password‬نػشطف دس صظشةگیشیذ‪.‬‬
‫‪www‬‬ ‫‪50‬‬
‫‪ - Registration‬رتد صام‬
‫رتد صام صیض ةایذ ناصضذ طسطد صانل کهخشیط گضیضه ها ةاصذ‪Chui Chui Tan .‬پیضضهاد نی دهذ‪ ،‬نظاسدی که کاسةشد صیادی‬
‫صذاسصذ ساةاکهال ةی ةاکی حزف کضیذ‪.‬نضظظس طی حزف گضیضه هایی نزل حاییذ ‪Email‬ط حاییذ ‪Password‬اسد‪.‬‬
‫‪PageOnce and Gowalla‬‬
‫اص آصجایی که صایذ ایط اطلیط فشنی ةاصذ که ةشای ةشصانه ی خظدحاش فشاحی نی کضیذ‪،‬حخها اص غضاطیط نضاستی که خظاصا‬
‫ةاصض ذ ةشای طسطد افالغاج اسخفادى صهاییذ ‪.‬اص ةکاسگیشی غضاطیط افلی اجضخاب کضیذ ط دس غظؼ اص غضاطیط غهظدی اسخفادى‬
‫کضیذ ‪.‬ناصضذ‪Evernote:‬یا ایضکه اص الگظی ‪Watermarked Field Label‬ةجای اسخفادى اص غضاطیط اسخفادى صهاییذ نزل‬
‫اپلیکیضط ‪.Intuit‬‬
‫‪www‬‬ ‫‪51‬‬
www.DrStartup.ir
Horizontal labels can end up truncated
www 52
‫‪Vertical labels and watermark label‬‬
‫اصفیذةک های دسطش خقی جهد آگاى ساصی کاسةش اسخفادى کضیذ ‪.‬ناصضذ اپلیکیضط ‪Kik‬که ةشای آصاد ةظدش صام کاسةشی ةه‬
‫عظسج دسطش خقی کاسةش سا نقلؼ نی ساصد‪ ،‬جهد صکخه ها ط حشفضذهای ةیضخش ةه فغل هضد سجظع کضیذ‪.‬‬
‫‪www‬‬ ‫‪53‬‬
‫‪Inline feedback for user name availability in kik‬‬
‫حاجایی که نیخظاصیذ فشم سا سادى ط کظحاى فشاحی کضیذ طههچضیط ةشای کاسةشاصی که كتال رتد صام کشدى‬
‫اصذ طسطد ةه صشم افضاس سا سادى کضیذ ‪.‬‬
‫‪www‬‬ ‫‪54‬‬
‫‪ - Checkout‬صهایی کشدش خشیذ‬

‫دسایط ةشهه ی صناصی ‪ Checkout‬های نظةایلی ةیضخش دس ساید هایی که ةشای نشطس نظةایل ةهیضه صذى اصذ‪،‬کاسةشد داسد طلی‬
‫ههیط كظاصیط سا صیض نیخظاش ةشای اپلیکیضط های نظةایلی صیض ةکاسةشد!‬
‫اص اسخاصذاسدهای اةضاس نظةایل ةشای فشاحی فشم ‪Checkout‬اسخفادى کضیذطسػی کضیذ چضذیط عفحه اص فشآیضذ ‪Checkout‬سا‬
‫دس یک عفحه ةاكالتی خاظ اسائه دهیذ‪.‬خشدى فشطصاصی نزل ‪Zappos‬ط‪Apple‬اص یک فشم کظحاى‪ Checkout‬ةاكسهد های‬
‫نخخلف که كاةلید پیهایط طصهایی صذش خشیذ سا داسصذ ‪،‬اسخفادى نی کضضذ‪.‬ایط دس حالی اسد که خشدى فشطصاش دیگش نزل‬
‫‪Target‬ط‪ Gilt‬ةه سادگی اص فشم های فظالصی اسخفادى نیکضضذ‪.‬اص نکاصیضم های پیضشفخه که دس آیضذى اص نحتظةید خاعی‬
‫ةشخظسداس خظاهضذ ةظد اسخفادى کضیذ‪ .‬نزل‪:‬نکاصیضم رخیشى افالغاج کاسج یا طسطد جهد صهایی کشدش سفاسش‪.‬‬
‫اصیک آیکظش ةا نفهظم ان ضید دسةاالی عفحه ی ةشصانه اسخفادى کضیذ که ةه کاسةش صضاش دهذ اسحتاـ انضی ةشكشاس صذى اسد‪.‬‬
‫‪Wizard‬های ‪Checkout‬نزل اپلیکیضط ‪،Home Depot‬نهکط اسد یک ساى حل سشیؼ طارشگزاسصتاصذ‪،‬الگظی چضذگانی‬
‫ساةشای گشفخط ایذى های ةیضخش نشطسکضیذ‪.‬‬
‫‪www‬‬ ‫‪55‬‬
www.DrStartup.ir
Home Depot's checkout wizard is suboptimal for a mobile application
www 56
‫‪Checkout: Apple and Zappos‬‬
‫سػی کضیذ فشاحی سا ةشای سشغد ‪ ،‬ارشپزیشی ‪،‬کاسایی ط افهیضاش اصجام دهیذ!فیلذهای ؾیش ؽشطسی سا‬
‫حزف طیا کهیضه کضیذطحاجایی که انکاش داسد فشآیضذ سا کظحاى کضیذ‪.‬‬
‫‪ -Calculate‬نحاسته‬
‫ةشصانه هایی که كالث نحاستاحی داسصذ ‪،‬نزل ‪ Weight tracker‬ها‪ Tax Estimators ،‬هایا نحاستاج سظد طام ط‪...‬ههگی‬
‫صیاصنضذ طسطد افالغاج هسخضذ‪.‬التخه ایط فشم ها نیخظاصضذ داسای کضخشل های خاظ ط طیژى ‪،‬ههچضیط چیذناش ‪Layout‬‬
‫‪،‬گظصاگظش ةاصضذ طلی ةاصهو پیشطی اص یکسشی اسخاصذاسدها ط الگظها نیخظاصذ نفیذ طاكؼ صظد‪.‬‬
‫‪www‬‬ ‫‪57‬‬
‫‪Custom controls: CardioTrainer and WeightBot‬‬
‫چیذناش ‪ Label‬ها ‪،‬فظصد ها ‪،‬جایگاى دکهه ها ‪،‬سصگ صنیضه ط‪ ...‬ههگی دس کاسةشد پزیشی فشنها دس اپلیکیضط های نظةایل‬
‫نظرش هسخضذ‪.‬ةشای نزال کاسةشد پزیشی دط اپلیکیضط ‪ Valspar Paint Calculator‬ةا چیذناش نضاسث فیلذ ها ط غضاطیط ط‬
‫اپلیکیضط ‪ Behr Paint Calculator‬سا ةا یکذیگش نلایسه کضیذ‪.‬‬
‫‪www‬‬ ‫‪58‬‬
‫‪Valspar Paint, easy to read; Behr Paint, harder to read‬‬
‫ةهخشیط ةشصانه های نحاستاحی ةقظس جذی طسطدی ها سا ةا یک الهاش ةغشی صهایط نی دهضذ‪.‬نزال دس ةشصانه ‪ TaxCaster‬اص‬
‫یک الهاش ‪ guage‬ةشای کو ط صیاد کشدش نالیاج اسخفادى صذى اسد‪،‬یا ایضکه ةشصانه ‪ HypoCalc‬اص یک صهظداس ةشای ایط کاس‬
‫ةهشى ةشدى اسد‪.‬‬
‫‪www‬‬ ‫‪59‬‬
‫‪TaxCaster and HypoCalc‬‬
‫اص الگظ های اسخاصذاسد ط كظاصیط غهظنی ةشای فشاحی ط چیذاش ایط فشنها اسخفادى کضیذ‪.‬اگش ةشایخاش انکاش‬
‫داصد صخایج سا دس ههاش عفحه ةغظسج ةغشی ةه کاسةش صضاش دهیذ!‬
‫‪www‬‬ ‫‪60‬‬
‫‪- Search Forms‬فشنهای جسخجظ‬

‫ةشخی اص جسخجظ ها صیاصنضذ طسطد افالغاج چضذگاصه ط صشایك جسخجظی نخفاطج هسخضذ حا صخایج نضاستی سا ةش اساس صیاص‬
‫های کاسةش اسایه دهضذ‪،‬ناصضذ الگظ های فشاحی فشنها ‪،‬که دس كسهخهای كتلی حظؽیح دادى صذ‪،‬فشنهای جسخجظ صیض ةایذ‬
‫داسای حذاكل فیلذهای طسطد دادى ةاصضذ ط گضیضه های اص پیط اصخخاب صذى نضاسث داصخه ةاصضذ‪.‬‬
‫ةشای نزال دس ةشصانه ‪ Kayak‬که دس ةیط پشطاصها ةه جسخجظ نی پشداصد‪،‬ةقظس پیط فشؼ ةلیك های سفد ط ةشگضد ةشای یک‬
‫صفش دس کالس پشطاصی ‪Economic‬اص پیط اصخخاب صذى اصذ‪.‬آصها اص یک فشم طیژى جسخجظ ط دس یافد افالغاج ةا یک دکهه ةا‬
‫غضظاش جسخجظ اسخفادى نی کضضذ‪.‬دس اپلیکیضط ‪، Open Table‬ةقظس پیط فشؼ نکاش ةش اساس نکاش فػلی صها ط صناش های‬
‫پیط سط ‪ ،‬ةشای جسخجظی سسخظساش ها اسخفادى نی کضذ‪.‬‬
‫‪Kayak and Open Table‬‬
‫اپلیکیضط های جسخجظی ناصیط‪Edmund‬ط ‪ New Car Inventory‬صیض اص فشنهای یک عفحه ای ةشای اصجام جسخجظ‬
‫اسخفادى نی کضضذ‪.‬آصها یک صخیجه جسخجظی آصالیط ةش اساس حکهیل حذسیجی فشم جسخجظ اسایه نی دهضذ‪.‬‬
‫‪www‬‬ ‫‪61‬‬
‫‪Edmund's New Car Research and New Car Inventory‬‬
‫‪Trulia‬ط ‪ Realtor.com‬صشایك جسخجظی یکساصی سا اسایه نی دهضذ طلی طاسك کاسةشی ‪ Trulia‬ةشای حؿییش پاسانخش های‬
‫طسطدی سادى حش اسد ‪.‬ایط دس حالی اسد که ‪ Realtor.com‬اص فیلذهای صیادی ةشای اصجام جسخجظ اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪62‬‬
‫‪Trulia's concise search form and REALTOR.com's long form‬‬
‫اص گیج کشدش کاسةش ةا اسایه گضیضه های صیاد خظدداسی کضیذ‪.‬سػی کضیذ حهشکض غهلیاج جسخجظ سا دس یک‬
‫عفحه كشاس دهیذ‪.‬اص کضخشلهایی اسخفادى کضیذ که کاسةشی سادى حشی داصخه ط سشیؼ حش هسخضذ‪.‬‬
‫‪www‬‬ ‫‪63‬‬
‫‪Multi-Step‬‬
‫دس عفحاج کظچک نظةایل‪ ،‬ایط انکاش نزل عفحاج طب طجظد صذاسد که صها گانها ط نشاحل یک فشآیضذ سا صضاش‬
‫دهیذ‪.‬ةشا ی ایط نضظظس ةایذ طؽػید فػلی فشآیضذ ط حػذاد گام های کل فشآیضذ ةه کاسةش صضاش دادى صظصذ‪،‬ناصضذ اپلیکیضط‬
‫‪.Fring‬‬
‫‪fring‬‬
‫دس صناش فشاحی فشآیضذ های فظالصی حش ةایذ نظاسد ةیضخشی سا دس صظش گشفد‪.‬سفاسش گیشصذگاش نحغظالحی ناصضذ ‪Chipotles‬‬
‫‪ Online‬ط صظصیذصی ‪ Starbucks‬دس نشاحل ط فشآیضذ سفاسش ط کاس اص دکهه ‪Next‬ط ‪ Continue‬اسخفادى نی کضضذ‪.‬طلی ایط‬
‫کاس‪،‬سطیکشد های کاسةشدپزیشی سا دس صنیضه پیهایط صیش سئظال نی ةشصذ‪.‬ةه کاسةش اجاصى ةذهیذ که ةذاصذ هو اکضظش دس کجا‬
‫كشاس داسد ط ةه کجا خظاهذ سفد ( نزال گام ‪ X‬اص ‪.)Y‬پیهایط آساش ط صفاف دس فشنهای نظةایل صیض ةسیاس نهو ط اساسی‬
‫هسخضذ‪،‬صیشا دس ایط فشنها ةسیاساحفاق نی افخذ که کاسةش صدى صظد ط غهلیاج سا صیهه کاسى سها کضذ‪.‬‬
‫‪www‬‬ ‫‪64‬‬
‫‪Chipotle and Starbucks‬‬
‫یک ساى کاس نضاسث حش ط ةهخش فشاحی نشةظـ ةه اپلیکیضط ‪TurboTax‬ط ‪ SnapTax‬اسد که دس آصها گانها ط دکهه اسسال‬
‫ههگی دس یک عفحه اسایه صذى اصذ‪.‬هش یک اص گانها نی حظاصذ ةه حضهایی پیهایط ط کانل صظصذ‪.‬ایط سطیکشد یک عفحه ای‬
‫نی حظاصذافالغاج پیهایضی اسصصهضذی سا ةه کاسةش اسایه دهذ‪ (.‬دس کل ‪ 3‬گام دس فشآیضذ طجظد داسصذ که ‪ 2‬نظسد اص آصها هضظص‬
‫کانل صضذى اصذ)‪،‬ههچضیط جهد حاکیذ ةیضخش خالعه ای اص فشآیضذ اسایه صذى اسد حا كتل اص اسسال نشطس صظد‪.‬‬
‫‪www‬‬ ‫‪65‬‬
‫‪TurboTax Snap Tax‬‬
‫اپلیکیضط ‪ Square‬اص یک صظاس پیضشفخه خظش فشم دس كسهد ةاالی صشم افضاس اسخفادى نیکضذ که هو ةغظسج ةغشی صضاش‬
‫نی دهذکه حػذاد گانها چه حػذادی اسد ط هو ایضکه هو اکضظش دس کذام كسهد اص فشآیضذ كشاس داسیو!‬
‫‪www‬‬ ‫‪66‬‬
‫‪Square: set-up process‬‬
‫ههظاسى ةه کاسةش صضاش دهیذ که هو اکضظش دس کذام نشحله اسد ط ةه کذام كسهد ها نیخظاصذ‬
‫ةشطد‪.‬فیلذهای ؾیشؽشطسی ط عفحاج ةی نظسد سا حزف کضیذ‪.‬‬
‫‪www‬‬ ‫‪67‬‬
‫‪ - Long Forms‬فشنهای فظالصی‬

‫ةشخی اص فشنها صیاص ةه ‪ Scrolling‬داسصذ‪.‬صکخه ط حشفضذ کاسةشدی دس ایط فشنها ایط اسد که دکهه های نشةظـ ةه غهلیاج ط‬
‫خشطج اص فشم ( نضظظس دکهه ‪ Cancel‬کشدش ط یا ‪ Escape‬اسد) سا کجا كشاسدهیو‪.‬اپلیکیضط های ‪ Zappo‬ط ‪ Skype‬اص نذل‬
‫‪ Modal‬دس صشم افضاس ‪ iOS‬خظد اسخفادى کشدى اصذ‪.‬دس ایط نذل دکهه های ‪ Escape‬ط ‪ Command‬ههظاسى دس ةاالی فشم‬
‫صهایط دادى نی صظصذ‪.‬‬
‫‪Long forms: Zappos and Skype‬‬
‫التخه ایط ساهکاس دس سیسخو غانل های دیگش نػهظل صیسد‪،‬طلی اگش خیلی سادى دکهه های نشةظفه سا دس اصخهای فشم‬
‫ةگزاسیذ‪،‬نضاسث اسد‪.‬‬
‫‪www‬‬ ‫‪68‬‬
‫‪eBay's long listing form and Gilt's long checkout form‬‬
‫ةشای فشاحی ایضگظصه فشنها اص ةهخشیط سطصها ط الگظهایی که دس كسهخهای كتلی حظؽیح دادى صذ ةه ههشاى ساهضهای خاظ هش‬
‫سیسخو غانل اسخفادى صهاییذ‪.‬اپلیکیضط ‪ Discover Card‬ةغظسج ةغشی ةیط دکهه غهلیاحی فشم ط دکهه اصغشاف یا ههاش‬
‫‪ Escape‬حفاطج كایل صذى اسد طلی آصها سا ةا حشکیتی صادسسد دس سیسخو ‪ iOS‬چیذى اسد‪.‬اپلیکیضط ‪ Sam’s Club‬دکهه‬
‫ها سا ةه حشحیث نضاستی كشاس دادى اسد طلی دکهه ها اص صظش سصگی که ةکاسگشفخه صذى اسد داسای طصش یکساصی هسخضذ‪،‬ةشای‬
‫ههیط نضظظس صها ةایذ آصها سا ةه دكد ةشسسی کضیذ حا نظسد دسسد سا اصخخاب کضیذ‪.‬‬
‫‪www‬‬ ‫‪69‬‬
‫‪Discover, good design, wrong order; Sam's Club, correct layout, bad design‬‬
‫ةقظس نغضظغی فشم سا ةه كسهخها ط گام های نخفاطحی ةشای جلظگیشی اص ةکاسگیشی ‪ Scroll‬صضکضیذ‪.‬حهانی‬
‫فیلذهای ةی نغشف ط کو اههید سا حزف کضیذ‪.‬اص اسخاصذاسدهای ‪ OS‬نشةظفه ةشای چیذناش کلیذ های‬
‫حاییذ ط اصغشاف فشنها اسخفادى صهاییذ‪.‬‬
‫‪www‬‬ ‫‪70‬‬
www.DrStartup.ir
‫ جذاطل ط لیسد ها‬:‫فغل سظم‬
: ‫الگظها‬
Basic Table, Headerless Tables, Grouped Rows, Fixed Column, Cascading Lists, Editable Tables,
Tables with Visual Indicators, Overview plus Data
www 71
‫ةسیاسی اص نضخشیاش نا نػهظال داسای ةشصانه های ساصناصی پیضشفخه ای هسخضذکه ةهشى طسی آصها سا افضایط نی دهذ‪.‬ایط‬
‫اةضاسها نػهظال صانل جذاطلی هسخضذ که پش اص افالغاج نی ةاصذ‪.‬جذطلی سا حغظس کضیذ که حاطی افالغاج صیادی اسد که‬
‫هو ةغظسج افلی ط هو ةغظسج غهظدی داسای ‪ Scroll‬اسد‪.‬آصها نی خظاهضذ ةذاصضذ که ایط افالغاج سا نا چگظصه دس صشم‬
‫افضاسهایهاش صهایط خظاهیو داد‪.‬خظب‪،‬طاكػید ایط اسد که نا ةه ساحخی‪ ،‬ایط کاس سا ةشایضاش اصجام صهی دهیو!التخه‬
‫نضظظسم ایط اسد که نا ایط کاس سا ةه ههاش ستک ط صیظى طب اصجام صهی دهیو‪.‬ههاصقظس که دس كسهد های كتل صیض اصاسى‬
‫کشدیو‪،‬نا اعل سادى ساصی ط صهایط نههخشیط افالغاج کاسةشاش سا صیض دس ایضجا اسخفادى خظاهیو کشد‪.‬‬
‫ةشای نزال یک لیسد ةلضذ اص صهشاج آصنظش داصط آنظصاش ةهخش اسد که دس كالث یک صهظداس صهایط دادى صظد حا جذطل‪.‬‬
‫صها ةا کلیک کشدش هش كسهد دس جذطل ‪،‬لیسد داصط آنظصاش دس آش ةاصى صهشى سا خظاهیذ دیذ‪.‬‬
‫‪Redesigned table‬‬
‫ط نا نیخظاصیو یک صهای دیگش صیضاص افالغاج داصط آنظصاش اسایه دهیو ط آش یک جذطل ةذطش ‪ Header‬اسد که داسای‬
‫كاةلید جسخجظی دایضانیک جهد دسخشسی سشیؼ ةه صخایج آصنظش داصط آنظصی خاظ اسد ‪.‬‬
‫‪www‬‬ ‫‪72‬‬
‫‪Alternate view to the bell curve chart‬‬
‫طكخی که صها دادى های اساسی ط نهو صشم افضاس سا دس جهد صهایط صضاسایی کشدیذاص یکی اص الگظهای صیش جهد صهایط‬
‫افالغاج اسخفادى صهاییذ ‪.‬‬
‫‪www‬‬ ‫‪73‬‬
www.DrStartup.ir
Table patterns
www 74
‫‪Basic Table‬‬
‫ایط الگظ یک جذطل راةد ةا ‪ Header‬نی ةاصذ که چیذناصی نتخضی ةش ‪ Grid‬داسد‪.‬اسخفادى اص سصگ های یک دسنیاش (‬
‫نػشطف ةه الگظی گظسى خشی) یا کضیذش خك دس ةیط سقشها نی حظاصذ خظاصایی ایضگظصه جذاطل افالغاحی سا ةاال ةتشد‪.‬‬
‫‪MicroStrategy Mobile and FanGraphs Baseball‬‬
‫اص ةکاسگیشی سصگ های حیشى ةشای خقظـ جذطل خظدداسی کضیذ‪.‬ههچضیط خقظـ غهظدی جذطل سا صیض سسو‬
‫صکضیذ‪.‬نخظش سا چپ چیط ط اغذاد سا ساسد چیط کضیذ‪.‬عفحه سا صلظؽ صکضیذ‪.‬اص الگظ های جایگضیط دس‬
‫نظاسدی که حجو افالغاج عفحه صیاد اسد اسخفادى صهاییذ‪.‬‬
‫‪ - Headerless Table‬جذطل ةذطش ‪Header‬‬

‫‪ Headerless Table‬ها صانل جذاطلی هسخضذ که داسای سقشهای پشحجو نیتاصضذ که افالغاج ط نخؿیشهای گظصاگظصی سا‬
‫دس نظسد یک صی اسایه نی دهضذ ط هیچ سخظصی ط غضظاصی صذاسصذ‪.‬دس ایط سطش نشسظم اسد که نههخشیط سخظش جذطل ةا‬
‫فظحضی دسصد ط سایش افالغاج سخظصها ةا فظصد ط سصگی صاصک حش صهایط دادى نی صظصذ‪.‬اپلیکیضط ‪ Realtor.com‬ةشای‬
‫صهایط افالغاحی که نخط آصها صیاد اسد اص سطش خالعه ساصی اسخفادى نی کضذ‪.‬نزال غتاسج ‪Single Family‬که یکی اص‬
‫افالغاج سخظش ها اسد ةغظسج …‪ Single‬یا …‪ Single Fam‬صهایط دادى نی صظد‪.‬‬
‫‪www‬‬ ‫‪75‬‬
‫‪REALTOR.com and Bank of America‬‬
‫(‪)5-3‬‬
‫ایط الگظ ةشای صهایط لیسخی اص آیخو ها ( نزل عظسج حساب ‪،‬اصتاس‪،‬دسخظساج ؾزایی ‪،‬آلتظم ها ط‪ )...‬ط صخایج جسخجظ ها‬
‫ةسیاس ایذى آل ط نفیذ اسد‪.‬ناصضذ لیسد ها ‪،‬ایط الگظ صیض ةشای پیهایط سشیؼ ط اصخخاب آیخو ها کاسةشد داسد‪.‬‬
‫صهایخا اص ‪ 3‬سدیف دس هش سدیف پش حجو اسخفادى کضیذ‪.‬اص فظصد های صاصک حش ط سصگ های سطصط حش ةشای‬
‫افالغاحی که اص اههید کهخشی ةشخظسداس هسخضذ اسخفادى صهاییذ‪.‬هیچگاى ةا حذس ط گهاش غضغش‬
‫افالغاحی نههخش سا اصخخاب صکضیذ‪.‬دكیلا اص نضخشی خظد ةخظاهیذ ایط غضغش افالغاحی سا جهد فشاحی‬
‫ةهیضه حش ةه صها نػشفی کضذ‪.‬‬
‫‪ - Fix Column‬سخظش های راةد‬

‫ةشای جذاطل ةضسگ صایذ الگظی ‪ Fix Column‬ةضا ةه صشایك ةشصانه نفیذ طاكؼ صظد ‪.‬دس اپلیکیضط ‪ Roambi‬اطلیط سخظش اص‬
‫سهد چپ داسای سخظصی ةا غشؼ راةد اسد که كاةل ‪ Scroll‬کشدش نیتاصذ‪.‬اپلیکیضط ‪ Fidelity‬اص سخظش های ةا اصذاصى‬
‫‪www‬‬ ‫‪76‬‬
‫راةد دس سهد چپ ط ساسد اسخفادى نی کضذ‪.‬التاكی سخظش ها كاةل چشخط ط حشکد هسخضذ‪.‬طلی ایط سطش اص سطصی که‬
‫‪ Roambi‬اسخفادى کشدى اسد پیچیذى حش ط سخد حش نی ةاصذ‪.‬‬
‫)‪Roambi and Fidelity (middle area scrolls‬‬
‫(‪)6-3‬‬
‫ةا اسخفادى اص الهاصهای ةغشی کاسةش سا نخظجه کضیذ که دكیلا کذام سخظش ها داسای اصذاصى راةد ط کذام‬
‫یک كاةلید ةکاسگیشی ةغظسج چشخضی سا داسصذ‪.‬‬
‫‪ -Overview plus Data‬صهایه ط خالعه دادى‬

‫الگظی ‪ Overview Plus Data‬حاطی خالعه ط چکیذى افالغاج جذطل اسد که نػهظال ةغظسج جذاگاصه سطی هش سخظش‬
‫جذطل صهایط دادى نی صظد‪.‬ةهخشیط صهظصه نظسد غالكه نط دس حظصى طب که اص ایط الگظ ةسیاس غالی ةهشى نضذ صذى اسد‬
‫طةساید ‪ SpendAnalyzer‬اسد‪.‬‬
‫‪www‬‬ ‫‪77‬‬
‫‪Discover SpendAnalyzer‬‬
‫دس صشم افضاس های نظةایل‪،‬نزل صشم افضاس حساب های ةاصکی آنشیکا‪،‬نظجظدی حساب دس حساب های پس اصذاص ةا سصگ ط‬
‫فظصخی دسصد حش دس ةاالی نضخغاج حساب آطسدى صذى اسد‪.‬دس نزالی دیگش اص ‪، NASDAQ.com‬خالعه افالغاج‬
‫ةغظسج راةد اسایه صذى اسد ط صها نیخظاصیذ ةه ساحخی دس ةیط دادى ها پیهایط کضیذ ةذطش آصکه خالعه ط چکیذى افالغاج‬
‫سا اص دسد ةذهیذ ‪.‬‬
‫‪www‬‬ ‫‪78‬‬
‫‪Bank of America and QFolio‬‬
‫(‪)8-3‬‬
‫طةساید ‪ Adobe Catalyst‬اص یک صهظداس ةشای صهایط چکیذى ط خالعه استخفادى نتی صهایذ‪.‬التخته فشاحتی ایتط صهتظداس کهتی‬
‫صیاص ةه اعالح داسد‪،‬صیشا صاخػ های صهایط دادى صذى دس صهظداسخظاصا صیستخضذ‪ ProofPoint.‬اص سطصتی جالتث حتش ط نضاستث‬
‫حش ةشای صهایط صاخػ ها اسخفادى کشدى اسد‪.‬‬
‫‪www‬‬ ‫‪79‬‬
‫‪SiteCatalyst and ProofPoint‬‬
‫(‪)9-3‬‬
‫خالعه افالغاج‪ ،‬ةایذ ههظاسى دس كسهد ةاالی افالغاج اسایه صظصذط ههچضیط ةایذ ةه ساحخی اص سظی‬
‫کاسةش كاةل اسخضخاج ط دسک صذش ةاصضذ‪.‬‬
‫‪ – Grouped Rows‬سقش های دسخه ةضذی صذى‬

‫دسخه ةضذی سقشها صیض نی حظاصذ اةضاس نضاستی ةشای اسخضخاج ط ححلیل دادى ها ةاصذ‪.‬دسخه ةضذی نی حظاصذ ةغظسج های‬
‫گظصاگظصی اصجام صظد‪.‬نزال دسخه ةضذی ةغظسج حاسیخ اصجام نػانالج که دس اپلیکیضط ‪ Mint‬دیذى نی صظد یا ةغظسج‬
‫خالعه ای اص صیش نجهظغه ها ةاصذ‪،‬ههاصقظس که دس اپلیکیضط ‪Microstrategy Mobile‬اص ایط سطش اسخفادى صذى اسد‪.‬‬
‫‪www‬‬ ‫‪80‬‬
‫‪Mint and MicroStrategy‬‬
‫ةغظسج ةغشی ‪،‬سقشهای حاطی خالعه افالغاج سا اص سایش سقشهای جذطل جذا کضیذ‪.‬‬
‫‪ - Cascading Lists‬لیسد های آةضاسی‬

‫طاؽح اسد که اسخفادى اص یک دسخد صهایط افالغاج ‪،‬ةشای عفحاج نظةایل اص دیذگاى کاسةش کاس صیاد جالتی صیسد‪،‬طلی‬
‫لیسد های آةضاسی اص صظش غهلکشد ط نفهظم ههیط غهلیاج سا پیادى ساصی نی کضضذ‪.‬‬
‫دس اپلیکیضط ‪ Wine Spectator‬کاسةش نی حظاصذ ةا اسخفادى اص ایط الگظ ةیط صهش ها ط صظصیذصی ها ةه ساحخی پیهایط صهایذ‪.‬‬
‫‪www‬‬ ‫‪81‬‬
‫‪WineSpectator‬‬
‫‪ iOS‬صام ایط الگظ سا ‪ Table View‬گزاص خه اسد که دس كالث یک الهاش طاسك کاسةش دادى ها سا دس یک سخظش ط چضذ سقش‬
‫صهایط نی دهذ‪.‬دس اپلیکیضط ‪ Drop Box‬اص ایط الگظ ةشای پیهایط راصظیه دس ‪ tab‬ها اسخفادى صذى اسد‪.‬‬
‫‪DropBox‬‬
‫سػی کضیذ اص ایط الگظ ةشای دادى های نسقح ( نضظظس دادى هایی که حذاکزش سه سقح پیهایط داسصذ)‬
‫اسخفادى صهاییذ‪.‬پیهایط غهیم دس نظسد نظاسدی که خظد کاسةش ساخخاس دادى ها سا حػشیف نی کضذ ؾیش‬
‫كاةل پیط گیشی اسد‪.‬‬
‫‪www‬‬ ‫‪82‬‬
‫‪ - Table with visual indicators‬جذطل ةا الهاش های ةغشی‬

‫اسخفادى اص آیکظش ها ط جلظى های ةغشی نی حظاصذ صلط نههی دس اصخلال افالغاج ط اصخخاب سادى حش آیخو های نظسد غالكه‬
‫دس یک جذطل داصخه ةاصذ‪.‬اپلیکیضط ‪ My Diet Calendar‬ةا اسخفادى اص یک الهاش گشافیکی فلط یا پیکاش ط سصگ نضاسث‬
‫نضخػ نی کضذ که آیا صها ةیط اص حذ نجاص کالشی دسیافد کشدى ایذ یا خیش؟!‬
‫دس اپلیکیضط ‪ Roambi‬اص الهاش گشافیکی صهظداس ط آیکظش های نشحتك جهد اسایه گضاسصاج فشطش آیخو ها اسخفادى صذى‬
‫اسد‪.‬‬
‫‪My Diet Calendar and Roamb‬‬
‫جهد کسث افالغاج ةیضخش دس نظسد صهظداسهای خقی ةه فغل ‪ 6‬سجظع کضیذ‪.‬‬
‫اص آیخو ها ط الهاش های گشافیکی نضاسث که ةه سشغد نفهظم سا اصخلال نی دهضذ اسخفادى کضیذ‪.‬سػی‬
‫کضیذ اص آیکظش های ؾیش نػهظل ط سایگاش ةشای ایط کاس اسخفادى صکضیذ!‬
‫‪www‬‬ ‫‪83‬‬
‫‪ - Editable Table‬جذطل كاةل طیشایط‬

‫جذاطل های كاةل طیشایط ةغظسج اصحغاسی ط خاظ دس ةشصانه های عفحه گسخشدى ط اپلیکیضط هایی نزل ‪Open Office‬‬
‫دیذى نیضظصذ‪.‬ةسیاسی اص اسخاصذاسد ها ط كظاصیضی که ححد طب ةشای الگظی ‪ Editable Table‬طجظد داسصذ دس ایضجا صیض ةشای‬
‫اپلیکیضط های نظةایل صیض کاسةشد داسصذ‪.‬‬
‫‪ ‬ةغظسج صفاف ط ةغشی سلظلی که جهد طیشایط اصخخاب صذى اسد سا نضخػ کضیذ‪.‬‬
‫‪ ‬اگش افالغاحی دس سلظل كشاس اسد دسج صظد اص فشند ط چیذناش خاعی اسخفادى نیکضذ ‪،‬گضیضه ها ط طیشایضگش‬
‫نشةظفه سا اسایه دهیذ‪.‬‬
‫‪ ‬خقاها ط فیذةک های الصم سا دس صناش رخیشى ساصی افالغاج ‪،‬صه دس صناش اغهال حؿییشاج اسایه دهیذ‪.‬‬
‫‪QuickOffice on Android and Windows Smart Grid‬‬
‫‪www‬‬ ‫‪84‬‬
‫ةش خالف صشم افضاس های ححد طب ‪،‬جذاطل ةا كاةلید طیشایط دس گظصی های نظةایل ةشای کاسةشی صیاد ‪،‬خیلی نضاسث‬
‫صیسخضذصیشاکه پیهایط اص فشیم ‪ Keyboard‬های نظةایلی دس ةسیاسی اص گظصی ها پضخیتاصی صهی صظد‪.‬‬
‫اص الگظ های فشاحی جذاطل ةا كاةل طیشایط که ةشای صشم افضاس های ححد طب ط ‪ Desktop‬اسایه صذى اصذ‬
‫اسخفادى کضیذ‪.‬دس صناصی که صیاص ةه طیشایط حجو غظیهی اص دادى داسیذ اص ایط الگظ اسخفادى صکضیذ‪.‬‬
‫‪www‬‬ ‫‪85‬‬
www.DrStartup.ir
‫نشحث ساصی ط فیلخش‬، ‫ جسخجظ‬: ‫فغل چهاسم‬
: ‫الگظ ها‬
Explicit Search, Auto-complete, Scoped Search, Saved & Recent, Search Criteria (form), Search
Results, Onscreen Sort, Sort Order Selector, Sort Form, Onscreen filter, Filter Drawer, Filter Dialog,
Filter Form
www 86
‫یک سطص که دس یک سسخظساش نحلی نضخظش ؾزا ةظدم ‪،‬هضگانی که دسحال نقالػه ط طسق صدش یکسشی اص سطصصانه های آگهی‬
‫ةظدم ‪،‬دس آصجا ةظد که نخظجه صذم که نا دس صصذگی سطصنشى چلذس ةه ‪ 3‬آیخو جسخجظ ‪،‬نشحث ساصی ط فیلخش کشدش افالغاج‬
‫طاةسخه صذى ایو‪،‬که نخاسفاصه یا خظصتخخاصه ایط انکاصاج دس سساصه های نخضی یا کاؾزی طجظد صذاسصذ‪.‬صهاید کاسی که دس‬
‫سساصه های نتخضی ةش کاؾز نی حظاش اصجام داد دسخه ةضذی اسد‪ .‬دس ؾیش ایضغظسج صها ةایذ ةغظسج خقی نقالث سا نشطس‬
‫کضیذ!‬
‫نط حشجیح نی دهو ةشای نشطس آگهی ها اص اپلیکیضط هایی که دس نظةایلو هسد اسخفادى کضو! نزل لیسد آگهی های اسایه‬
‫صذى دس اپلیکیضط ‪.Craig‬‬
‫طلی ایط نسئله نط سا ةه حانل طاداصد‪،‬دس حالیکه نا ةغظسج سطصنشى اص انکاصاج جسخجظ‪،‬فیلخش کشدش ط نشحث ساصی دس‬
‫دصیای دیجیخال اسخفادى نی کضیو‪،‬صکاج ظشیف ط حفاطج های ظشیفی دس ةکاسگیشی ایط انکاصاج دس اپلیکیضط های نظةایل‬
‫طجظد داسد‪.‬دس ایط فغل نا ةه کاطش ط نػشفی الگظهای نخخلفی دس صنیضه غهلیاج جسخجظ ‪،‬نشحث ساصی ط فیلخش کشدش دس‬
‫اپلیکیضط های نظةایل خظاهیو پشداخد‪.‬‬
‫‪ - Search‬جسخجظ‬
‫‪Peter Morville‬ط ‪ Jeffery Callendar‬یک خالعه جانؼ اص الگظهای جسخجظ سا دس کخاةی ةا غضظاش "الگظهای جسخجظ ‪:‬‬
‫فشاحی ةشای کضف افالغاج‪ "1‬اسایه دادى اصذ‪.‬نط ةه صذج حاکیذ داسم که كتل اص فشاحی هشگظصه طاسك کاسةش نشحتك ةا‬
‫جسخجظ‪،‬چه ةشای نظةایل ط چه صشم افضاسهای کاسةشدی دیگش ‪،‬ایط کخاب سا نقالػه کضیذ‪.‬‬
‫دس ایط ةخط نا ةه ةشسسی الگظ های فشاحی جسخجظ دس حظصى اپلیکیضط های نظةایل خظاهیو پشداخد‪.‬‬
‫‪1‬‬
‫‪Search Patterns: Design for Discovery(O’Reilly), January 2010 (http://‬‬
‫‪shop.oreilly.com/product/9780596802288.do).‬‬
‫‪www‬‬ ‫‪87‬‬
‫‪Search patterns‬‬
‫‪ - Explicit Search‬جسخجظی عشیح‬

‫الگظی ‪ Explicit Search‬ةش پایه غهل جسخجظ ط نضاهذى صخایج اسخظاس اسد‪.‬غهل جسخجظ ةا صدش دکهه جسخجظ یا ةا‬
‫اسخفادى اص غتاسج جسخجظ دس عفحه کلیذ اصجام نی صظد ناصضذ اپلیکیضط ‪Walmart‬ط ‪.Target‬صخایج صیض فتیػخا دسفؾای‬
‫صیشیط صظاس جسخجظ صهایط دادى نی صظصذ‪.‬صها نیخظاصیذ اص الگظی ‪ Explicit Search‬ط الگظی ‪ Auto Complete‬که دس‬
‫ادانه حظؽیح خظاهیو داد نضخشکا اسخفادى کضیذ‪.‬‬
‫‪www‬‬ ‫‪88‬‬
www.DrStartup.ir
Walmart, search button on screen; Target, search button on keyboard
www 89
‫‪Target, loading and displaying search results‬‬
‫حخها دکهه ای سا ةشای پاک کشدش فیلذهای جسخجظ ط ههچضیط ‪ Cancel‬کشدش غهلیاج جسخجظدس صظاس‬
‫جسخجظ دسصظش ةگیشیذ‪.‬ةغظسج ةغشی ةه کاسةش صضاش دهیذ که جسخجظدس حال اصجام اسد ‪ (.‬ةشای کسث‬
‫افالغاج ةیضخش فغل ‪ 8‬سا ةتیضیذ)‬
‫‪ - Search with Auto Complete‬جسخجظ ةا اسخفادى اص کانل کضضذى خظدکاس‬

‫صایذ ةخظاش گفد که پشکاسةشدحشیط الگظی جسخجظ دس طب ط اپلیکیضط های نظةایل ایط الگظ ةاصذ‪ .‬دسحیط حایپ کشدش‬
‫غتاسج جسخجظ صخایجی ةش اساس افالغاج طاسد صذى صهایط دادى نی صظصذ‪.‬صها نی حظاصیذ غهل حایپ کشدش سا ادانه دادى‬
‫ط سپس ةا اسخفادى اص دکهه ‪Search‬جسخجظ سا اصجام دهیذ‪.‬‬
‫‪www‬‬ ‫‪90‬‬
‫‪Android Marketplace and Netflix‬‬
‫ةقظس ایذى آل صخایج ةایذ ةا سشغد دس صناش حایپ کشدش صضاش دادى صظصذطلی صهایط یک الهاش صظاس پیضشفد که نػضای ایط‬
‫صکخه سا ةه کاسةش ةشساصذ که جسخجظ دس حال اصجام اسد نی حظاصذ نفیذ طاكؼ صظد‪( .‬نزال غتاسج دسحال جسخجظ‪ ...‬یا‬
‫…‪)Searching‬ههاصقظس که دس حغظیش ةاال صیض صضاش دادى صذى اسد اپلیکیضط ‪ Netflix‬اص یک ‪ Progress‬دس فیلذ جسخجظ‬
‫اسخفادى نی کضذ‪.‬ایط دس حالی اسد که اپلیکیضط ‪ Fidelity‬یک ‪ Progress‬دس فؾای صخایج جسخجظ صهایط نی دهذ ! (‬
‫حغظیش صیش سا ةتیضیذ)‬
‫‪www‬‬ ‫‪91‬‬
‫‪Fidelity‬‬
‫اپلیکیضط ‪ Trip Advisor‬اص یک الگظی ‪ auto-complete‬خالكاصه اسخفادى نیکضذ‪.‬دس ایط اپلیکیضط صخایج دس كسهد‬
‫‪ auto-complete‬ةش اساس نحتظةید نکاصها ‪،‬هخل ها ط‪ ...‬صهایط دادى نی صظصذ‪.‬‬
‫‪www‬‬ ‫‪92‬‬
‫‪TripAdvisor‬‬
‫اگش دس اسایه صخایج جسخجظ حاخیشی طجظد داسد حخها ةه صحظی ةه کاسةش ةاصخظسدی پیشانظش ایط که غهلیاج‬
‫جسخجظ دس حال اصجام اسد ‪،‬صهایط دهیذ‪.‬ایط صکخه سا هو دس صظش داصخه ةاصیذ که غیط غتاسج دس حال‬
‫جسخجظ سا دس صخایج جسخجظ ةگظصه ای ةشای کاسةش نخهایض صهاییذ ‪،‬نزال غتاسج سا دس صخایج ‪ Bold‬کضیذ‪.‬‬
‫‪www‬‬ ‫‪93‬‬
‫‪ - Dynamic Search‬جسخجظی پظیا‬

‫اص ایط الگظ گاهی ةا غضظاش الگظی فیلخشیضگ پظیا صیض صام ةشدى نی صظد‪.‬ةاطسطد غتاسج جسخجظ‪ ،‬لیسد دادى هایی که دسحال‬
‫صهایط هسخضذ ةغظسج پظیا حؿییش نی کضضذ‪ .‬دس نزالهای صیش که اص ‪webOS‬ط‪ BlackBerry‬هسخضذ لیسد افالغاج سطی‬
‫عفحه ةا طاسد کشدش نخط نخضاسث ةا آش ةه سطص نی صظد‪.‬‬
‫‪BlackBerry App World and People on WebOS‬‬
‫اسخفادى اص ایط الگظ ةشای نظاسدی که لیسخی نحذطد اص دادى داسیو ناصضذ صهاسى حهاس ها ‪،‬یا کخاةخاصه‬
‫صخغی ‪،‬نضاسث اسد طلی اص ةکاس گیشی ایط الگظ ةشای دادى های ةا حجو ةاال خظدداسی کضیذ‪.‬‬
‫‪ - Scoped Search‬جسخجظی نحذطدى ةضذی صذى‬

‫دس ةشخی نظاكؼ ةهخش ایط اسد که كتل اص ایضکه صشطع ةه غهلیاج جسخجظ صهاییو‪،‬نحذطدى جسخجظ سا حػییط صهاییو‪.‬گظگل ط‬
‫اپلیکیضط ‪ Photobucket‬اص فشاحی های نخخلفی ةشای پیادى ساصی ایط الگظ اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪94‬‬
‫‪Google and Photobucket‬‬
‫اپلیکیضط ‪ AllRecipes‬صیض ةه صها ایط انکاش سا نی دهذ حا فیلخش ها ط نحذطدى های گظصاگظش سا كتل اص اصجام غهل جسخجظ‬
‫اغهال کضیذ ‪ Dropbox.‬ةقظس پیط فشؼ نحذطدى جسخجظ سا ‪ All‬دس صظش نی گیشدطلی صها نی حظاصیذ كتل یا ةػذ اص صدش‬
‫کلیذ جسخجظ نحذطدى سا ةه ‪File‬یا ‪ Folders‬حؿییش دهیذ‪.‬‬
‫‪www‬‬ ‫‪95‬‬
‫‪AllRecipes and DropBox‬‬
‫نحذطدى های نضقلی نضاستی سا ةش اساس صظع نجهظغه دادى ای که كشاس اسد غهلیاج جسخجظ دس آش‬
‫اصجام صظد ‪،‬اسایه دهیذ ‪ 3.‬الی ‪ 6‬گضیضه ةشای اغهال نحذطدى جسخجظ صیاد اسد‪،‬ةشای ایط نضظظس سػی‬
‫کضیذ اص عفحه ای جذاگاصه ةا غضظاش جسخجظی پیضشفخه اسخفادى صهاییذ‪.‬‬
‫‪ - Saved and Recent Searches‬جسخجظ های اخیشط رخیشى صذى‬

‫حهام اپلیکیضط های نظفم نظةایل دس صنیضه فشاحی طاسك کاسةش ط کاسةشدپزیشی اص یکسشی كظاصیط نضخػ اسخفادى نی‬
‫کضضذ‪.‬ةه حالصهای کاسةش احخشام ةگزاسیذ‪.‬ایط الگظ ایط کاسسا ةارخیشى کشدش حالصهای كتلی کاسةش جهد جسخجظ اصجام نی‬
‫دهذ‪ ،‬ةجای ایضکه کاسةش کلهاج نظسد جسخجظ سا دطةاسى طاسد کضذ‪،‬ایط کلهاج که كتال دس ایط الگظ رخیشى صذى اصذ جهد‬
‫اسخفادى نجذد دس اخخیاس طی كشاس دادى نی صظصذ‪eBay.‬ط‪ Apple iOS‬هشدط اص الگظی ‪Saved and Recent Searches‬ةشای‬
‫افضایط ةهشى طسی کاسةش اسخفادى نی صهایضذ‪.‬‬
‫‪www‬‬ ‫‪96‬‬
‫‪eBay and Walmart‬‬
‫اص دیگش سطصهای احخشام ةه حالصهای کاسةش دس كسهد جسخجظ‪،‬نی حظاش ةه ةشصانه های نتخضی ةشنکاش نزل ‪ Trulia‬ط ةشصانه‬
‫های جسخجظی ةاسکذ نزل ‪ Price Check‬اص آناصطش اصاسى کشد‪.‬‬
‫‪www‬‬ ‫‪97‬‬
‫‪Trulia and Amazon PriceCheck‬‬
‫رخیشى غهلیاج جسخجظ صیاص ةه یک گام دیگش ةشای صانگزاسی غهلیاج جسخجظی عظسج گشفخه داسد‪ ،‬ایط‬
‫دسحالی اسد که جسخجظهای اخیش ةغظسج ؾیش نسخلیو رخیشى نی صظصذ ط دس آیضذى كاةل پیهایط نی‬
‫ةاصضذ‪ ،‬ةتیضیذ ةش اساس صظع کاسةشی اپلیکیضط صها کذانیک نفیذ حش اسد‪.‬‬
‫‪ - Search Form‬فشم جسخجظ‬

‫ایط الگظ صانل یک فشم جذاگاصه جهد طسطد ط حضظیو گضیضه های نخخلف جسخجظ ط ههچضیط دکهه ای جهد اصجام غهل‬
‫جسخجظ نی ةاصذ‪ .‬اپلیکیضط ‪ Kayak‬ط ‪ Whole Foods‬اص ایط الگظ جهد جهؼ آطسی افالغاج ؽشطسی جهد جسخجظی‬
‫پشطاصها ط هخل ها اسخفادى نی کضضذ‪.‬جهد دیذش نزال های ةیضخش ةه فغل ‪ 2‬سجظع کضیذ!‬
‫‪www‬‬ ‫‪98‬‬
www.DrStartup.ir
Kayak
Whole Foods Recipe Search
www 99
‫فیلذهای طسطد افالغاج سا حا جاییکه انکاش داسد حذاكل کضیذ ‪ .‬اص ساهضهای سیسخو غانل نشةظفه ةشای‬
‫پیادى ساصی ایط فشم ط الهاصهای آش اسخفادى صهاییذ‪ .‬اص صکاج ط الگظ های فشاحی فشم ها نزل چیذناش‬
‫‪،‬غضاطیط ط‪ ...‬اسخفادى صهاییذ‪.‬‬
‫‪ - Search Results and View Results‬صخایج جسخجظ ط صهایط صخایج‬

‫ةه نحؿ ایضکه غهلیاج جسخجظ اصجام صذ‪،‬صخایج جسخجظ یا ةایذ دس ههاش عفحه یا ةایذ دس عفحه ای جذاگاصه صهایط دادى‬
‫صظصذ‪،‬صخایج نی حظاصضذ دس كالث یک لیسد یا جذطل ‪،‬ةشسطی صلضه یا ناهظاسى یا ةغظسج حغظیش های کظچک ( دس نظسد‬
‫حغاطیش) صهایط دادى صظصذ‪.‬صحظى صهایط ‪ ،‬ةسخه ةه ایضکه صظع آیخو های صخایج چگظصه ةاصذ ‪،‬نی حظاصذ گضیضه های نخفاطحی‬
‫داصخه ةاصذ ط ایط ةسخگی ةه صیاص کاسةش كاةل صخغی ساصی اسد‪.‬‬
‫‪Results in a table: Kayak and Foursquare‬‬
‫‪www‬‬ ‫‪100‬‬
‫‪Results on a map and results as thumbnail images‬‬
‫اسخفادى اص حکضیک های ‪ Lazy Loading‬جهد صهایط سشیؼ ةشخی اص صخایج ط اصجام غهل جسخجظ دس پس صنیضه نی حظاصذ‬
‫نفیذ ةاصذ‪.‬‬
‫اپلیکیضط ‪ eBay Motors‬ط ‪ Best Buy‬سا ةتیضیذ‪.‬ةسیاسی اص ةشصانه ها ةغظسج عشیح اص دکهه ای ةا غضظاش نضاهذى صخایج‬
‫ةیضخش اسخفادى نی کضضذ‪.‬ةشخی دیگش صناصی که عفحه صهایط ةه اصخها سسیذ غهلیاج ‪ Lazy Loading‬سا اصجام نی دهضذ‪.‬‬
‫‪www‬‬ ‫‪101‬‬
‫‪ebay Motors and Best Buy‬‬
‫اص عفحه ةضذی صخایج ةه صذج خظد داسی صهاییذ‪.‬آصها کانال نذلهای حػانلی صهایط افالغاج سا دس اةضاس‬
‫های نظةایل اص ةیط نی ةشصذ‪.‬حخها حػذاد صخایج یافد صذى سا ةه کاسةش صضاش دهیذ‪،‬اص حکضیک ‪Lazy‬‬
‫‪ Loading‬ةجای عفحه ةضذی اسخفادى کضیذ‪.‬یک سطش نشحث ساصی نضقلی نخضاسث ةا جضس صخایج‬
‫جسخجظ سا اسایه دهیذ‪.‬‬
‫الگظهای نشحث ساصی‬

‫ایط صکخه خیلی نهو اسد که یک صظع نشحث ساصی پیط فشؼ سا ةشای صخایج جسخجظ نخضاسث ةا جضس آیخو های جسخجظ‬
‫صذى دس صظش ةگیشیو‪،‬ایط کاس سا ةا کهی ححلیم ط نضظسج ةا کاسةشاش نی حظاصیذ اصجام دهیذ‪.‬ةشای اسایه انکاصاج ةیضخش دس‬
‫صنیضه نشحث ساصی اص الگظ های نشسظم صیش اسخفادى صهاییذ‪.‬‬
‫‪www‬‬ ‫‪102‬‬
‫‪• onscreen sort‬‬

‫‪• sort order selector‬‬
‫‪• the sort form‬‬
‫‪Sort patterns‬‬
‫(‪)07-4‬‬
‫‪On Screen Sort‬‬

‫هضگانیکه گضیضه های نشحث ساصی نحذطد هسخضذ ‪،‬اسخفادى اص الگظی ‪ On Screen‬نی حظاصذ ةسیاس کاسا ط نفیذ ةاصذصیشا‬
‫کاسةش ةه سادگی ط حضها ةا صدش گضیضه نشةظفه غهلیاج نشحث ساصی سا اصجام نی دهذ‪ .‬صحظى كشاسدادش دکهه ها اصخخاةی‬
‫نشةظـ ةه نشحث ساصی ةسخگی ةه چیذناش سایش الهاش ها داسد‪.‬‬
‫اپلیکیضط ‪ 4 ،target‬گضیضه نشحث ساصی سا دس كالث ‪ 3‬دکهه اصخخاةی اسایه نی دهذ‪ ،‬ةشای كیهد آصها ‪ 2‬گضیضه عػظدی ط‬
‫صضطلی سا صیض اسایه دادى اصذ‪.‬‬
‫‪www‬‬ ‫‪103‬‬
‫‪Expedia, sort toggle at the bottom; Target, sort toggle at the top‬‬
‫ةقظس طاؽح ط عشیح ةه کاسةش صضاش دهیذ که کذام گضیضه اصخخاب صذى اسد یا سطصط اسد‪.‬اگش غضاطیط‬
‫گضیضه های نشحث ساصی صیاد هسخضذ اص الگظی ‪ Sort Order Selector‬اسخفادى صهاییذ‪.‬‬
‫‪Sort Order Selector‬‬

‫یک جایگضیط نضاسث ةشای ‪ on screen Sort‬اسخفادى اص الگظی ‪ Selector‬اسد‪.‬اةضاسهای ‪ UI‬گظصاگظصی ةشای پیادى ساصی‬
‫الگظی ‪ Selector‬طجظد داسصذ‪،‬طلی حخها ساهضهاهای سیسخو غانلی که كشاس اسد اپلیکیضط سا ةشای آش فشاحی کضیذ سا‬
‫پیشانظش ایط نظؽظع نقالػه کضیذ ( ةشای نزال اسخفادى اص نضظ دس ‪ Android‬ةشای ایط الگظ نشسظم صذى اسد ط دس ‪iOS‬‬
‫اسخفادى اص ‪ Picker‬ط ‪ Action Sheet‬نػهظل اسد‪).‬‬
‫گضیضه های فیلخش نی حظاصضذ داسای غضاعش فظالصی حشی ةاصضذط انکاش صهایط گضیضه های ةیضخشصیض طجظد داسد‪.‬اپلیکیضط‬
‫‪ Walmart‬اص یک دکهه اخخغاعی دس کضاس غتاسج جسخجظ اسخفادى کشدى اسد ‪،‬ایط دسحالی اسد که اپلیکیضط‬
‫‪ Realtor.com‬اص یک دکهه ط ‪ Option‬های نشحتك آش اسخفادى نی کضذ ‪.‬‬
‫‪www‬‬ ‫‪104‬‬
www.DrStartup.ir
Walmart
www 105
www.DrStartup.ir
Kayak
‫نزل اپلیکیضط‬، ‫ یا یک نضظی صفاف اسد‬Target ‫نزل‬،Combobox ‫ساهکاسهای نسخلل اص سیسخو غانل نػهظال صانل یک‬
.Awesome Note
www 106
‫‪Target and Awesome Note‬‬
‫اص كشاسدادها ط كظاصیط سیسخو غانلی که كشاس اسد ةشای آش اپلیکیضط ةضظیسیذ ةشای اسخفادى اص کضخشل‬
‫‪ Selector‬ةهشى نضذ صظیذیا اص کضخشل های طاسك کاسةشی که نسخلل اص سیسخو غانل هسخضذ اسخفادى‬
‫کضیذ‪.‬حخها ةغظسج طاؽح ط صفاف ةه کاسةش صضاش دهیذ که دس حال حاؽش کذام یک اص گضیضه های‬
‫نشحث ساصی اصخخاب صذى اصذ‪.‬‬
‫‪ - Sort Form‬فشم نشحث ساصی‬

‫ةشخی اص اپلیکیضط ها نشحث ساصی ط فیلخشیضگ سا دس عفحه ای جذاگاصه اسایه نی دهضذ‪،‬نػهظال غضظاش ایط عفحه ‪ Refine‬یا‬
‫ههاش ةهیضه ساصی اسد‪.‬ایط سخد حشیط الگظ اص دیذگاى کاسةش اسد‪،‬صیشا ةایذ جهد ةهیضه ساصی صخایج جسخجظ اص عفحه ای‬
‫جذاگاصه اسخفادى صهایذ‪،‬نظاسد سا حضظیو صهایذ ط سپس نظاسد سا اغهال صهایذ‪( .‬ایط کاس ةاصدش دکهه احهام یا ‪ Done‬طیادکهه‬
‫اغهال یا ‪ Apply‬اصجام نی صظد)‬
‫‪www‬‬ ‫‪107‬‬
‫‪Cars.com and eBay classifieds‬‬
‫صکخه ‪ :‬كتل اص اسخفادى اص ایط الگظ‪،‬حهانی الگظ های كتلی سا دس صظش ةگیشیذ ط سػی کضیذ اصآصها اسخفادى‬
‫صهاییذ ط ایط آخشیط گضیضه ةاصذ‪.‬‬
‫‪ - Filter‬فیلخش‬
‫نجهظغه دادى های ةضسگ نػهظال صیاص ةه فیلخشیضگ اؽافی داسصذ‪،‬ایط غهل نػهظال "ةهیضه ساصی صخایج" صام داسد‪.‬غهل‬
‫فیلخشیضگ نػهظال ةا اصخخاب های کاسةش جهد ةهیضه ساصی صخایج جسخجظ یا نشطس ةهخش دادى های صیاد عظسج نی گیشد‪.‬دس‬
‫حغظیش صیش الگظ های نخذاطل فیلخشیضگ اسایه صذى اصذ‪.‬‬
‫‪www‬‬ ‫‪108‬‬
‫‪Filter patterns‬‬
‫(‪)23-4‬‬
‫ههچضیط دس الگظ های جسخجظ نی حظاصیذ اص الگظی جسخجظی نحذطدى (‪ )Scoped Search‬ةػضظاش یک حکضیک پیط‬
‫فیلخشیضگ اسخفادى صهاییذ‪.‬‬
‫‪On Screen Filter‬‬
‫ناصضذ الگظی ‪ On Screen Sort‬دس ایط الگظ صیض فیلخش ةه ههشاى صخایج دس كالث لیسخی اص اصیا دس یک عفحه اسایه نی‬
‫صظصذ‪.‬ةا یک ةاس صدش دکهه فیلخش ‪ ،‬فیلخش ها اغهال نی صظصذ‪.‬اپلیکیضط ‪ HeyZap‬اص دکهه های اصخخاةی اسخاصذاسد اسخفادى‬
‫نیکضذ‪ ،‬ایط دسحالی اسد که ‪ Google‬اص ‪ tab‬های غهظدی اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪109‬‬
‫‪HeyZap and Google‬‬
‫‪ CBS News‬ط اپلیکیضط ‪ ACL‬اص یک صظاس اةضاس ةا كاةلید ‪ Scroll‬ةشای اسایه ط اغهال فیلخش های نخخلف اسخفادى نی‬
‫کضضذ‪.‬ةه یاد داصخه ةاصیذ که هیچگاى اص ایط الگظ ةشای پیضهایط های اطلیه اسخفادى صکضیذ طلی نی حظاصیذ اص آش ةشای دسخه‬
‫ةضذی ط اغهال فیلخشیضگ اسخفادى صهاییذ‪.‬ةشای کسث افالغاج ةیضخش ةه فغل ‪ 9‬سجظع کضیذ‪.‬‬
‫‪www‬‬ ‫‪110‬‬
‫‪CBS News and Austin City Limits Music Festival‬‬
‫اپلیکیضط ‪ SXSW‬اص یک صظاس ةا دط سقش دکهه ةشای غهل فیلخشیضگ اسخفادى نی صهایذ‪ .‬اپلیکیضط ‪Fever News Reader‬‬
‫صیض اص یک ساهکاس ةسیاس سادى جهد فیلخشیضگ اسخفادى نی کضذط آش اسخفادى اص یکسشی ‪ Combobox‬نی ةاصذ‪.‬‬
‫‪www‬‬ ‫‪111‬‬
‫‪SXSW and Feed a Fever‬‬
‫گضیضه های نشحتك ةا غهل فیلخشیضگ ةایذ کانال ةشای کاسةش كاةل فهو ط دسک ةاصضذ‪.‬فیلخش هایی که فػال‬
‫هسخضذ ةایذ ةگظصه ای ةشای کاسةش نضخػ ط صهایاش ةاصضذ‪ ( .‬نزال اسخفادى اص یک الهاش که صهاد یک چشاؽ‬
‫سطصط ةاصذ نی حظاصذ نفیذ طاكؼ صظد)‬
‫‪Filter Drawer‬‬
‫ةه ههاش اصذاصى که ‪ onscreen Filter‬نی حظاصذ نفیذ ةاصذ ‪،‬اسخفادى اص کضخشل ط الگظی ‪ Drawer‬صیض نی حظاصذ نفیذ طاكؼ‬
‫صظد‪.‬کضیذش یا صدش دسخه ایط کضخشل ةاغس صهایاش صذش آش نی صظد‪ Audible.‬اص یک صظاس اةضاس ةا دکهه های اصخخاةی‬
‫جهد اصجام فیلخشیضگ دس یک ‪ Drawer‬اسخفادى نی کضذ‪.‬ایط دسحالی اسد که اپلیکیضط ‪ Sams‬اص یک نجهظغه فیلخش ط‬
‫یک دکهه اغهال فیلخش دس یک ‪ Drawer‬اسخفادى نی کضذ‪.‬یک ساهکاس نضاسث حش ةشای اپلیکیضط ‪ Sams‬که نی حظاصذ‬
‫جایگضیط ایط ساهکاس صظد ایط اسد که دس حالی که صلضه دسحال صهایط اسد اص سطش فیلخشیضگ پظیا اسخفادى صهایذ‪.‬‬
‫‪www‬‬ ‫‪112‬‬
‫‪Audible and Sam's Club‬‬
‫‪Filter Dialog‬‬
‫ناصضذ یک پضجشى ‪ Pop-up‬دس ةشصانه های ححد طب ‪ ،‬ایط الگظ ةغظسج ‪ Modal‬صهایط دادى نیضظد‪.‬ایط الگظ صیاصنضذ ایط‬
‫اسد که کاسةش گضیضه های نشةظفه سا اصخخاب صهایذ یا ایضکه اص فیلخشیضگ اصغشاف دهذ‪ .‬اپلیکیضط ‪ Trip Advisor‬اص یک‬
‫‪Dialog‬طیژى دس ‪ iOS‬اسخفادى نی کضذ‪.‬دس حالیکه اپلیکیضط ‪ UPS‬دس اصذسطیذ اص انکاصاج پیط فشؼ اصخخاةی دس سیسخو‬
‫غانل اصذسطیذ اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪113‬‬
‫‪TripIt and DueTodayLite‬‬
‫ةا ایضکه ةا اسخفادى اص ‪ Filter Dialog‬غهلیاج ‪ Filtering‬اصجام نی صظد طلی ‪ 2‬الگظی اطل اص صظش کاسةشی آصادی غهل‬
‫ةیضخشی ةه کاسةش نی دهضذصیشا دس یک عفحه ط ةقظس نسخلیو اغهال نی صظصذ‪.‬‬
‫اص ةکاسگیشی گضیضه های صیاد ط ‪ Scroll‬کشدش خظدداسی صهاییذ‪.‬اص ایط الگظ ةشای نظاسدی که حػذاد گضیضه‬
‫های فیلخش صیاد هسخضذ اسخفادى صهاییذ‪.‬كسهخی اص فغل ‪ 6‬سا که دس نظسد چاسج ها ط صهظداس های ةا كاةلید‬
‫فیلخشیضگ نی ةاصضذ سا نقالػه کضیذ‪.‬‬
‫‪ - Filter Form‬فشم فیلخشیضگ‬

‫دادى های حجیو نی حظاصضذ اص گضیضه های پیضشفخه حش فیلخشیضگ ط ةهیضه ساصی ةهشى نضذ صظصذ ‪.‬ةشای نزال اپلیکیضط‬
‫‪ Kayak‬اص یک فشم ةشای فیلخشکشدش لیسد هخل ها ةش اساس كیهد ‪،‬حػذاد سخاسى ط ةشصذ اسخفادى نیکضذ‪ .‬اپلیکیضط‪Zappos‬‬
‫ههیط غهل سا ةا اسخفادى اص دکهه های اسخاصذاسد ‪ Clear/Done‬دس صظاس غضظاش ةشصانه که دس ‪ iOS‬حػشیف صذى اسد اصجام‬
‫نی دهذ‪.‬‬
‫‪www‬‬ ‫‪114‬‬
‫‪Kayak and Zappos‬‬
‫(‪)29-4‬‬
‫اپلیکیضط ‪ FreeTime‬اص یک کضخشل سفاسصی صذى دس فشم فیلخشیضگ خظد اسخفادى نی کضذ‪.‬اةخذا صها گشطى فیلخشیضگ خظد‬
‫سا اصخخاب نی کضیذ‪،‬سپس صشایك فیلخشیضگ سا اصخخاب ط دس صهاید آصها سا اغهال نی صهاییذ‪.‬‬
‫‪www‬‬ ‫‪115‬‬
‫‪Freetime‬‬
‫فیلخشیضگ صشفی که نػهظال ةه ‪ Expression Builder‬ها نػشطف هسخضذ صیض یک انکاش فیلخشیضگ ةسیاس پیضشفخه هسخضذ‬
‫که نػهظال دس اةضاس های گضاسش گیشی نظسد اسخفادى كشاس نیگیشصذ‪.‬دس ایضجا صها یک چیذناش نضاسث اص ایط الگظ سا طیژى صشم‬
‫افضاس های ححد طب ط ‪ Desktop‬نی ةیضیذ‪.‬‬
‫‪www‬‬ ‫‪116‬‬
‫‪Wufoo expression builder‬‬
‫اسخفادى اص ایط الگظ دس یک اپلیکیضط نظةایل کاس چالط ةشاصگیضی اسد طلی اپلیکیضط ‪ Roambi‬ایط غهل سا ةا نظفلید ةه‬
‫اصجام سساصذى اسد‪.‬‬
‫‪www‬‬ ‫‪117‬‬
www.DrStartup.ir
Roambi's conditional filter
www 118
‫هیچگاى سػی صکضیذ که غهلیاج فیلخش کشدش سا دطةاسى فشاحی کضیذ‪،‬نػهظال ةکاسگیشی الگظی ‪on screen‬‬
‫‪ Filter‬ط یا ‪ Drawer‬نضاسث طاكؼ خظاهضذ صذ‪.‬اگش صیاصداصخیذ که اص یک فشم نجضا ةشای فیلخشیضگ‬
‫اسخفادى کضیذ حخها الگظی نضاسث فشاحی فشنها سا دس صظش ةگیشیذ‪.‬‬
‫‪www‬‬ ‫‪119‬‬
www.DrStartup.ir
(TOOLS) ‫ اةضاسها‬: ‫فغل پضجو‬
: ‫الگظها‬
Toolbar, Overlay Menu, Contextual Tools, Inline Actions, Call to Action Button, Bulk Actions
www 120
‫دسکخاب فشاحی طاسك های کاسةش طب‪، 4‬نط ط ةیل اسکاج دس نظسد ‪ 6‬كاصظش فشاحی حػانل کاسةشاش طب عحتد کشدى ایو‪2.‬‬
‫نظسد اص ایط كظاصیط ةا غضاطیط " ستک ط سادى صگه داسیذ " ط " نسخلیو ط صفاف ةیاش کضیذ " نی حظاصذ دس فشاحی طاسك های‬
‫کاةش نظةایل صیض نظسد اسخفادى كشاس گیشصذ‪.‬‬
‫كاصظش ‪ Make it Direct‬ةیاصگش ایط صکخه اسد که صناصی که یک خشطجی طاكػا طجظد داسد یک غانل طسطدی ط حػانل طسطدی‬
‫سا اسایه دهیذ‪.‬ةػتاسحی طاسك کاسةش ةایذ ةقظس نسخلیو صستد ةه حػانالج کاسةش پاسخ دهذ‪.‬یک نزال خیلی خظب دس ایط‬
‫نظسد طیشایضگش نخضی ‪ Flicker‬نی ةاصذ‪.‬‬
‫‪Inline edit on Flickr‬‬
‫كاصظش ‪ Keep it lightweight‬ةش ایط صکخه حاکیذ داسد که حػانالج سا حا جاییکه انکاش پزیش اسد ستک صگهذاسیذ‪.‬یک نزال‬
‫اطلیه اص ایط كاصظش دس دصیای طب ‪ ،‬طةساید ‪ Digg‬اسد‪.‬فشآیضذ یک گانی ةشای ‪ Digg‬کشدش یک نلاله حاریش ةسیاس صیادی دس‬
‫نحتظةید ایط طةساید داصخه اسد‪.‬‬
‫‪2‬‬
‫)‪Designing Web Interfaces(http://shop.oreilly.com/product/9780596516253.do) (O’Reilly‬‬
‫‪www‬‬ ‫‪121‬‬
‫‪Digg’s lightweight “Digg It” button‬‬
‫نط کهخش دس نظسد ایط ‪ 2‬اعل فکش کشدى ةظدم حا ایضکه دس دطسى ‪ Josh Clark‬ةا نظؽظع دکهه ها هک هسخضذ حؾظس یافخو!‬
‫"دکهه ها هک هسخضذ ‪،‬ناصضذ دصیای طاكػی‪ ،‬دکهه ها طاكػا ؽشطسی هسخضذ‪،‬طلی آصها ةشای حسهیل ط کظحاى کشدش فاعله ها‬
‫کاسةشد داسصذ‪.‬نػهظال دکهه ها اةضاسهایی راصظیه ةشای حػانل ةا اةضاسهای اطلیه هسخضذ‪.‬فضشدش دکهه چشاؽ دس ایضجا ةاغس‬
‫سطصط صذش چشاؽ دس جای دیگش نی صظد‪.‬ایط گظصه حػانل های ؾیش نسخلیو ةایذ آنظصش دادى صظصذ‪.‬ةػتاسحی ایضگظصه‬
‫حػانالج ةقظس طاؽح ط سطصط نضخػ صهی ةاصضذ‪.‬غلد ایضکه عفحاج لهسی ةسیاس ةسیاس نظسد اسخلتال طاكؼ صذى اصذ ایط‬
‫اسد که ایط صحظى حػانل ‪،‬فاعله ها سا کهخش کشدى ط ةه نا اجاصى نی دهضذ که ةغظسج نلهظس حش ط نسخلیو حش ةا اصیا حػانل‬
‫ةش كشاس کضیو!‬
‫التخه نضظظس نط ایط صیسد که کال ایط الهاش ةغشی دکهه سا که كذند صیادی داسد دطس ةشیضیو‪.‬ههاصقظس که هضظص هو ةشای‬
‫سطصط کشدش چشاؽ اص کلیذ اسخفادى نی صظد‪،‬دكیلا دسنظسد دکهه ها دس دصیای صشم افضاس صیض ایط نسئله عادق اسد‪.‬ةایذ دس‬
‫نظاكػی ک ه صیاص ةه یک غهلکشد عشیح نیتاصذ اص دکهه ها اسخفادى کضیو‪.‬دس صناش هایی که انکاش حػانل نسخلیو طجظد‬
‫صذاسد اص دکهه ها اسخفادى کضیذ!عفحاج لهسی انشطصى انکاش اصجام حػانل نسخلیو ةسیاس سا فشاهو کشدى اصذ‪.‬صناصیکه‬
‫حکضیک ها ط سطصهای جذیذ حػانلی اسایه صذى اصذ ةایذ ایط آنادگی سا داصخه ةاصیو که حػانالج كذیهی سا کضاس ةگزاسیو‪.‬‬
‫صناصی که داسیذ یک حػانل ط طاسك کاسةشی ححد نظةایل سا فشاحی نی کضیذ ههظاسى ایط سئظال سا اص خظد ةپشسیذ که آیا‬
‫طاكػا صیاص ةه دکهه یا یک کضخشل نضاةه ةشای ایط کاسسا داسیذ یا خیش؟!"‬
‫‪www‬‬ ‫‪122‬‬
‫ةشای نزال صشم افضاس ‪ Photoshop Express‬سا دس صظش ةگیشیذ‪.‬ایط اپلیکیضط نظةایل ههچضاش اص الگظهای كذیهی ةشصانه های‬
‫‪ Desktop‬ط طب جهد غهلیاج ةشش ‪،‬طیشایط‪،‬چشخاصذش ط‪ ...‬ةش سطی حغظیش اسخفادى نی کضذ‪.‬‬
‫‪Photoshop Express‬‬
‫‪www‬‬ ‫‪123‬‬
‫ایط دس حالی اسد که اپلیکیضط ‪ Tap’n’Scrap‬ةه صها انکاش حػانل نسخلیو ةا حغظ یش سا نی دهذ‪ .‬صها ةا کضیذش ط لهس‬
‫کشدش حغظیش نی حظاصیذ کلیه غهلیاج های نظسد صظش خظد سا ةش سطی حغظیش اصجام دهیذ‪.‬‬
‫‪Tap’n’Scrap provides direct manipulation of the image‬‬
‫اگش طاكػا صیاص ةه یک دکهه دس اپلیکیضط نظةایل خظد داسیذ اص ایط الگظ اسخفادى کضیذ‪.‬‬
‫‪www‬‬ ‫‪124‬‬
‫‪Patterns for Tools‬‬
‫‪ - Toolbar‬صظاس اةضاس‬
‫‪ Toolbar‬که دس ةشخی نظاكؼ صیض ةا صام ‪ Action Bar‬اسایه نی صظد ‪،‬صانل یکسشی اةضاس ط دکهه ةشای کاس ةا عفحه جاسی‬
‫اسد‪.‬دس اپلیکیضط ‪ Pandora‬یک ‪ Toolbar‬اسایه صذى اسد که انکاصاج صیادی اص كتیل نضاهذى لیسخی‪ ،‬سحته دادش‬
‫نظصیک ها ‪،‬حظكف‪،‬سد صذش اص نظصیک ط‪ ....‬سا اسایه نی دهذ‪ .‬اپلیکیضط ‪ A+‬دس ‪ Blackberry‬صیض انکاصاج صیادی سا اص فشیم‬
‫‪ Toolbar‬اسایه نی دهذ‪.‬‬
‫‪www‬‬ ‫‪125‬‬
‫‪Pandora and A+Picture Effects‬‬
‫الگظی نشسظم دس ‪ iOS‬صظاس اةضاس آةی سصگ نػشطف اسد که كاةلید صخغی ساصی ط سفاسصی صذش سا داسد‪.‬‬
‫‪www‬‬ ‫‪126‬‬
‫‪Default iOS toolbar and stylized toolbar in Trip Journal‬‬
‫دس ةشخی نظاكؼ غهلیاج یا دکهه نشةظفه خظد داسای گضیضه ها ط ‪ Option‬های نخفاطحی اسد‪.‬یک ساهکاس نسخلل اص‬
‫سیسخو غانل ایط اسد که ایط گضیضه ها سا دس كالث نضظیی آةضاسی صهایط دهیذ‪.‬ةسیاسی اص اپلیکیضط ها اص ایط حکضیک‬
‫ةشای صهایط انکاصاج طیشایضی ط كالث ةضذی اسخفادى نی کضضذ ‪.‬‬
‫‪www‬‬ ‫‪127‬‬
‫‪QuickOffice Pro and Document To Go‬‬
‫اپلیکیضط ‪ Evernote‬اص یک سطش نضحغش ةفشد ةشای صهایط انکاصاج طیشایضی اسخفادى نی کضذ ط آش اسخفادى اص یک ‪Panel‬‬
‫طیژى اسد که ةغظسج صهایاش ةاكی نی ناصذ!‬
‫‪www‬‬ ‫‪128‬‬
www.DrStartup.ir
Evernote
www 129
‫یکی دیگش اص سطصهای اسایه ایط ‪Option‬ها اسخفادى اص ‪ Actionsheet‬اسد که دس ‪ iOS‬کاسةشد داسد‪ .‬اپلیکیضط‪ Pulse‬اص‬
‫سطصی نضاسث جهد صهایط ‪ 4‬سطش ةه اصخشاک گزاسی یک داسخاش اسخفادى کشدى اسد‪.‬طلی ةشصانه !‪Yelp‬ط ‪ Ibis‬اص ایط‬
‫اةضاس ةه صادسسخی دس كسهد فیلخشیضگ اسخفادى کشدى اصذ که ةه هیچ طجه پیضضهاد صهی صظد!جهد کسث افالغاج ةیضخش‬
‫دس صنیضه فیلخشیضگ ةه فغل ‪ 4‬سجظع صظد‪.‬‬
‫‪Pulse, Ibis, and Yelp‬‬
‫صکخه ‪ Toolbar :‬ها نػهظال دس پاییط عفحه ها صهایط دادى نی صظصذط نػهظال حاطی گضیضه هایی ةا نحذطدى کاسی عفحه‬
‫جاسی هسخضذ‪.‬سػی کضیذ اص آیکظش هایی اسخفادى صهاییذ که ةه ساحخی نفهظم سا ةه کاسةش ةشساصذ یا ایضکه اص غضظاش دس صیش‬
‫آیکظش اسخفادى صهاییذ‪.‬‬
‫‪Option Menu‬‬
‫‪Option‬نضظها ناصضذ ‪ toolbar‬داسای نحذطدى کاسی دس حذ عفحه جاسی هسخضذ‪.‬التخه ةه عظسج های گظصاگظصی صهایط‬
‫دادى نی صظصذ‪.‬نضظها دس اصذسطیذ اص فشیم دکهه ای که ةغظسج سخد افضاسی حػتیه صذى اصذ دس دسخشس هسخضذ‪.‬طلی‬
‫غالطى ةش ایط نهکط اسد نضظها اص فشیم صدش دکهه نضظ دس ةشصانه یا کضیذش صةاصه نشةظفه دس دسخشس كشاس گیشصذ‪.‬‬
‫‪www‬‬ ‫‪130‬‬
www.DrStartup.ir
Menu on Android and play menu on Audible
www 131
‫‪Tap Forms and Berry Record‬‬
‫حا جاییکه انکاش داسد اص حػانالج نسخلیو اسخفادى کضیذ‪.‬دس ‪ Option Menu‬ها گضیضه های پیهایضی سا‬
‫هیچگاى حزف صکضیذ‪.‬اص الگظی ‪Call to Action Button‬دس صناصی که فلك یک غهل جهد اصجام دس‬
‫عفحه نظجظد اسد اسخفادى صهاییذ‪.‬‬
‫‪Call To Action Button‬‬

‫ایط الگظ فلك دس صناصیکه صیاص ةه اصجام یک غهل دس عفحه جاسی داسیذ‪،‬نفیذ ط پشکاسةشد اسد‪ .‬اپلیکیضط هایی نزل‬
‫‪ Expedia،Gilt،Groupon‬ط‪ Meebo‬ایط الگظ سا ةجای اسخفادى اص صظاس اةضاس سضخی ‪،‬ةشای اصجام غهلیاج های خاظ پزیشفخه‬
‫اصذ‪.‬‬
‫‪www‬‬ ‫‪132‬‬
www.DrStartup.ir
Gilt and Groupon
www 133
‫‪Expedia and Foursquare‬‬
‫غالطى ةش ایط ‪،‬ایط الگظ نی حظاصذ ةشای عفحاحی که داسای یک غهل اعلی ط حضها یک غهل فشغی ةاصضذ صیض کاسةشد داصخه‬
‫ةاصذ‪.‬نزال ایط کاسةشد سا نی حظاش دس اپلیکیضط ‪ Bill Minder‬ةتیضیذ‪.‬ةه یادداصخه ةاصیذ که دس ایط کاسةشی حخها ةه عظسج‬
‫طاؽح ط نضخػ دکهه اعلی سا اص دکهه فشغی نخهایض صهاییذ‪.‬‬
‫‪www‬‬ ‫‪134‬‬
‫‪BillMinder and Netflix‬‬
‫هیچگاى غهلیاج اعلی دس یک عفحه سا دس نضظیا ةغظسج صا نفهظم دس ‪ toolbar‬ةکاس صتشیذ‪.‬حخها ایط‬
‫غهلیاج سا ةغظسج طاؽح ةا یک غضظاش نضاسث ط فظصد نضاسث ةشای کاسةش صهایاش ساصیذ‪.‬‬
‫‪Contextual tools‬‬
‫ایط الگظ جهد اصجام غهلیاج سطی یکسشی اص اصیا نظجظد دس یک عفحه كاةل اسخفادى اسد‪.‬ایط گضیضه ها صناصی نػضا ط‬
‫نفهظم خظاهضذ داصد که صی نشةظفه اصخخاب صذى ةاصذ‪.‬ةشای نزال ‪،‬یک فضاس فظالصی سطی یک صی ( نضظظس گزاصخط‬
‫اصگضد اصاسى ةه نذج چضذ راصیه سطی صی نشةظفه اسد)که یکی اص حشکاج نػهظل دس اصذسطیذ نی ةاصذ‪،‬گضیضه های سسو‬
‫صهظداس سا دس اپلیکیضط ‪ ChartDroid‬اسایه نی دهذ‪ ،‬یا صدش یک ‪ tweet‬دس اپلیکیضط ‪ tweet‬دس سیسخو غانل ‪WebOS‬‬
‫گضیضه های نشةظـ ساصهایط نی دهذ‪.‬‬
‫‪www‬‬ ‫‪135‬‬
www.DrStartup.ir
ChartDroid and Tweed
www 136
www.DrStartup.ir
Mail on Android and iFiles
www 137
www.DrStartup.ir
Barns & Noble Nook and 2doApp
‫ ناصضذ آصچه دس اپلیکیضط‬nonmodal ‫ ناصضذ نزالهای كتلی ط یا ةغظسج‬Modal ‫ نیخظاصذ ةغظسج‬Contextual ‫الگظی‬
.‫ اسد پیادى ساصی صظصذ‬Tweeter Mobile ‫ ط‬DailyBurn
www 138
‫‪DailyBurn and twittermobile‬‬
‫حا جاییکه انکاش داسد اص حػانالج سیسخو اسخفادى صهاییذ‪.‬اگش اسخفادى اص دکهه ها ؽشطسی اسد آصها سا‬
‫ةایذ دس صضدیکی صی نشةظـ صهایط داد‪ .‬اص آیکظش های نضاسث یا غضاطیط نضاسث ةشای ایط کاس اسخفادى‬
‫صهاییذ‪.‬‬
‫‪Inline Actions‬‬
‫اسخفادى اص الگظی ‪ Inline Action‬صیض نی حظاصذ ةشای کاسکشدش سطی یکسشی اصیای عفحه نظسد اسخفادى كشاس گیشد طلی ةش‬
‫خالف الگظی كتلی گضیضه های غهلیاحی ایط الگظ ههظاسى دس حال صهایط هسخضذ ةشای نزال دکهه داصلظد دس اپلیکیضط‬
‫‪Audible‬ط دکهه ‪ Buy‬دس اپلیکیضط ‪ Teleflora‬اص ایط الگظ اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪139‬‬
‫‪Audible and Teleflora‬‬
‫ةسیاسی اص اپلیکیضط ها اص دکهه های چضذ طؽػیخی ةشای ةکاس گیشی ایط الگظ اسخفادى نی کضضذ ‪،‬ناصضذ دکهه ‪ Add‬دس‬
‫اپلیکیضط ‪ ACL‬که غضظاش آش ةه ‪ Remove‬حؿییش طؽػید نی دهذ‪ ،‬یا دکهه ‪ Favorites star‬دس اپلیکیضط‬
‫‪OpenCaching‬که نی حظاصذ ةغظسج اصخخاةی سطصط یا خانظش صظد‪.‬‬
‫‪www‬‬ ‫‪140‬‬
‫‪ACL Music Festival and OpenCaching‬‬
‫حا جاییکه انکاش داسد اص حػانالج نسخلیو اسخفادى صهاییذ‪.‬غهلیاج نشةظفه حا جاییکه انکاش داسد ةایذ ةه‬
‫صیی که كشاس اسد غهلیاج ةش سطی آش اصجام صظد صضدیک ةاصذ‪.‬اص یک آیکظش نضاسث یا یک نخط نضاسث‬
‫جهد ةکاسگیشی ایط الگظ اسخفادى صهاییذ‪.‬صهایخا اص یک یا دط دکهه غهلیاحی ةشای هش صی دس ایط الگظ اسخفادى صهاییذ‪.‬‬
‫‪ - Multi state Button‬الگظی دکهه چضذ طؽػیخی‬

‫نػهظال هش یک اص الهاصها ط کانپظصضد های طاسك کاسةش ةشای یک کاسةشد نظسد اسخفادى كشاس نیگیشصذ‪.‬دکهه های چضذ‬
‫طؽػیخی یک اسخزضا دس ایط صنیضه هسخضذ‪.‬ةا نضکالج فؾا ط نحذطدید های عفحه صهایط که دس اةضاس های نظةایل طجظد‬
‫داسصذ ‪،‬ةه صظش نی سسذ که اگش اص یک دکهه ةشای چضذ کاسةشد اسخفادى صظد ‪،‬نضکلی پیط صیایذ‪.‬‬
‫حجشةه داصلظد یک داسخاش سا دس اپلیکیضط‪ Audible‬دس صظش ةگیشیذ‪ .‬دس اةخذا صها یک دکهه داصلظد سا دس كالث الگظی‬
‫‪ Inline Action‬نی ةیضیذ‪.‬آش سا ةضصیذ ‪ !،‬نی ةیضیذ ایط دکهه ةه طؽػید دس حال داصلظد حتذیل نی صظد ط ةػذ اص غهل‬
‫حتذیل ةه دکهه ای نی صظد که غهلیاج داصلظد سا نی حظاش حظسك آش نخظكف یا ادانه داد‪.‬‬
‫‪www‬‬ ‫‪141‬‬
www.DrStartup.ir
Audible
.‫ اسخفادى نی صظد‬Update ‫ اص ایط الگظ ةشای غهلیاج خشیذ یا‬Adroid Market ‫ ط‬Apple Appstore ‫دس اپلیکیضط‬
www 142
‫‪Android Market‬‬
‫یکی دیگش اص کاسةشد ها ط نزالهای ةکاسگیشی ایط الگظ دس صناش حزف یک صی نی ةاصذ‪.‬ةا اسخفادى اص ایط الگظ دیگش صیاصی ةه‬
‫اسخفادى اص عفحه ‪ dialog‬حاییذیه حزف ‪،‬اص کاسةش صهی ةاصذ‪.‬فغل ‪ 0:‬كسهد ‪ Idiot Box‬سا ةتیضیذ‪.‬طلی ایط خیلی خظب‬
‫اسد که دس صناش اصجام غهلیاج حساس اص کاسةش حاییذیه صهایی ةگیشیذ‪.‬‬
‫‪www‬‬ ‫‪143‬‬
www.DrStartup.ir
Contacts on iOS
www 144
‫‪Interaction notes from Adobe Flex 4.5 Reference application‬‬
‫اسخفادى اص دکهه های چضذ طؽػیخی دس نظاسدی که نحذطدید عفحه صهایط طجظد داسد ط اص فشفی‬
‫غهلیاج نشةظفه کانال ةا یکذیگش نشحتك هسخضذ ةسیاس نضاسث اسد‪.‬‬
‫‪ -Bulk Action‬غهلیاج گشطهی‬

‫غهلیاج نػهظلی که ةغظسج گشطهی اصجام نی صظصذ غتاسحضذ اص اصخخاب ‪ ،‬اؽافه ‪ ،‬حزف ط نشحث ساص‪ .‬ةجای ایضکه کل‬
‫عفحه سا ةا ایط دکهه ها پش کضیذ ‪،‬گضیضه ای سا ةشای اصجام گشطهی ایط غهلیاج دس صظش ةگیشیذ‪.‬ةشصانه اعلی صهایط غکس دس‬
‫‪ iOS‬اص یک نذ ط حالد "اصخخاب" ةشای اصخخاب غکس ها اص یک دطسةیط جهد ةه اصخشاک گزاسی اسخفادى نی کضذ‪.‬‬
‫اپلیکیضط ‪ Animoto‬صیض اص ایط نذ ةشای نشحث ساصی ط حزف کشدش حغاطیش ط طیذیظ ها اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪145‬‬
www.DrStartup.ir
Photos on iOS and Animoto
.‫ صیض اص یک سطش سادى ةشای طیشایط لیسد ها اسخفادى نی کضذ‬Shopping List ‫اپلیکیضط‬
www 146
‫‪Shopping List‬‬
‫اةضاس هایی نزل‪ Path‬ط ‪ Pulse‬اص یک عفحه حضظیهاج سادى ةشای اصجام غهلیاج گشطهی نزل اؽافه کشدش ‪،‬حزف کشدش ط‬
‫نشحث ساصی اسخفادى نی صهایضذ‪.‬‬
‫‪www‬‬ ‫‪147‬‬
‫‪Path, edit mode; Pulse, drag handle to reorder sources‬‬
‫غهلیاحی نزل حزف کشدش ط نشحث ساصی دس حالد طیشایط ةیضخشیط کاسةشد سا داسصذ‪.‬حخها ةه یاد داصخه‬
‫ةاصیذ که گضیضه ای نضخػ ط طاؽح ةشای خشطج اص ایط حالد سا ةه کاسةش اسایه دهیذ‪.‬‬
‫‪www‬‬ ‫‪148‬‬
www.DrStartup.ir
(Charts) ‫ صهظداس ها‬: ‫فغل صضو‬
Chart with Filters, Overview + Data, Scrolling with Preview, Data Point Details, Drill Down, Zoom
In, Pivot Table, Sparklines
www 149
‫الگظهای صهایط صهظداس دس نظةایل صکاج ط كظاصیط ةسیاسی سا اص الگظهای نضاةه دس صشم افضاس های ‪ Desktop‬ةه اسذ ةشدى اصذ‬
‫‪ ،‬یک ساهضهای ةسیاس نضاسث دس صنیضه سسو صهظداس کخاب ‪The Wall Street Journal Guide to Information‬‬
‫‪Graphics: The Dose and Don’ts of Presenting Data, Facts, and Figures‬نی ةاصذکه حظسك‪Dona M.Wong‬‬
‫صظصخه صذى اسد ‪.‬غالطى ةش ایط نقالػه کخاب های ‪ Stephen Few‬دس صنیضه سسو صهظداس صیض نی حظاصذ نفیذ طاكؼ صظد‬
‫‪،‬ههه ایط الگظ ها ةش پایه اعظل اطلیه کضیذش صهظداس ها اسخظاس هسخضذ‪.‬هش صهظداس ةایذ حذاكل داسای یک غضظاش ‪،‬غضظاش‬
‫نحظس ها ط دادى ها ةاصذ‪ .‬دادى ها نهکط اسد ةغظسج صهظداس دایشى ‪،‬نیله ای ‪،‬سخظصی ‪،‬خقی ‪،‬حتاةی ط‪...‬صهایط دادى‬
‫صظصذ‪.‬‬
‫ةسخه ةه صظع صهظداس نهکط اسد ‪،‬ساهضهای صاخػ های صهظداس صیض اسایه صظد‪.‬ةشخی اص اپلیکیضط ها نزل ‪RunKeeper Pro‬‬
‫ط ‪ GasLogoto‬اص یک صهظداس سادى ةشای صضاش دادش نسافد دطیذى صذى کاسةش یا هضیضه نغشفی سظخد صستد ةه صناش‬
‫اسخفادى نی کضضذ‪.‬‬
‫‪RunKeepr Pro and Gas Log‬‬
‫ةػذ اص سغاید اعظل اطلیه سسو صهظداس نظاظث حله های سسو صهظداس ةاصیذ‪.‬نضظظس اص حله های سسو صهظداس افالغاج ط الهاش‬
‫های گشافیکی هسخضذ که دس سسو صهظداس ةکاس نیشطصذ ط هیچ اسصش افالغاحی ةشای کاسةش صهایی ةه ههشاى صذاسصذ‪.‬ایط الهاصها‬
‫کاسةش سا سشدسگو نی کضضذ‪.‬جهد کسث افالغاج ةیضخش ةه فغل ‪ 9‬سجظع کضیذ‪.‬‬
‫صکخه دیگشی که ةایذ دس صظش ةگیشیذ ایط اسد که كتل اص ایضکه ةه فشاحی طاسك کاسةش دس فخظصاپ ةپشداصیذ‪،‬نقهئط صظیذ ‪،‬‬
‫که کخاةخاصه صهایط صهظداسی که ةشصانه صظیساش ط كسهد فضی صها اص آصها اسخفادى نی کضضذ داسای چه انکاصاحی اسد صیشا‬
‫‪www‬‬ ‫‪150‬‬
‫نهکط اسد ‪،‬جهد پیادى ساصی فشح صها صیاص ةه کذ صظیسی صیادی ةاصذ‪.‬دط کخاةخاصه ‪Zingchart‬ط ‪ Sencha‬انکاصاج‬
‫خظةی سا اسایه نی دهضذ‪.‬‬
‫‪ZingCharts‬‬
‫(‪)2-6‬‬
‫الگظ هایی که دس ایط فغل اسایه نی صظصذ غتاسحضذ اص ‪:‬‬
‫‪www‬‬ ‫‪151‬‬
‫‪Patterns for charts‬‬
‫‪ -Chart With Filters‬صهظداس ةا كاةلید فیلخش‬

‫یک صهظداس نی حظاصذ ةا کضخشل های صناش یا ةا سایش کضخشل های نشةظـ ةه غهلیاج فیلخشیضگ حشکیث صظد‪.‬دس ایط نزال ها که‬
‫اص ‪ Fidelity‬ط ‪ AccuFuel‬اسایه صذى اصذ ‪،‬دادى ها نی حظاصضذ ةغظسج های گظصاگظش ةش اساس ةاصى های صناصی فیلخش صظصذ‪.‬‬
‫‪www‬‬ ‫‪152‬‬
‫‪Fidelity and AccuFuel‬‬
‫اگش كشاس اسد ةه کاسةش انکاش فیلخش کشدش ةش اساس صناش سا ةذهیذ ‪،‬حخها فؾای کافی ةشای ایط نضظظس دس صظش‬
‫ةگیشیذ‪(.‬ةخغظظ فؾای نضاسث سا ةشای لهس کشدش)دس نزالی که دس ادانه آطسدى صذى اسد‪ ،‬اپلیکیضط ‪ Chaikin‬ایط‬
‫نسئله دس صظش گشفخه صضذى اسد ط غالطى ةش ایضکه فیلخش کشدش سخد اسد‪،‬نضاهذى خظد گضیضه های فیلخش ةیضخش دصظاس‬
‫اسد‪.‬‬
‫‪www‬‬ ‫‪153‬‬
www.DrStartup.ir
Chaikin
www 154
‫نط پیضضهاد نی دهو اص کانپظصضد ها ط الهاش ها دس پاییط صهظداس ها اسخفادى کضیذ ‪،‬ناصضذ ةشصانه ‪ SmartGlance‬ط ‪Blue‬‬
‫‪. Mobile‬صیشا دس ایط نظكػید نی حظاش ةه ساحخی آصها سا لهس کشد ط دیگش صیاصی صیسد که کاسةش آصها سا ةه سخخی پیذا‬
‫کضذ‪.‬‬
‫‪Blue Mobile and SmartGlance‬‬
‫اپلیکیضط ‪ News Weather‬دس اصذسطیذ اص فیلخش حاسیخ ط صناش دس صهظداس های خظد اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪155‬‬
‫‪Android NewsWeather and DayLightCal‬‬
‫فلیخش ها کاسةشد های نخخلفی دس جذاطل داسصذ‪.‬ةشای نزال دس صهظداس های اپلیکیضط ‪ Sencha Touch‬صحظى فیلخشیضگ سطی‬
‫نحظس های نخخلف ةه خظةی صضاش دادى صذى اسد‪.‬ةا صدش آیکظش نشةظفه فیلخش ها صهایاش نی صظد‪.‬ةا کلیک کشدش هش یک اص‬
‫نظاسد ‪،‬فیلخش دس جذطل اغهال نی گشدد‪.‬‬
‫‪www‬‬ ‫‪156‬‬
‫‪Sencha Touch Demo‬‬
‫صکخه ‪ :‬اص کضخشل های اسخاصذاسد ط الگظ های اسخاصذاسد ةشای فیلخشیضگ اسخفادى صهاییذ‪ (.‬جهد کسث‬
‫افالغاج ةیضخش ةه فغل ‪ 4‬نشاجػه کضیذ)‬
‫‪Preview Window‬‬
‫یکی اص کاسةشد های ایط الگظ اسایه حؿییشاج دس نحظس صناش ةا اسایه یک پیط صهایط اص حاسیخچه دادى ها نیتاصذ که نی حظاش‬
‫ةا اسخفادى اص آصها صهظداس های پیضشفخه ای سا ةا طجظد نحذطدید های عفحه صهایط نظةایل اسایه داد‪ .‬اپلیکیضط ‪Roambi‬‬
‫یک دسخگیشى ةشای كسهد پیط صهایط دادى ها اسایه دادى اسد‪.‬صناصیکه "پضجشى دادى" حضظیو صذ ‪،‬نی حظاش آش سا غلث ط‬
‫جلظ ةشد ‪،‬التخه ایط انکاش صیض طجظد داسد که دسخگیشى ها ةغظسج خظدکاس حضظیو صظصذ‪.‬‬
‫‪www‬‬ ‫‪157‬‬
www.DrStartup.ir
Roambi
www 158
‫ةیضخش ةشصانه های نالی اص صظع فلك خظاصذصی ایط الگظ ( یػضی ةذطش انکاش حضظیو پضجشى ) ةشای صهایط دادى های فػلی‬
‫دسنحذطدى های ةضسگخش صناصی اسخفادى نی کضضذ ‪،‬ةشای نزال ههاصقظس که دس حغظیش صیش صضاش دادى صذى اسد‪ ،‬كیهد ها دس‬
‫انشطص ةاال ةظدى اصذ طلی دس کل صستد ةه سال ط ناى پاییط ةظدى اصذ‪.‬افالغاج ط نزال های ةیضخش دس نظسد ایط سا نی حظاصیذ‬
‫دس الگظی ‪ Datapoint‬ةتیضیذ‪.‬‬
‫‪Fidelity and Bloomberg‬‬
‫ناهید دادى ها نضخػ نی کضذ که پضجشى پیط صهایط فلك خظاصذصی ةاصذ یا كاةلید حؿییش ط حضظیو سا‬
‫داصخه ةاصذ‪.‬اگش ایط پضجشى كاةل حضظیو ةاصذ اص سطصهای نضاسث ةشای حػانل کاسةش ط حضظیو کشدش‬
‫نحذطدى آش اسخفادى کضیذ‪.‬‬
‫‪Overview Plus Data‬‬

‫ایط الگظ دسفغل سظم صیض نظسد ةشسسی كشاس گشفد‪،‬التخه دس ایط فغل ایط الگظ ةا نحظسید اسایه خالعه دادى ها دس كالث‬
‫صهظداس نػشفی نیگشدد‪.‬دط نزال صیش سا ةتیضیذ‪،‬هش دطی ایط نزال ها اص صهظداس هایی ةشای خالعه کشدش نههخشیط افالغاج ط‬
‫آناسها ط یک جذطل ةا جضییاج کانل اسخفادى کشدى اصذ‪.‬‬
‫‪www‬‬ ‫‪159‬‬
www.DrStartup.ir
Andlytics and PhoneUsage
www 160
‫)‪Microstrategy and alternate design (wirefram‬‬
‫دسکل ‪ ،‬صهظداس ها ةایذ ةسیاس خظاصا ةاصضذ ط دادى های اسایه صذى دس جذطل صتایذ کاسةش سا گهشاى کضذ‪.‬نزال اسایه صذى دس‬
‫ةاالاص اپلیکیضط ‪MicroStrategy‬نی ةاصذ که افالغاج سا ةسیاس صا نفهظم اسایه کشدى اسد‪.‬ههچضیط فظصد اسخفادى صذى‬
‫نضاسث صیسد ایط دس حالی اسد که دس اپلیکیضط ‪ alternative‬افالغاج ةسیاس خظاصا ط خالعه اسایه صذى اسد ط نػیاس ها‬
‫دس ةاالی صهظداس ةسیاس طاؽح صهایط دادى صذى اصذ‪.‬حػذاد کل کاسةشاش ط جهؼ کل دس آنذ حاعل اص آصها اسایه صذى اصذ‪.‬‬
‫صکخه ‪ :‬صهظداس ها سا كتل اص ةکاس گیشی انخحاش کضیذ ‪،‬آصها سا ةه کاسةشاش صهایی صضاش دهیذ ط سه پشسط سا اص آصها ةپشسیذ ‪:‬‬
‫‪ ‬نظؽظع صهظداس چیسد ؟‬

‫‪ ‬نههخشیط افالغاج چه هسخضذ ؟‬
‫‪ ‬چه اسصصهایی سا ایط صهظداس دس نظسد ایط افالغاج نهو اسایه نی دهذ؟‬
‫‪www‬‬ ‫‪161‬‬
‫‪DataPoint Details‬‬
‫اص آصجاییکه نا دس نظةایل غهل ‪ onHover‬سا صذاسیو ( چظش ناطسی دس کاس صیسد ) لزا ةایذ اص یک سطش جذیذ ةشای صهایط‬
‫جضییاج افالغاج سطی صهظداس اسخفادى کضیو‪.‬دس نزال اسایه صذى ‪،‬لهس کشدش صهظداس ‪ ،‬جضییاج نخؿیشنشةظـ ةه صهایط‬
‫عفحه سا دس نظسد دادى نشةظفه صضاش نیذهذ‪.‬‬
‫‪www‬‬ ‫‪162‬‬
www.DrStartup.ir
Analytiks and NASDAQ QMX
‫ دادى اصخخاب صذى هو دس عفحه اعلی ط هو دس پضجشى پیط‬Yahoo! Finance ‫ ط‬NASDAQ QMX ‫دس ایط دطنزال که اص‬
.‫صهایط نضخغا صهایاش صذى اسد‬
www 163
‫‪Yahoo! Finance‬‬
‫اسخفادى اص جضییاج دكیم دس یک دیالظگ که ةغظسج ‪ Modal‬دس صضدیکی صلقه نظسد صظش ةاص نی صظد صیض یک الگظی نضاسث‬
‫اسد که اپلیکیضط ‪ Sencha‬اص آش ةهشى ةشدى اسد‪.‬‬
‫‪www‬‬ ‫‪164‬‬
‫‪Sench Touch demo‬‬
‫اپلیکیضط ‪ Roambi‬اص یک سطش جذیذ ةضام ‪ Detail mode‬اسخفادى نی کضذکه ةاصدش آیکظش ‪ +‬كاةل دسخشسی اسد‪.‬‬
‫حالد ‪Detail‬داسای یک ‪ Scrollbar‬اسد که صلقه نظسد صظش سا صضاش نی دهذ‪.‬آصها ایط نضقله سا ‪ Viewtron‬نی صانضذ‪.‬‬
‫‪www‬‬ ‫‪165‬‬
‫‪Roambi‬‬
‫صهظداس های اسایه صذى دس طب ایط حظكؼ سا دس کاسةشاش ةشای دسخشسی ةه جضییاج هش صلقه اص صهظداس‬
‫ةظجظد آطسدى اصذ‪،‬صها دس نظةایل ةا اسخفادى اص صدى صذش یک كسهد یا صلقه اص صهظداس جضییاج آش سا ةا‬
‫اسخفادى اص ایط الگظ اسایه دهیذ‪.‬‬
‫‪Drill Down‬‬
‫ایط الگظ اص كاصظش ط اعل اساسی کاسةشد پزیشی ةا ایط غضظاش پیشطی نی کضذ ‪:‬‬
‫صناصیکه صیاص ةه یک خشطجی اسد ‪ ،‬حخها یک حػانلی جهد طسطدی ایجاد کضیذ‪.‬‬
‫دس نظسد جذاطل ایط نسئ له نػضی پیذا نیکضذ که کاسةش خظاهاش ایط اسد که ةا صدش یک صهظداس ط لهس کشدش آش ةه‬
‫افالغاج دسخشسی داصخه ةاصذ‪.‬الگظی ‪Drill Down‬ط الگظی ‪ Datapoint Details‬صهی حظاصضذ ةه فظس نضخشک ط دس کضاس‬
‫یکذیگش ةکاس سطصذ‪.‬لزا ةسخه ةه صظع کاسةشی الگظی نضاسث سا اصخخاب صهاییذ‪.‬‬
‫‪www‬‬ ‫‪166‬‬
‫صهظداس های نظجظد دس داصتظسد فشطش اپلیکیضط ‪ Adobe Flex‬که حظسك حیو فشاحی نا فشاحی صذى اسد اص الگظی ‪Drill‬‬
‫‪ Down‬جهد صهایط دادى های نشحتك ةا هش یک اص سخظش های جذطل اسخفادى نی کضذ دس نزال ط حغاطیش صیش دكیلا سیش‬
‫ةکاس گیشی ایط الگظ صهایط دادى صذى اسد دس ایط اپلیکیضط نا اص رتاج سصگ ها ةشای پیادى ساصی نضاسث حشدس کضاس الگظی‬
‫‪ Drill Down‬اسخفادى کشدى ایو‪.‬ةسخه ةه ایضکه سیسخو غانل چه ةاصذ دس طاسك کاسةش نهکط اسد صیاص ةاصذ که اص دکهه‬
‫‪ Back‬یا ههاش ةاصگضد اسخفادى صظد‪.‬‬
‫‪Adobe Flex Sales Dashboard reference application‬‬
‫ةایذ کاسةش سا ةه گظصه ای دغظج ةه اطلیط حػانل کشد ‪،‬ةػتاسحی کاسةش دس حػانل ةا ایط الگظ ةایذ ةگظصه ای حشؾیث صظد حا اص ایط‬
‫الگظ اسخفادى کضذ (نزال صهظداس سا لهس کضذ) جهد کسث افالغاج ةیضخش فغل ‪ 8‬سا ةتیضیذ‪.‬‬
‫‪www‬‬ ‫‪167‬‬
‫‪Roambi, invite to touch any bar to view data‬‬
‫کاسةش سا حشؾیث ط دغظج کضیذ که ةا ایط الگظ حػانل ةش كشاس کضذ ‪ ،‬ایط کاس سا ةغظسج صا نحسظس ةایذ‬
‫اصجام دهیذ‪.‬‬
‫‪Zoom‬‬
‫نهکط اسد دس ةشخی صشایك‪ ،‬صهظداس حضها یکی اص اجضای دیگش یک عفحه دس نظةایل ةاصذ ‪،‬لزا كقػا دیذش جضییاج صهظداس‬
‫کاسی دصظاس خظاهذ ةظد‪.‬صیشا عفحه صهایط نحذطد اسد ‪.‬یک ساى سادى ایط اسد که اص کاسةش ةخظاهیو حا عفحه گظصی‬
‫خظد سا ةچشخاصذ حا فؾای ةیضخشی جهد صهایط افالغاج فشاهو صظد که دس ایط حالد صظاس پیهایط ط غضظاش اپلیکیضط‬
‫پضهاش صذى حا فؾای ةیضخشی ةشای صهایط افالغاج فشاهو آیذ‪.‬چشخاصذش گظصی ةه حالد اطل ةاغس صهایاش صذش صظاس‬
‫پیهایط ط غضظاش ةشصانه خظاهذ صذ‪.‬‬
‫‪www‬‬ ‫‪168‬‬
‫‪NASDAQ QMX‬‬
‫ایط صکخه که کاسةش سا حشؾیث کضیو که گظصی خظد سا ةچشخاصذ ةسیاس نهو اسد دس اپلیکیضط ‪ NASDAQ QMX‬اص یک‬
‫حغظیش جهد آگاى ساصی کاسةشةاةد چشخط گظصی اسخفادى صذى اسد‪ (.‬نزال ةاال) ایط دس حالی اسد که اپلیکیضط‬
‫‪ ( Ploomberg‬نزال پاییط) اص یک غضظاش عشیح جهد آگاى ساصی کاسةش ةاةد چشخط گظصی اسخفادى کشدى اسد‪.‬ایط غضظاش‬
‫حضها صناصی صضاش دادى نی صظد که کاسةش سطی صهظداس سا لهس کضذ ( صهظداس سا ةضصذ)‬
‫‪www‬‬ ‫‪169‬‬
‫‪Bloomberg‬‬
‫اص کاسةش ةخظاهیذ که ةا چشخاصذش گظصی اص فؾای ةیضخش حالد افلی اسخفادى کضذ ‪،‬ةه نحؿ ةشگضد‬
‫ةه حالد غهظدی صظاس اةضاس ط غضظاش ةشصانه سا ةه کاسةش صهایط دهیذ‪.‬‬
‫‪Pivot Table‬‬
‫‪ Pivot table‬ها که نػهظال اص آصها ةه غضظاش نکػث های ‪ OLAP‬یاد نی صظد ‪،‬ةشای ایجاد جذطل ةضذی ها ط دسخه ةضذی‬
‫های ةی طصش نظسد اسخفادى كشاس نی گیشصذ‪.‬دس ةشصانه های ‪ Desktop‬ط نتخضی ةش طب ‪،‬کاسةشاش نی حظاصضذ ةا اغهال‬
‫حضظیهاج اصظاع گضاسصاج ط خالعه های آناسی سا ةا سطش های حػانلی کضیذش ط اصذاخخط (‪ ) Darg & Drop‬سا ایجاد‬
‫کضضذ‪.‬ایط چشخط ط اغهال حؿییشاج طجه حسهیه صانگزاسی آش ةه ‪( Pivot table‬چشخضی) نی ةاصذ‪.‬‬
‫‪www‬‬ ‫‪170‬‬
‫‪Viblend Pivot Table control for Microsoft Silverlight‬‬
‫اپلیکیضط ‪ Roambi‬اص یک طاسك کاسةشی سادى ةشای کاطش دادى ها دس یک سطش نضاةه ةا ‪ Pivot table‬ها اسخفادى کشدى‬
‫اسد‪.‬نحظس ‪ Y‬ها راةد اسد‪،‬ایط دسحالی اسد که نی حظاش گضیضه ها ط اةػاد نخخلفی سا ةشای نحظس ‪ X‬اصخخاب کشد‪.‬ةشای‬
‫هش ةػذ اص نحظس ‪ X‬نی حظاش یک دسخه ةض ذی خاعی سا اصخخاب ط اغهال صهظد‪.‬ایط نزال صضاش نی دهذ که چلذس آساش نی‬
‫حظاش نیضاش سظد ساالصه سا ةشای ههه صهش ها کاطش کشدط ههچضیط چگظصه ةه ساحخی نی حظاش ایط کاطش سا ةشای یکسشی خك‬
‫های حظلیذ های خاظ سفاسصی صهظد ( نزال کخاب)‪.‬صها ةا یک اصخخاب جذیذ دیگش‪ ،‬نی حظاصیذ صهظداسی سا ایجاد کضیذ که‬
‫افالغاج سظد فشطش ههه صهش ها سا دس نظسد کخاةهایی که اص سطش آصالیط خشیذاسی صذى اصذ‪ ،‬اسایه دهذ‪.‬‬
‫‪www‬‬ ‫‪171‬‬
‫‪Roambi‬‬
‫اصخخاب های نشةظـ ةه ‪ Pivot Table‬ط صخایج حاعل اص آصها سا دس یک عفحه اسایه دهیذ‪.‬ایط اصخخاب ها سا‬
‫ةغظسج ‪ Dynamic‬اغهال کضیذ‪.‬‬
‫‪Spark Lines‬‬
‫‪ Spark line‬ها که اص آصها ةه ‪ Micro chart‬ها صیض صام ةشدى نی صظصذ‪،‬صانل صهظداس هایی نی صظصذ که حذاكل ط حذاکزش‬
‫یکسشی افالغاحی سا اسایه نی دهضذ‪ Spark line.‬ها اسایه دهضذى سطصذ ها ط حؿییشاج نشحتك ةا یک نخؿیش اصذاصى گیشی نزل‬
‫نخظسك دنا یا فػالید های سهام یک صشکد ‪،‬ةه سطصی سادى هسخضذ‪.‬‬
‫ایط صهظداس ها ةشای ةکاسگیشی دسگظصی های نظةایل ةسیاس ةسیاس نضاسث هسخضذ ‪،‬صیشا آصها یک خالعه اص دادى ها سا ةذطش‬
‫صیاص ةه فؾای صیاد دس كالتی گشافیکی صهایط نی دهضذ‪.‬‬
‫‪www‬‬ ‫‪172‬‬
www.DrStartup.ir
Analytix for Google Analytics and Norton Mobile Utilities
www 173
‫‪Roambi and Recover.gov‬‬
‫اص كظاغذ ط كظاصیط فشاحی صهظداس های ‪Spark line‬پیشطی کضیذ‪.‬فشاحی ها سا ةا نضخشیاش خظد نشطس کضیذ‬
‫ط حاییذ آصها سا ةگیشیذ‪.‬اص حشکیث الگظی ‪ Spark line‬ةا ‪ Drill Down‬جهد اسایه افالغاج ةیضخش اسخفادى‬
‫صهاییذ‪.‬‬
‫‪www‬‬ ‫‪174‬‬
www.DrStartup.ir
(Invitation) ‫دغظج اص کاسةش‬: ‫فغل هفخو‬
Dialog, Tip, Tour, Demo, Transparency, 1st Time Through, Persistent, Discoverable
www 175
‫آیا اطلیط ةاسی که اص صشم افضاس ‪ photoshop‬اسخفادى کشدیذ سا ةه یاد داسیذ؟ نط که ةا ایط عحضه نظاجه صذم‪،‬یک عفحه‬
‫خالی ةا کلی اةضاس غجیث!‬
‫‪Photoshop 5.5‬‬
‫نط نی داصس خو که ایط اةضاس ةایذ خیلی كظی ةاصذطلی افالغاحی ةاةد صحظى کاس ةا آش صذاصخو‪.‬دس طاكؼ صهی داصسخو ةایذ اص‬
‫کجا صشطع کضو طلی اص آصجاییکه هضیضه صستخا صیادی سا ةاةد ایط صشم افضاس پشداخد کشدى ةظدم‪،‬نجتظس ةظدم که آش سا یاد‬
‫ةگیشم‪.‬ةشای ههیط کخاب ‪ Sam’s Teach Yourself Photoshop 5 in 24 Hours‬سا ةشای آنظصش ایط صشم افضاس حهیه کشدم‪.‬‬
‫سشیؼ ةشگشدیو ةه ایط صناش‪،‬دسحال حاؽش حػذاد ةسیاس صیادی صشم افضاس نظةایل جهد اسخفادى ط ةکاس گیشی دس ةاصاس اسایه صذى‬
‫اسد‪،‬دس هش دسخه ةضذی اص ةشصانه های نظجظد دس ةاصاس های نظةایل ‪،‬حػذاد صیادی ةشصانه ةشای یک کاسةشد فشاحی صذى‬
‫اصذ‪،‬ةسیاسی اص آصها سایگاش هسخضذ که اؾلث آصها ةه دلیل فشاحی صا نضاسث طاسك کاسةشی نظسد اسخلتال كشاس صهی‬
‫گیشصذ‪،‬اطلیط حجشةه کاسی ةا ةشصانه نشطسگش ‪ Layer Reality‬سا دس صظش ةگیشیذ‪ .‬ایط ةشصانه یک ةشصانه سه ةػذی نی ةاصذ‪.‬‬
‫‪www‬‬ ‫‪176‬‬
‫‪Layar Reality Browser‬‬
‫چه چیضی ةه نط ةػضظاش یک کاسةش کهک نی کضذ حا اص عفحه خاکسخشی اطلیه ةه عفحه سه ةػذی ةشطم؟یک حشؾیث کضضذى‬
‫یا دغظج کضضذى!‬
‫دغظج کضضذى ها غتاسحضذ اص یکسشی غالیو ط صکاج کهکی که ةه کاسةشاش کهک نی کضضذ حا دس اطلیط حجشةه کاسی خظد دس‬
‫یک ةشصانه دچاس سشدسگهی صضظصذ ‪ ،‬آصها غهلیاج نخخلف ط ساهضهایی های الصم سا ةه یک کاسةش جهد ةکاسگیشی ط ةهشى نضذ‬
‫صذش اص حهانی انکاصاج ةشصانه سا اسایه نی دهضذ ‪،‬یک دغظج صانه سادى نی حظاصذ نحیك صا ناصظس یک ةشصانه سا ةه حجشةه ای‬
‫لزج ةخط حتذیل صهایذ‪.‬‬
‫الگظ های دغظج کضضذى صانل نظاسد صیش هسخضذ‪:‬‬
‫‪www‬‬ ‫‪177‬‬
‫‪Patterns for Invitations‬‬
‫‪Dialog‬‬
‫اسخفادى اص ‪ Dialog‬نشسظم حشیط سطش دغظج ط آگاى ساصی کاسةش نی ةاصذ ط نههخشیط دلیل نشسظم ةظدش آش سادگی پیادى‬
‫ساصی فضی آش اسد‪.‬التخه جالث اسد ةذاصیذ که ایط الگظ اؾلث حظسك کاسةشاش نظسد اسخلتال كشاس صهی گیشد ط کاسةشاش‬
‫ةذطش حظجه ةه آصها سػی ةه ةسخط آصها داسصذ‪.‬‬
‫‪www‬‬ ‫‪178‬‬
‫‪Target Weight and ActionMethod‬‬
‫نحخظای دیالظگ ها سا کظحاى ط سادى اصخخاب کضیذ ط حخها دس كسهخی اص ةشصانه ایط انکاش سا فشاهو کضیذ حا‬
‫افشاد ةه ایط نحخظا دسخشسی داصخه ةاصضذ‪.‬‬
‫‪Tip‬‬
‫‪ Tip‬ها دس هش جای عفحه نی حظاصضذ ةه کاس گشفخه صظصذ که اص صظش نفهظنی الگظی نضاسث حش ط کاسةشدی حشی صستد ةه‬
‫دیالظگ نی ةاصضذ ‪ Tip،‬ها نی حظاصضذ دس ههه عفحاج ةه کاس گشفخه صظصذ ( ةش خالف دیالظگ که نػهظال دس عفحه اعلی‬
‫نظسد اسخفادى طاكؼ نی صظد ) دس اپلیکیضط ‪ eBay‬اص یک ‪ Tip‬ةشای حاکیذ کشدش ةش سطی رخیشى صخایج یک جسخجظ اسخفادى‬
‫نی گشدد ط ایط ‪ Tip‬حا صناصیکه عفحه صهایط دس حالد صشنال اسد كاةل دسخشسی اسد‪.‬‬
‫‪www‬‬ ‫‪179‬‬
www.DrStartup.ir
eBay and Android OS
.‫ دس هش ةخط اص عفحاج ةشصانه صکاج سا صهایاش نی ساصد‬ShoppingList ‫اپلیکیضط‬
www 180
‫‪Shoppng List‬‬
‫‪ Tip‬ها سا دكیلا دس صضدیکی نظسدی که كشاس اسد حظؽیحاحی سا پیشانظش آش اسایه دهیذ صضاش دهیذ‪.‬اص‬
‫نحخظای کظحاى اسخفادى صهاییذ ‪،‬ةه نحؿ اسخفادى اص غهلی که یک ‪ Tip‬دس نظسد آش اسایه صذى اسد ‪Tip،‬‬
‫نشةظفه سا پضهاش کضیذ‪.‬‬
‫‪Tour‬‬
‫یک ‪Tour‬یک الگظی کانل جهد اسایه گام ةه گام انکاصاج صشم افضاس ةغظسج عفحه ةه عفحه اسد‪ .‬اپلیکیضط ‪Nike‬‬
‫‪ GPS‬یک نزال ةسیاس خظب دس ایط نظسد اسد ‪.‬ایط حظس ةشای صهایط دس عفحاج نظةایل ةهیضه صذى اسد‪،‬که داسای پیهایط‬
‫آساش ‪،‬ساى های گظصاگظش ط نضخػ خشطج اص حظس طحغاطیش گشافیکی نضاسث نی ةاصذ‪ .‬ایط ‪ Tour‬دس عفحه اعلی ةشصانه اسایه‬
‫نی صظد ط صها نی حظاصیذ ةیط ‪ 7‬صکخه اسایه صذى ةه ساحخی پیهایط کضیذ‪ .‬اپلیکیضط ‪ Nike‬ط ‪ CalcBot‬ةه حشحیث اص یک‬
‫الهاش صهاسى عفحه ( الگظی اسخاصذاسد عفحه ةضذی ‪ Apple‬ةشای عفحاج کو) ةشای صهایط صهاسى ‪ Tip‬اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪181‬‬
www.DrStartup.ir
Nike GPS
www 182
‫‪CalcBot‬‬
‫یک ‪ Tour‬ةایذ طیژگی های اعلی ةشصانه سا صضاش دهذ‪.‬التخه ةایذ حخها ایط صکاج اسایه صذى اص طیژگی های‬
‫اپلیکیضط ‪ ،‬اص دیذگاى کاسةش صهایی ةاصذ‪.‬حظسها سا خیلی خالعه ط ةغظسج ةغشی فشاحی صهاییذ‪.‬‬
‫‪Video Demos‬‬
‫دنظ کشدش یک ةشصانه دس كالث یک طیذیظ یکی دیگش اص الگظ هایی اسد که ةشای ةشصانه هایی که نتخضی ةش غهلیاج گظصاگظش‬
‫هسخضذ نضاسث نی ةاصذ‪ Roambi.‬اص یک دنظی طیذیظیی ةشای صهایط انکاصاج فشاطاصی که دس ةشصانه ةشای ةه حغظیش‬
‫کضیذش افالغاج اسایه صذى اصذ اسخفادى نی کضذ‪.‬اپلیکیضط ‪ Goggles‬اص ‪ Google‬اص یک طیذیظ که اص فشیم ‪ YouTube‬ةه‬
‫صهایط دس نی آیذ‪ ،‬دس حظس خظد اسخفادى نی کضذ‪.‬‬
‫‪www‬‬ ‫‪183‬‬
www.DrStartup.ir
Roambi
www 184
‫‪Google Goggles‬‬
‫دنظ ها ةایذ ةغظسج نظسدی ‪ ،‬پشکاسةشد حشیط انکاصاج صشم افضاس سا ةه حغظیش ةکضضذ ‪،‬ةایذ انکاصاج نػهظل‬
‫پخط یک طیذیظ نزل (‪ )Stop,Play,Pause‬ةشای طیذیظ صیض اسایه نی صظصذ‪.‬‬
‫‪Transparency‬‬
‫اص آصجاییکه حا کضظش ةشسسی کشدیو ایط الگظ ها دس ایضخشصد ط عفحاج طب نػهظل هسخضذ‪،‬الگظی ‪ transparency‬نخغظظ‬
‫اةضاس های نظةایل اسد ‪.‬ایط الگظ نػهظال دس عفحه اطل اپلیکیضط صهایط دادى نی صظد ‪،‬که صانل صکاج آنظصصی اسد که‬
‫ةش سطی یک فیلخش صفاف اص ةشصانه اسایه صذى اصذ‪ .‬اپلیکیضط های ‪ Pulse‬ط ‪ Phoster‬هش دط اص ایط الگظی دغظج کضضذى ةشای‬
‫آنظصش سشیؼ صحظى پیهایط نحخظا ةغظسج ةغشی دس ةشصانه هاصاش اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪185‬‬
‫‪Pulse and Phoster‬‬
‫الگظی ‪ Transparency‬ةایذ ةغظسج دسسد ةکاس گشفخه صظد‪،‬آصها اةضاسی ةشای حهاید اص فشاحی های‬
‫ؽػیف صیسخضذ‪.‬ةػذ اص ایضکه اطلیط حػانل کاسةش ةا ةشصانه آؾاص صذ‪ Transparency،‬ها سا حزف کضیذ (‬
‫نزال ةا لهس کشدش عفحه)‬
‫‪1st Time Through‬‬

‫الگظی ‪ 1st Time Through‬ةش خالف سایش الگظ های دغظحضانه ‪ ،‬ةغظسج جذاگاصه ةش سطی عفحاج صهایط دادى صهی‬
‫صظصذ‪،‬ةلکه آصها جضیی اعلی اص عفحه نی ةاصضذ‪،‬آصها ههظاسى دس عفحه طجظد داسصذ ‪،‬حا صناصیکه نحخظایی جایگضیط آصها صذى‬
‫یا غهلی سخ دهذ ‪،‬ةسیاسی اص ةشصانه های یادداصد ةشداسی نزل ‪ Mini Diary‬یا ‪ PageOnce‬اص ایط سطش ط الگظی دغظج‬
‫کضضذى ةشای دسگیش کشدش هشچه سشیػخش ط نظرش حش کاسةشاش جهد دسج نحخظا اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪186‬‬
‫‪Mini Diary and PageOnce‬‬
‫ةقظس صفاف ط دكیم غضاعش دغظج کضضذى دس ایط الگظ سا ةا اسخفادى اص حغظیش ط الهاصهای دیگش نضخػ‬
‫کضیذ ( ةشای نزال اص سصگ ط فظصد نخفاطج اص سایش غضاعش عفحه ةشای صهایط دادش آصها اسخفادى کضیذ‪).‬‬
‫‪Persistent‬‬
‫الگظی دغظج کضضذى ‪ Persistent‬جضیی اص غضاعش عفحه اسد ط ههظاسى حؾظس داسد ‪،‬ةشای نزال دس اپلیکیضط ‪Jamie‬‬
‫‪ Oliver‬پیضضهاد حؿییش عفحه ةه حالد ‪ Landscape‬جهد ةهشى نضذ صذش اص انکاصاج ةیضخش اص فشیم ایط الگظ اسایه صذى‬
‫اسد ‪ .‬حال آصکه دفػه اطل ةاصذ که اص ایط عفحه اسخفادى نی کضیذ یا دفػه دهو ( ایط ‪ Tip‬ههظاسى دس حال حهایض اسد)‪.‬‬
‫اپلیکیضط ‪ Spring‬اص یک دغظج کضضذى دسطصی نضقتم ةا الگظی ‪ Persistent‬جهد یاد آطسی ایط صکخه ةه کاسةش صهایی‬
‫اسخفادى کشدى اسد که نی حظاصذ ههیضه ةا صدش ‪ +‬نحخظای جذیذ اؽافه صهایذ‪.‬‬
‫‪www‬‬ ‫‪187‬‬
‫‪Jamie Oliver Recipes and Spring Pad‬‬
‫خیلی خالعه ط صفاف اص ایط الگظ اسخفادى کضیذ اص غضاعش ةغشی ط سصگی ةشای صهایاش کشدش ط نخهایض کشدش‬
‫ایط الگظ اص سایش غضاعش نظجظد دس عفحه اسخفادى کضیذ‪ (.‬اص سصگ ط فظصد نخفاطحی صستد ةه سایش غضاعش‬
‫عفحه اسخفادى صهاییذ)‬
‫‪Discoverable‬‬
‫الگظی ‪ Discoverable‬صیض نی حظاصذ ةه غضظاش یک الگظی نضاسث ةشای حضظیم کاسةش ةه اصجام یک حػانل خاظ ةکاسگشفخه‬
‫صظد ‪.‬ایط الگظ نی حظاصذ ةشای آصضا کشدش کاسةشاش ةا حػانالحی که صیاص ةه اغهالی نزل کضیذش یا حشکد کشدش ةه چپ یا‬
‫ساسد داصخه ةاصضذ کاسةشد داصخه ةاصذ‪.‬‬
‫‪www‬‬ ‫‪188‬‬
‫‪eBay and Twitter‬‬
‫اص ایط الگظ ةه صذسج ط خیلی ةا دكد اسخفادى صهاییذ‪،‬نػهظال اص ایط الگظ ةشای حػانالحی که ةاغس ةشطص‬
‫سساصی نحخظای خاظ نی صظد اسخفادى نی گشدد‪.‬‬
‫‪www‬‬ ‫‪189‬‬
www.DrStartup.ir
(Feedback & Affordain) ‫ ةاصخظسد‬:‫فغل هضخو‬
:Feedback ‫الگظهای‬
Errors, Confirmation, System Status
:Affordace ‫الگظهای‬
Tap, Flick, Drag
www 190
‫‪Feedback‬‬
‫یکی اص كظاصیط نهو دس کاسةشد پزیشی ایط اسد که ةاصخظسد نضاسث ‪،‬صفاف ط صناصتضذی صذى سا ةه کاسةش اسایه دهیذ حا اط‬
‫صخیجه حػانل خظد ةا صشم افضاس سا ةتیضذ ط سش دس آطسد که سیسخو دس حال اصجام چه کاسی اسد‪.‬ةاص خظسد ها نی حظاصضذ دس‬
‫كالث یک صظاس پیضشفد سادى یا یک پیؿام ةاصضذ ‪،‬یا ایضکه دس كالث جلظى های طیژى گشافیکی ط ةغظسج پیضشفخه اسایه صظصذ‪.‬‬
‫الگظ های ‪ Feedback‬دس صشم افضاس های نظةایل صانل نظاسد صیش هسخضذ‪.‬‬
‫‪Feedback patterns‬‬
‫‪Error Messages‬‬
‫خقا ها ط اخقاس های ةشصانه ةایذ ةغظسحی سادى ط صفاف ط كاةل فهو اسایه صظصذ‪ (.‬اص اسایه کذ های خقا اجخضاب کضیذ )خقا ها‬
‫ةایذ دكیلا نظاسد نظسد صیاص سا ةغظسحی عشیح ةه کاسةش اسایه دهضذ ههچضیط ساى کاسهایی جهد سفؼ خقا صیض ةایذ اسایه‬
‫صظصذ‪.‬صهایط خقا ها ط اخقاس ها ةغظسج خیلی حاکیذی ناصضذ آصچه که دس اپلیکیضط ‪TaxCaster‬ط‪ Mint‬اسایه صذى اصذ ‪،‬‬
‫ةسیاس نضاسث حش اص ‪Dialog‬نی ةاصضذ صیشا صهایط خقا ها دس كالث پضجشى های ‪ Modal‬كسهد صیادی اص عفحه سا اصؿال‬
‫نی کضضذ ط نهکط اسد ةاغس غذم صهایط نحذطدى خقا صظصذ‪.‬‬
‫‪www‬‬ ‫‪191‬‬
www.DrStartup.ir
TaxCaster and Mint
www 192
‫‪Barnes & Noble Nook, error message in Action Sheet; Square, error message in dialog‬‬
‫اص یک صةاش سادى ةشای صهایط اخقاس ها اسخفادى صهاییذ‪ ،‬ةه یاد داصخه ةاصیذ که ساى حل سفؼ اخقاس سا صیض‬
‫اسا یه دهیذ‪.‬خقا سا ةه صحظی صفاف ةه کاسةش صهایط دهیذ‪.‬سػی کضیذاص پیؿام های دسطش عفحه ةه جای‬
‫دیالظگ های ‪ Modal‬اسخفادى کضیذ‪.‬‬
‫‪Confirmation‬‬
‫الگظی ‪ Confirmation‬یا گشفخط حاییذیه اص کاسةش ‪،‬صناصی کاسةشد داسد که غهلی نهو كشاس اسد اصجام صظد ‪.‬ةه یاد داصخه‬
‫ةاصیذ که دس حله الگظی صا نضاسث ‪ Idiot Box‬صیافخیذ‪ (.‬جهد کسث افالغاج ةیضخش ةه فغل ‪ 0:‬نشاجػه کضیذ‪).‬‬
‫سػی کضیذ ةه فشیلی نخفاطج ‪Feedback‬های نشةظفه سا اص کاسةش ةگیشیذ ط رهط اط سا نضظش صکضیذ‪ ،‬ةشای نزال اپلیکیضط‬
‫‪ Whole food‬ط ‪ Sprout‬هش دط اص ‪ Animation‬ةشای صهایط ط نقلؼ صذش کاس ةش اص اؽافه صذش آیخهی ةه لیسد نظسد‬
‫غالكه طی اسخفادى نی کضضذ‪.‬‬
‫‪www‬‬ ‫‪193‬‬
‫دس ایط ةشصانه ها کاسةش ةا صدش دکهه ‪ add‬صاهذ یک ‪Animation‬اص اؽافه صذش آیخو نشةظـ ةه لیسد غالكه نضذی ها‬
‫خظاهذ ةظد‪.‬‬
‫‪Whole Foods‬‬
‫‪www‬‬ ‫‪194‬‬
‫‪Sprout‬‬
‫اسخفادى اص ‪Feedback‬های دسطش ةشصانه ناصضذ آصچه دس اپلیکیضط ‪ Kik‬طجظد داسد ط ههچضیط حؿییش طؽػید دکهه ها ناصضذ‬
‫آصچه دس ةاصاس ‪ Android‬صیض طجظد داسصذ ‪،‬سطصهایی جالث هسخضذ که الگظی ‪ Confirmation‬سا ةذطش آصکه حذاخلی دس‬
‫نسیش رهط کاسةش ایجاد کضضذ سا پیادى ساصی کشدى اصذ‪.‬‬
‫‪www‬‬ ‫‪195‬‬
www.DrStartup.ir
kik
www 196
‫‪Android Marketplace‬‬
‫دس ةشخی نظاكؼ صیاص اسد که پیؿام ها ةغظسج کانال حاکیذی ط نحسظس ةه کاسةشاش صهایط دادى صظصذ‪،‬که ایط ةسخگی ةه‬
‫اههید نظؽظع داسد ( نزال دس پایاش یک حشاکضط نالی یا صناصی که افالغاحی ةشای صخغی اص فشیم ایهیل اسسال نی صظد )‬
‫‪www‬‬ ‫‪197‬‬
‫‪Best Buy and Discover card‬‬
‫حخها کاسةش سا اص غهلیاحی که دس حال اصجام اسد نقلؼ کضیذ طلی ةه یاد داصخه ةاصیذ که ایط کاس سا‬
‫ةگظصه ای اصجام دهیذ که نسیش رهضی کاسةش سا نخخل صکضیذ‪.‬‬
‫‪ - System Status‬طؽػید سیسخو‬

‫اسایه فیذةک ها ةغظسج نذاطم ط صناش ةضذی صذى ةاغس ایجاد اغخهاد دس اسخفادى اص یک ةشصانه اص سظی کاسةشاش نی صظد ‪،‬‬
‫اپلیکیضط ‪ Netflix‬اص یک غتاسج "‪" loading‬اسخفادى نی کضذ ‪ .‬دس ایط حالد کاسةش نقهئط اسد که ةشصانه دس حال اصجام‬
‫کاسی غهلیاحی نی ةاصذ ط صگشاش اص کاسافخادگی ةشصانه صهی صظد‪.‬اسخفادى اص الگظی ‪ System Status‬نػهظالدس كالث یک‬
‫پیؿام سادى ط یک الهاش نخحشک ةا یک صظاس پیضشفد یا حشکیتی اص ایط نظاسد پیادى ساصی نی صظد‪.‬الهاصی که طؽػید سا‬
‫صضاش نی دهذ نی حظاصذ دس عفحه حػتیه صظد‪ .‬ناصضذ اپلیکیضط ‪ Netflix‬یا ‪ Android Market‬ط یا اپلیکیضط ‪PageOnce‬‬
‫‪.‬یا ایضکه ةغظسج الیه ای ةش سطی عفحه اعلی ناصضذ سطصی که اپلیکیضط ‪ Tax Caster‬اسخفادى کشدى اسد پیادى ساصی‬
‫صظد‪.‬‬
‫‪www‬‬ ‫‪198‬‬
www.DrStartup.ir
Netflix and Android Marketplace
www 199
‫‪PageOnce and TaxCaster‬‬
‫اپلیکیضط ‪ Kayak‬اص یک صظاس پیضشفد یا ‪ Progressbar‬جهد صهایط طؽػید صخایج جسخجظی پشطاص ها اسخفادى نی‬
‫صهایذ‪.‬حخها ةه حفاطج پیادى ساصی ایط سطش دس سیسخو ‪ iOS‬ط ‪ Android‬حظجه داصخه ةاصیذ‪.‬‬
‫‪Kayak on Android and on iOS‬‬
‫دس نظسد فشآیضذ هایی که صناش صیادی نی ةشصذ حخها یک دکهه اصغشاف یا ههاش ‪ Cancel‬سا دس صظش ةگیشیذ ناصضذ کاسی که‬
‫اپلیکیضط ‪ SXSW‬دس نظسد داصلظد ةشصانه های صناصی جذیذ اصجام دادى اسد‪ .‬اپلیکیضط ‪ miCoach‬اص آدیذاس یک پیؿام‬
‫‪www‬‬ ‫‪200‬‬
‫نتخضی ةش اصجام غهلیاج داصلظد ةه ههشاى غذدی جهد صهایط نیضاش داصلظد اسایه نی دهذ‪.‬که ةهخش ةظد ساهکاسی سا صیض ةشای‬
‫اصغشاف کاسةش اسایه نی داد‪.‬‬
‫‪SXSW and Adidas miCoach‬‬
‫حخها اص الگظی فیذةک ةشای اسایه طؽػید فػلی سیسخو ةه کاسةش اسخفادى صهاییذ‪ ،‬دس نظاسدی که غهلیاج‬
‫فظالصی اسد ساهکاسی سا جهد ‪ Cancel‬کشدش حظسك کاسةش اسایه دهیذ‪.‬‬
‫‪www‬‬ ‫‪201‬‬
‫‪Affordance‬‬
‫الگظی ‪ Affordance‬ةیاصگش کیفید ط حظاصایی یک صی دس غهلیاج فشدی خظدش اسد ‪،‬نزال ‪ :‬گیشى کضظی دساطس یا کظةه‬
‫یک دس‪.‬نزالهای نػهظل دس دصیای صشم افضاس غتاسحضذ اص ‪ :‬غهلیاج ‪ Drag‬کشدش یک صی ‪ ،‬کضخشلگش های عفحه ةضذی‬
‫نجهظغه ای اص عفحاج ‪ ،‬کضخشل های سه ةػذی نزل دکهه ها ط اسالیذس ها‪.‬‬
‫اپلیکیضط های نظةایل صیض نی حظاصضذ اص ایط الگظ صیض ةهشى نضذ صظصذ‪.‬دس ایضجا حػذادی اص الگظ های كاةل اسخفادى دس عفحاج‬
‫لهسی اسایه صذى اصذ‪.‬‬
‫‪Affordance patterns‬‬
‫‪Tap‬‬
‫اسخفادى اص حکضیک های ةغشی نزل سایه ها ط لته ها ةاغس نی صظصذ که الهاصهای عفحه كاةل لهس ط صدش ( ‪) Tap‬ةضظش‬
‫ةشسذ‪ .‬اپلیکیضط های ‪ Pictory‬ط ‪ GroupMe‬هش دط اص ایط افکد ها ط جلظى های ةغشی جهد صهایاش ساخخط ایط صکخه که‬
‫غضاعش عفحه كاةل لهس کشدش ط صدش هسخضذ اسخفادى کشدى اصذ‪.‬‬
‫‪www‬‬ ‫‪202‬‬
‫‪3D buttons in Pictory and 3D buttons and fields in GroupMe‬‬
‫ایط صکخه خیلی نهو اسد که اص ایط جلظى ها ةقظس عحیح اسخفادى صظد‪.‬دس ةشصانه ‪Yelp‬دکهه جسخجظ دكیلا نزل یک دکهه‬
‫فشاحی صضذى اسد ط اص فشفی هش یک اص الهاصهای عفحه حخی جػته نخط ها نزل یک دکهه فشاحی صذى اصذ ‪،‬حخی نخضها (‬
‫‪Label‬ها)نزل دکهه ةه صظش نی سسضذ‪.‬‬
‫‪www‬‬ ‫‪203‬‬
‫( ‪Left) Yelp's search button doesn't look tappable; (Right) all of these labels look tappable‬‬
‫اص جلظى های ةغشی نػهظل ةشای صهایاش ساخخط ایط صکخه که اصیا كاةل ‪ Tap‬صذش هسخضذ اسخفادى صهاییذ‪.‬‬
‫اص حکضیک های سه ةػذی ةه دكد اسخفادى صهاییذ صیشا اسخفادى ةیط اص حذ اص سایه ها ط لته ها ةاغس‬
‫کاهط خظاصایی طاسك کاسةش نی صظد‪.‬‬
‫‪Flick‬‬
‫دس پیادى ساصی الگظی ‪ Affordance‬اص حکضیک های ةسیاسی نی حظاش اسخفادى کشد که ةه کاسةش صضاش دهیذ که کاسهای‬
‫صیادی نی حظاصذ اصجام دهذ ‪ .‬صهایضگش حػذاد عفحاج که دس ‪ iOS‬ةشای اطلیط ةاس اسایه صذى ( نضظظس ههاش صلقه های‬
‫کظچک صیش حغاطیش ط اسالیذس هاسد ) انشطصى دس طب ط فشاحی ةشصانه های نظةایل ةسیاس سایج صذى اصذ ‪.‬‬
‫‪www‬‬ ‫‪204‬‬
‫‪FreeTime and Audible‬‬
‫یکی دیگش اص ساهکاسهای جایگضیط ایط اسد که كسهد کهی اص صی عفحه ةػذ سا ةسخه ةه ایضکه صاطةشی ةشصانه چگظصه اسد‬
‫( نزال ةه سهد چپ یا پاییط ) سا ةه کاسةش صهایاش کضیو‪.‬هش دطی ایط حکضیک ها ةاغس حشؾیث کاسةش نی صظصذ که کاطش سا‬
‫ادانه دهذ ط ةا غهل کضیذش عفحاج سا نشطس صهایذ‪.‬‬
‫‪www‬‬ ‫‪205‬‬
‫‪Piictu and TweetBot‬‬
‫یک ساهکاسی که کهخش نشسظم اسد صهایط ‪ Scroll Bar‬نی ةاصذ‪.‬خظد ‪ Bar‬نی حظاصذ ایط کاسةشی سا داصخه ةاصذ که ةا‬
‫کلیک کشدش سطی كسهخی اص آش ‪،‬سشیػا ةه كسهد نشةظفه ةپشیو‪ .‬اپلیکیضط ‪ Roambi‬اص یک ‪ Scrollbar‬صانشیی دس كسهد‬
‫ساسد عفحه ةا حػذادی صلقه ستض که ةیاصگش نظكػید فػلی ‪ bar‬نی ةاصذ اسخفادى نی کضذ‪ Skype.‬اص ‪ scrollbar‬الفتایی‬
‫که دس سیسخو غانل ‪ iOS‬ةسیاس نػهظل اسد اسخفادى نی صهایذ‪.‬‬
‫‪www‬‬ ‫‪206‬‬
‫‪Roambi's Cardex and Skype‬‬
‫اص صهایاصگش عفحه یا صهایط گظصه ای اص اصیا دیگش جهد پیادى ساصی الگظی ‪ Affordance‬ةهشى نضذ‬
‫صظیذ حا کاسةش ةه فظس صاخظد آگاى ةفههذ که ةا کضیذش آیخو ها نی حظاصذ ةه نحخظای ةیضخشی دسخشسی‬
‫داصخه ةاصذ! اص ةکاس ةشدش ‪ ScrollBar‬های سضگیط خظد داسی صهاییذ!‬
‫‪Drag‬‬
‫دسخگیشى ‪ Darg‬ةیاصگش ایط اسد که ایط انکاش ةشای یک آیخو طجظد داسد که کضیذى صظد‪،‬جاةجا صظد ط نشحث ساصی نجذد‬
‫گشدد‪.‬ایط الگظ دس نظسد لیسد ها ةسیاس کاسةشدی ط نضاسث اسد‪.‬ههاصضذ آصچه دس اپلیکیضط ‪Yahoo! Finance‬ط ‪Roambi‬‬
‫پیادى ساصی صذى اسد‪.‬‬
‫‪www‬‬ ‫‪207‬‬
www.DrStartup.ir
Yahoo! Finance and Roambi
!‫ ةه آش اصاسى صذ‬Preview window ‫ دس ةخط‬6 ‫ كشاس داسصذ ههاصضذ آصچه دس فغل‬Darg ‫اسالیذسها صیض ةش پایه الگظی‬
www 208
‫‪Audible and Roambi‬‬
‫حخها اص یک ‪Icon‬ط صهاد كاةل دسک ةشای کاسةش ‪،‬دس نظسد غهلیاج ‪ Drag‬اسخفادى صهاییذ‪.‬کاسةشةایذ ةه‬
‫صحظی اص كاةلید ‪ drag‬صذش آش آگاى صظد‪.‬‬
‫‪www‬‬ ‫‪209‬‬
www.DrStartup.ir
(Help) ‫ساهضها‬: ‫فغل صهو‬
How To, Cheat Sheet, Tour
www 210
‫اپلیکیضط های نظةایل ةایذ اص صظش صظع کاسةشی ةسیاس سادى ط ةه سشغد كاةل آنظصش ط حشفه ای صذش ةاصضذ‪،‬نا ةه ایط که‬
‫ةشصانه چلذس سادى اسد کاسصذاسیو‪،‬ههظاسى ةایذ ساهکاسهایی ةشای آنظصش ط ساهضهایی کشدش کاسةش طجظد داصخه‬
‫ةاصضذ‪.‬حػذادی اص الگظهای نشسظم ساهضهایی کشدش ط آنظصش کاسةش دس ادانه اسایه صذى اصذ‪.‬‬
‫‪Help Patterns‬‬
‫‪How to‬‬
‫الگظی ‪ How to‬ةه سادگی صحظى کاسةشی ط اسخفادى اص اپلیکیضط سا اسایه نی دهذ‪.‬ایط الگظ نی حظاصذ دس كالث یک عفحه‬
‫‪،‬ناصضذ آصچه دس اپلیکیضط ‪ Pictory‬ط ‪ Phoster‬پیادى ساصی صذى اصذ ‪،‬اسایه صظد ط یا دس كالث چضذ عفحه ناصضذ آصچه دس‬
‫اپلیکیضط ‪ Awesome Note‬اسایه صذى پیادى ساصی صظد‪.‬‬
‫‪www‬‬ ‫‪211‬‬
www.DrStartup.ir
Phoster and Pictory
www 212
‫‪Awesome Note‬‬
‫اص حشکیث نخط ‪،‬حغظیش‪،‬نزال ط‪ ...‬ةشای ةشكشاسی اسحتاـ نظرشحش دس ایط الگظ اسخفادى صهاییذ‪.‬‬
‫‪Cheat Sheet‬‬
‫الگظی ‪ Cheat Sheet‬یک ساهکاس ستک ط سشیؼ جهد نػشفی الهاصهای نظجظد دس یک اپلیکیضط اسد‪ .‬اپلیکیضط ’‪Tap ‘n‬‬
‫‪ Scrap‬اص یک عفحه جذاگاصه ةشای اسایه ایط الگظ اسخفادى کشدى اسد‪ ،‬ایط دس حالی اسد که اپلیکیضط ‪ Swipe‬دس اصذسطیذ‬
‫اص یک عفحه ‪ Dialog‬ةهشى نضذ صذى اسد‪.‬حخها ةه فغل ‪ 7‬سجظع کضیذ‪.‬‬
‫‪www‬‬ ‫‪213‬‬
‫‪Swype on Android and Tap’n’Scrap‬‬
‫الگظی ‪ cheat sheet‬جایگضیضی ةشای یک فشاحی خظب صیسد‪،‬طلی ایط الگظ نی حظاصذ دس صنیضه افضایط‬
‫ةهشى طسی ط آصضایی کاسةش ةا طیژگی های صشم افضاس ةسیاس کاسا ةاصذ‪.‬‬
‫‪Tour‬‬
‫صایذ ةخظاش گفد که الگظی ‪ Tour‬ةهخشیط ساهکاس اسایه ساهضها ط آنظصش ةه کاسةشاش نی ةاصذ‪.‬ایط ساهکاس نی حظاصذ دس اطلیط‬
‫اسخفادى ةقظس احظناج اسایه صظدط ةػذ ها صیض ةه ساحخی دس دسخشس ةاصذ‪.‬نزالها ط افالغاج ةیضخش دس فغل ‪ 7‬اسایه صذى اصذ‪.‬‬
‫‪www‬‬ ‫‪214‬‬
www.DrStartup.ir
TripIt and FreeTime
www 215
‫‪Adidas miCoach‬‬
‫ةا ایضکه ساهضهای ‪ Quick Start‬اپلیکیضط ‪Valspar‬ةسیاس جزاب ط حاطی اصظاع نحخظای صیتا ط جزاب اسد طلی ایط ساهضها‬
‫خیلی سشیؼ ط کاسةشدی صیسد‪،‬حذطد ةیط اص ‪ 02‬عفحه دس آش طجظد داسد که ةایذ آصها سا پیهایط صهظد‪ ،‬سػی کضیذ ‪Tour‬سا‬
‫دس کهخش اص ‪ 6‬عفحه اسایه دهیذ‪.‬‬
‫‪www‬‬ ‫‪216‬‬
‫‪Valspar's not so quick guide‬‬
‫‪ Tour‬ها ةایذ صکاج اعلی ةشصانه سا پش سصگ صهاییذ ‪،‬ةهخش اسد ایط صکاج اعلی ةا سضاسیظ های رهط کاسةش‬
‫هو خظاصی داصخه ةاصضذ‪.‬ایط ‪ Tour‬ها سا کظحاى حهیه کضیذ ط حخها اص غضاعش ةغشی ةهشى نضذ صظیذ‪.‬‬
‫‪www‬‬ ‫‪217‬‬
www.DrStartup.ir
‫ؽذ الگظ ها‬: ‫فغل دهو‬
: ‫ؽذ الگظ ها‬
Novel Notions, Metaphor Mismatch, Idiot Boxes, Chart Junk, Oceans of Buttons
www 218
‫ؽذ الگظها چه هسخضذ؟ ‪ Wekipedia‬حػشیف صیش سا اسایه دادى اسد‪:‬‬
‫ؽذ الگظ ها ‪ ،‬یا خقا ها غتاسحضذ اص ساهکاسهای اصختاهی که ةاسها ط ةاسها حظسك افشاد دس ةشخظسد ةا نسایل ةظجظد نی آیضذ‪.‬‬
‫آصها ةقظس کانل دس نلظله ای جذاگاصه نظسد ةحس ط ححلیم كشاس نی گیشصذ که اص ةشطص آصها دس آیضذى جلظگیشی صظد‪.‬ایط گظصه‬
‫الگظ ها اص سیسخو هایی اسخخشاج صذى اصذ که خیلی نظسد اسخلتال كشاس صگشفخه اصذ‪.‬ایط طاژى ةشای اطلیط ةاس حظسك ‪Gang of‬‬
‫‪Four‬که صظیسضذگاش کخاب الگظهای فشاحی که کخاةی اسصصهضذ دس صنیضه اعظل فشاحی سیسخو های کانپیظحشی اسد‪ ،‬دس‬
‫دصیای کانپیظحش ط ةشصانه صظیسی نقشح صذ‪.‬‬
‫ههاصضذ ؽذ الگظهایی که دس دصیای ةشصانه صظیسی طجظد داسصذ ‪ ،‬دس ادانه ةه نػشفی ؽذالگظهایی دس دصیای فشاحی طاسك‬
‫کاسةش خظاهیو پشداخد‪.‬‬
‫‪ – Novel Notation‬ؽذالگظی ایذى های ةذیؼ ط جذیذ !‬

‫ایذى های ةذیؼ ط جذیذ سػی دس ایط داسصذکه ةغظسحی جذیذ ‪،‬خالق ط صظآطساصه فشح هایی سا اسایه دهضذ‪،‬طلی ةیضخش طكد ها‬
‫ایط ایذى ها ةسیاس صانضاسث هسخضذ ‪ ،‬ایط ایذى ها کاسةشی سخخی داسصذ ط نػهظال ةه سخخی حظسك کاسةشاش دسک نی صظصذ‪.‬‬
‫‪ Richard Gunther‬ساصصذى ‪ BUI Gallery‬ایط نسئله سا ایضگظصه حظؽیح نی دهذ که ‪:‬‬
‫" ایط احفاق نػهظال صناصی سخ نی دهذ که حػذادی اص فشاحاش كذیهی طب حغهیو نی گیشصذ طاسد حظصى فشاحی طاسك های‬
‫نظةایل صظصذ‪.‬آصها نػهظال سػی داسصذ که احفاكاج ط حػانالحی که دس طب سخ نی دهذسا ةگظصه ای صظآطساصه ( التخه اص دیذگاى‬
‫خظدصاش) دس سیسخو ها ی نظةایل پیادى ساصی صهایضذ‪.‬نػهظال آصها ایط ایذى ها سا دس كالث یکسشی الهاصهای طاسك کاسةش ؾیش‬
‫اسخاصذاسد اسایه نی دهضذ‪".‬‬
‫ایط ایذى های جذیذ دس هش جای ةک ةشصانه نظةایل نهکط اسد صهایاش صظصذ‪،‬اص پیهایط های اطلیه گشفخه حا فشاحی یک‬
‫کضخشل طیژى طخاظ یا حخی دس سقح صحظى حػانل ط ةشخظسد ها صاهذ آصها هسخیو‪ .‬اپلیکیضط ‪ Weight Watcher‬صانل حػذاد‬
‫صیادی اص ایط ایذى های صظآطساصه دس طاسك کاسةشش نی ةاصذ‪.‬نههخشیط ایط صظآطسی ها نشةظـ ةه پیهایط اطلیه آصهاسد‪.‬آصها اص‬
‫یک نضظی کضظیی اسخفادى کشدى اصذ که صانل یکسشی گضیضه پشش ط جهط ةه كسهد های نخخلف ةشصانه اسد‪.‬‬
‫‪www‬‬ ‫‪219‬‬
‫‪Weight Watchers‬‬
‫ایط فاجػه اسد!ط کاسةشی سخخی داسدط ساصناصذهی غضاعش سیسخهاحیک صیسد ةلکه آصظب صاک ط حغادفی اسد ط‬
‫نههخشیط صکخه ایضکه نههخشیط انکاصاج صشم افضاس ةشای آصکه ةیضضذگاش سا ةه نضخشیاش حتذیل کضذ ‪،‬ةذسسخی صهایاش صضذى اصذ‪.‬‬
‫( دس عفحه دطم‪ ،‬نضظی اعلی حاصى صهایاش صذى ط کاسةش نخظجه نی صظد که هذف ط كغذ صشم افضاس چه ةظدى اسد) نا دس‬
‫عفحه دطم حاصى ةا صشم افضاس اسحتاـ ةشكشاس نی کضیو‪ ،‬ایط دسحالی اسد که اپلیکیضط ‪ weight watcher‬نی حظاصسد ةا‬
‫اسخفادى اص یک نذل پیهایط اسخاصذاسد ط عحیح حهانی گضیضه ها ساةقظس نضاسث حشی ةه کاسةشاش صهایط دهذ‪.‬‬
‫‪www‬‬ ‫‪220‬‬
www.DrStartup.ir
Tab menu option, wireframe (left); scrolling tab option, wireframe (right)
www 221
‫)‪List menu option, wireframe (left); interior screen concept (right‬‬
‫اپلیکیضط ‪ Fly Delta‬دس ‪ iPhone‬صیض اص یک نذل ةذیؼ ط جذیذ دس نضظهایط اسخفادى کشدى اسد‪.‬‬
‫التخه ةه حاصگی ایط نضظ سا ةا یک نضظی كاةل کضف صذش ( ةا کضیذش دسد ) دس كسهد پاییط ط ‪ Footer‬ةشصانه‪ ،‬آیکظش‬
‫‪ Home‬ط یک لیضک ةه كسهد دسةاسى نا یا ههاش ‪ Contact Us‬جایگضیط کشدى اصذ‪.‬‬
‫‪www‬‬ ‫‪222‬‬
‫)‪Fly Delta, previous menu (left) and new menu (right‬‬
‫ایط صکخه که کاسةش ةا یک کلیک سشیؼ ةه عفحه اطل نضخلل صظد ةسیاس صکخه نههی اسد‪.‬اسخفادى اص ‪ Tap‬های اسخاصذاسد‬
‫‪ iOS‬نی حظاصسد خیلی نفیذ طاكؼ صظد‪.‬ةهخش ةظد ‪ Contact Us‬صیض دس كسهد ةاالسهد ساسد كشاس گیشد حا ایضکه دس كالث‬
‫یک گضیضه اص یک نضظی پضهاش ‪.‬آیا ایط نضظ ةشصانه سا خالكاصه حش کشدى اسد یا خیش‪ ،‬فلك کاسةشی ةشصانه سا کهی سخد حش‬
‫صهظدى اسد؟!‬
‫دس ةشخی نظاكؼ یک حیو خالق ط ةا اسخػذاد نی حظاصضذ ةا کهی دكد ط صظآطسی اص صظآطسی های ةذیؼ ةگظصه ای اسخفادى صهاییذ‬
‫که طاسك کاسةشی سا ةهتظد دهذ‪.‬فشاحاش اپلیکیضط‪ Gowalla‬اص نضظهای اسخاصذاسد اسخفادى کشدى اصذ ط ةا حؿییشاحی جضیی دس‬
‫آش کاسةشی آش سا ةهتظد ةخضیذى اصذ‪ .‬اپلیکیضط ‪ Forecast‬صیض سػی کشدى حا اص ایط ایذى ةذطش حظجه ةه ظشافد های فشاحی‬
‫آش ةهشى نضذ صظد‪.‬‬
‫‪www‬‬ ‫‪223‬‬
‫‪Gowalla and Forecast‬‬
‫ةا طجظد ایضکه فلك ‪ 2‬گضیضه دس كالث ‪ Tab‬دس ‪ Forecast‬اسخفادى صذى اسد‪،‬خیلی صناش نی ةشدحا ایضکه کاسةش نخظجه صظد‬
‫که آیا داسد لیسد ‪ Forecast‬ها سا نی ةیضذ یا ‪Check In‬ها سا؟ فشاحی ةغشی دس ایط صنیضه ةه کاسةش کهکی صهی کضذ‪.‬صیشا‬
‫گضیضه ‪ Check In‬دس نظسد هش آیخو دس حالی که هضظص ‪ Tab‬آش اصخخاب صضذى اسد ةه کاسةش صضاش دادى نی صظد ط اص فشفی‬
‫اص صظش ظاهشی ةه دلیل حظسفخگی فشاحی دس نظسد ط گضیضه ‪ ،Check In‬ایط گضیضه ةضظش نی سسذ که اصخخاب صذى اسد‪.‬‬
‫‪www‬‬ ‫‪224‬‬
‫‪Recessed style typically indicates the selected option‬‬
‫اسخفادى اص یک صظاس اصخخاةی سادى نی حظاصذ ایط سشدسگهی کاسةش سا کهخش صهایذ ‪،‬ةا کهی دكد دس سطصذ ةشصانه ‪،‬ةضظش نی سسذ‬
‫که اسخفادى اص یک لیسد اص ‪ Activity‬ها که ةغظسج حشکیتی ‪ Forecast‬ها ط ‪ Check In‬ها سا ةغظسج نشحث صذى ةا صناش‬
‫صضاش دهذ نی حظاصذ ةسیاس کاسةشدی ةاصذ‪.‬ایط فشاحی ةش پایه ایط اسد که اگش ‪ Forecast‬ی حظسك کاسةشی سخ دهذ‬
‫ةغظسحی نضخػ ایط نظسد صهایط دادى صظد ‪،‬ةػتاسحی اسخفادى اص یک ‪ ،Icon‬ةا نظؽظع‪ Forecast‬دس کضاس پشطفایل کاسةش نی‬
‫حظاصذ ةیاصگش ایط ةاصذ که کاسةش اص یک نکاش دیذش کشدى اسد یا ایضکه‪ Forecast‬صیض داصخه اسد‪.‬‬
‫‪www‬‬ ‫‪225‬‬
‫‪Wireframe with iOS standard tabs‬‬
‫غالطى ةش ایط اپلیکیضط ‪ Forecast‬یک ‪ tab bar‬سفاسصی فشاحی کشدى اسد ‪،‬طلی ایط ‪ tab bar‬صیض داسای یکسشی نضکالج‬
‫اسد! ایط گظصه ‪ tab bar‬ها صناصی کاسةشدی هسخضذ که ةشای ةشصانه هایی ةا یک کاسةشی ط غهلیاج خاظ ةکاس گشفخه ةاصضذ‬
‫‪www‬‬ ‫‪226‬‬
‫‪،‬نزال اسسال ط ةه اصخشاک گزاسی حغظیش دس ‪. Instagram‬اپلیکیضط ‪ 2 Forecast‬غهل اعلی سا دس ةش داسد ‪،‬یکی ‪ Forecast‬ط‬
‫دیگشی ‪.Check In‬‬
‫‪Pinterest and Instagram‬‬
‫اسخفادى اص یک دکهه ‪ Forecast‬اخخغاعی نی حظاصذ نفیذ طاكؼ صظد‪،‬نی حظاش اص یک الگظی ‪ Invitation‬هو ةشای کاسةشاصی‬
‫که ةشای اطلیط ةاس ةا آش نظاجه نی صظصذ صیض اسخفادى کشد‪.‬دس ؾیش ایضغظسج نی حظاش اص یک ‪ Icon‬اخخغاعی دس یک ‪tab‬‬
‫‪ bar‬طیژى اسخفادى صهظد‪.‬‬
‫‪www‬‬ ‫‪227‬‬
‫( ‪Add Forecast button with invitation (left); alternate version with a custom toolbar (right‬‬
‫اگش ةذصتال ایجاد خالكید ط صظآطسی دس ةشصانه هایخاش هسخیذ‪،‬ةهخش اسد ایط صظآطسی ها سا دس سقح طیژگی‬
‫ها ط فلسفه طجظدی صشم افضاسحاش اسایه دهیذ حا ایضکه دس طاسك کاسةشی آصها ‪ ،‬دس فشاحی طاسك کاسةشی‬
‫سػی کضیذ حخها اسخاصذاسد ها سا سغاید کضیذ‪.‬اگش كغذ فشاحی یک کضخشل اخخغاعی سا داسیذ ‪،‬حخها آش‬
‫سا ةاسها ط ةاسها آصنایط کضیذحا نقهئط صظیذ کاسایی الصم سا داسد‪.‬‬
‫‪-Metaphor Mismatch‬ؽذ الگظی غذم اصقتاق ‪ Metaphor‬ها‬

‫ایط ؽذ الگظ صناصی احفاق نی افخذ که اص یک ‪ Metaphor‬اصختاى ةشای كسهخی اص طاسك کاسةش اسخفادى صهاییذ‪.‬غذم اصقتاق‬
‫‪ Metaphor‬ها دس سقظح نخخلفی نی حظاصذ سخ دهذ‪.‬اص سقظح پاییط گشفخه ( نزل غذم اسخفادى اص یک حغظیش ط آیکظش‬
‫نضاسث یا کانپظصضد نضاسث دس طاسك کاسةش ) حا سقظح ةاال که اعال نذل نفهظنی صشم افضاس ةا نذل رهضی کاسةش حقاةم‬
‫صذاسد!‬
‫‪www‬‬ ‫‪228‬‬
‫‪ - Control Mismatch‬صانضاسث ةظدش ةکاسگیشی کضخشل ها‬

‫یکی اص نزالهای سادى ایط ؽذ الگظ دس سقظح پاییط سا نی حظاش دس اپلیکیضط ‪ Calorific‬دیذ‪،‬که دس آش ةشای دسیافد سط‬
‫کاسةش اص یک لیسد ةلضذ ةاال که حهانی سط ها دس آش لیسد صذى اسد ‪،‬ةجای یک کضخشل ‪ Date Picker‬اسخفادى صذى‬
‫اسد‪.‬نزال دیگش اپلیکیضط ‪ Easy Point Calculator‬اسد که دس آش ةجای اسخفادى اص کضخشل ‪ Label‬اص کضخشل دکهه‬
‫‪ Button‬اسخفادى صذى اسد‪.‬‬
‫‪Calorific and Easy Point Calculator‬‬
‫اپلیکیضط ‪ What To Expect’s Baby‬صیضدچاس ههیط ؽذ الگظی غذم اصقتاق دس ةیط کضخشل هایی که ةشای پیهایط‬
‫اسخفادى نی صظصذ ط آش دسخه کضخشل هایی که افشاد اصخظاس یافخط آصها سا داسصذ صذى اسد‪.‬دس اطلیط ةشخظسد ةا ایط اپلیکیضط‬
‫ةضظش نی سسذ که داسای ‪ 4‬حالد پیگیشی طؽػید کظدک ط یک دکهه نضاهذى ‪ Log‬اسد‪.‬‬
‫‪www‬‬ ‫‪229‬‬
‫‪WTE's Baby Tracker‬‬
‫طلی ایط اپلیکیضط داسای یک نضظی ةا گضیضه های پیضشفخه دس كسهد ‪ Title‬ةاس اسد‪.‬ایط گضیضه ها ةا اسخفادى اص دکهه‬
‫‪ Filter‬اسایه صذى اصذ‪.‬ةا ایضکه ایط دکهه ‪Filter‬دس اپلیکیضط هایی نزل ‪ ACL‬ط ‪ 360News‬کاسةشدی ةسیاس نضاسث داسد‬
‫طلی اسخفادى اص ایط سطش ةشای پیادى ساصی پیهایط اطلیه کاس دسسخی صیسد‪.‬‬
‫‪www‬‬ ‫‪230‬‬
‫‪ACL, filter control for shows; news360, filter control for stories‬‬
‫اظهاس صظش یک صاهذ غیضی ‪ :‬نط اپلیکیضط ‪ What To Expect‬سا صناصی که پسشم سه هفخه ای ةظد صغث کشدم‪.‬نط فلك ‪4‬‬
‫گضیضه دس ایط ةشصانه دیذم‪،‬ةشای ههیط ةشصانه سا پاک کشدم‪.‬‬
‫‪- Icon Mismatch‬غذم اصقتاق آیکظش‬

‫آیکظش ها دسخه ای دیگش اص نظاسدی هسخضذ که ةاغس ةشطص ؽذ الگظی غذم اصقتاق ‪Metaphor‬نی صظصذ‪.‬کاسةشاش اصخظاس‬
‫داسصذ که هش حغظیش ط آیکظش دس ةشصانه ههخظاصی نضاستی ةا غهلکشد خظد داصخه ةاصذ‪.‬اسخفادى اص حغاطیش ؾیش نشحتك نی‬
‫حظاصذ ةاغس سشدسگهی کاسةش گشدد‪.‬‬
‫دس كسهد ةاالی سهد ساسد اپلیکیضط ‪ Weight Watcher‬یک دکهه اسسال ‪ iOS‬ی كشاسداد‪.‬ایط دکهه نػهظال جهد‬
‫اسسال ایهیل‪،‬یا ةه اصخشاک گزاسی دس صتکه های اجخهاغی نزل فیستظک نظسد اسخفادى كشاس نی گیشد‪.‬نط ةسیاس نخػجث‬
‫صذم طكخی دیذم که ایط دکهه ةشای دیذش غالكه نضذی ها ط اؽافه صذش ةه لیسد خشیذ ةکاسةشدى صذى اسد‪.‬اسخفادى اص‬
‫یک صظاس اةضاس اسخاصذاسد نی حظاصسد کاسةا ایط اپلیکیضط سا سادى حش ط كاةل فهو حش صهایذ‪.‬‬
‫‪www‬‬ ‫‪231‬‬
‫‪Send button has unexpected options‬‬
‫غذم حقاةم نذل رهضی کاسةش‬

‫یکی اص نزال های نظسد غالكه نط دس ایط نظسد ‪،‬نشةظـ نی صظد ةه سیسخو گضاسش خقا که یکی اص کاسنضذاش ساةم نا آش سا‬
‫فشاحی کشدى ةظد‪،‬دس ایط سیسخو طكخی نا ةه یک نضکل فضی ةشنی خظسدیو ‪،‬اص فشانظصی کلهه غتظس گشفخه حا اص کاسافخادش‬
‫‪ laptop‬نا ةایذ دس سیسخو طاسد نی صذیو‪،‬لیسد نظاسد ط خقا ها سا نشطس نی کشدیو‪،‬یک نظسد سا اصخخاب ط سپس آش سا ةه‬
‫یک ‪( Shopping Cart‬ستذ خشیذ ) اؽافه ط سپس ‪ Check Out‬نی کشدیو‪.‬ایط صشم افضاس ةشای خشدى فشطصی آصالیط ةسیاس‬
‫نضاسث اسد طلی اص صظش نذل رهضی کاسةش ‪،‬هیچ اصقتاكی ةا یک سیسخو پیضخیتاصی صذاسد‪.‬‬
‫‪www‬‬ ‫‪232‬‬
‫‪Help desk example‬‬
‫اپلیکیضط ‪ ABC News‬ةشای ‪ iPad‬سا ةػضظاش یک نزال دس صظش ةگیشیذ‪.‬یک صشم افضاس ههه جاصته ةشای نشطس اختاس( کشى‬
‫جادطیی نشطس اختاس)!ایط ادغا صناصی عادق اسد که ةخظاش ةش اساس هش نظكػید جؿشافیایی اختاس نشةظـ ةه آش سا دسیافد‬
‫کشد‪ ،‬ایط دس حالی اسد که نشطس اختاس دس ایط صشم افضاس ةسیاس نضکل اسد‪.‬ایط صشم افضاس ةغظسج کشطی حهانی اختاس سا‬
‫اسایه نی دهذ که نشطس کشدش آش ةسیاس نضکل اسد‪.‬‬
‫ایط صشم افضاس سا ةا صشم افضاس ‪ GeoWalk‬که یک صشم افضاس آنظصصی اسد که احفاكاج ط طكایؼ غلهی سا اص سشاسش جهاش اسایه‬
‫نی دهذ نلایسه نی کضیو ‪.‬دس ایط صشم افضاس ‪،‬افالغاج دس كالث یکسشی کاسج هایی سطی کشى صنیط صهایط دادى نی صظصذ ط‬
‫صها نی حظاصیذ ةا اصخخاب هش نضقله افالغاج نشةظـ ةه آش سا ةتیضیذ‪.‬‬
‫‪www‬‬ ‫‪233‬‬
‫‪ABC News and GeoWalk‬‬
‫نخافظس ها ‪،‬اص فشاحی آیکظش ها ط کضخشل ها گشفخه حا نذل های نفهظنی کاسةش نی حظاصضذ ةشای ایجاد یک‬
‫حجشةه کاسةش نظسد اسخفادى كشاس گیشصذ‪.‬اسخفادى صا نضاسث اص آصها ةاغس نی صظد که دسک ةشصانه طکاسةشی‬
‫ةشصانه دصظاس صظد‪.‬‬
‫‪Idiot Box‬‬
‫‪ Alan Coopers‬دس کخاب ‪ About Face 3‬ایط سضاسیظ سا حظؽیح نی دهذ که ‪:‬‬
‫"صناصی که یک کاسةش دس حال کاس ةا یک عفحه ط كسهخی اص ةشصانه ط اةضاس های آش اسد ‪،‬دس حالخی ةسیاس نضاسث اص صظش‬
‫رتاج رهضی ط ههاهضگی كشاس داسد‪.‬ایجاد طكفه ةذطش دلیل ط صانضاسث دس سطال کاسی کاسةش ةسیاس صصضذى اسد ‪،‬ةگظصه ای که‬
‫یکی اص ةذحشیط حجشةیاج سا ةشای کاسةش اص ةشصانه صها ةه اسنؿاش خظاهذ داصد‪".‬‬
‫‪ Bill Scott‬ایط نفهظم سا ةه ایضغظسج صام گزاسی کشدى اسد ‪ :‬ایجاد طكفه احهلاصه دس سطال اصجام کاس!ط ؽذ الگظی جػته‬
‫احهلاصه یا ‪ Idiot Box‬سا اةذاع صهظد‪.‬‬
‫‪www‬‬ ‫‪234‬‬
‫نزال نظسد غالكه نط دس نظسد ایط ؽذ الگظ ‪،‬عفحه رتد صام اپلیکیضط‪ Photobucket‬اسد‪.‬ةػذ اص ایضکه نط ةه سخخی ‪0:‬‬
‫فیلذ نشةظـ ةه فشم رتد صام سا کانل کشدم‪،‬ط دکهه ةضسگ ستض سصگ ةا غضظاش "نط نظافلو نشا رتد صام کضیذ!" سا صدم‪،‬ةا ایط‬
‫دیالظگ سطةشطی صذم!‬
‫‪Photobucket's registration and Best Buy‬‬
‫اطى ‪،‬ةله نط نقهئط هسخو که نی خظاهو رتد صام کضو!ةشای ههیط ‪،‬کلی فیلذ سا طاسد کشدم ط دکهه ةضسگ رتد صام سا صدم!‬
‫اپلیکیضط ‪ Best Buy‬ةشای ایضکه کاسةش سا اص اؽافه صذش یک آیخو ةه ستذ خشیذش نقهئط ساصد اص ؽذالگظی ‪Idiot Box‬‬
‫اسخفادى کشدى اسد‪.‬سطش ةهخشی که کهخش حهشکض کاسةش سا ةهو ةضصذ ایط اسد که حػذاد اكالم نظجظد دس ستذ خشیذ سا اؽافه‬
‫کضذ !اپلیکیضط‪ Zappos‬حخی یک گام فشاحش سفخه ط اص یک جلظى طیژى ةشای صهایط آیخو هایی که ةه کاسج خشیذ اؽافه صذى‬
‫اصذ اسخفادى کشدى اسد ‪ ،‬ةا ایط کاس ‪ 2‬هذف ةشآطسدى صذى اسد ‪:‬‬
‫‪www‬‬ ‫‪235‬‬
‫‪ ‬اسایه فیذةک ةه کاسةش که یک آیخو ةه ستذ خشیذ اؽافه صذ‬

‫‪ ‬صهایط ایط نظسد که کاسةش اص فشیم اپلیکیضط ةه ستذ خشیذ دسخشسی داسد‬
‫‪Zappos‬‬
‫صها نجتظس صیسخیذ که حخها اص یک گشةه یا یک چخش ةشای اسایه فیذةک های اؽافی اسخفادى کضیذ ‪.‬ةشای ایذى های ةیضخش ةه‬
‫فغل ‪ 8‬سجظع کضیذ‪.‬‬
‫اص ایضکه سطال کاسی ای که کاسةش دس آش كشاس داسد سا ةذطش دلیل كقؼ کضیذ‪،‬خظد داسی صهاییذ‪.‬دیالظگ ها‬
‫سا حضها دس صناصی اسخفادى کضیذ که غهلیاحی ؾیش نػهظل كشاس اسد اصجام صظد ‪،‬نزال پاک کشدش یک آیخو‪.‬‬
‫‪Chart Junk‬‬
‫‪ Edward Tufre‬غتاسج ‪ Chart Junk‬سا دس سال ‪ 0983‬دس کخاةی ةا غضظاش ‪The Visual Display of Quantitative‬‬
‫‪ Information‬اةذاع کشد!‬
‫‪www‬‬ ‫‪236‬‬
‫ةهخش اسد حػشیف ‪ chart Junk‬سا دس طیکی پذیا نشطس کضیو ‪:‬‬
‫حهانی غضاعش ةغشی دس یک صهظداس یا گشاف که دس دسک افالغاج اسایه صذى دس آش صهظداس یا گشاف حاریشی صذاصخه ط ةی‬
‫نظسد هسخضذ ط ةاغس گیج صذش نخافث نی صظصذ سا ‪ chart Junk‬نی گظیضذ‪.‬‬
‫دس نزال اسایه صذى دس صیش اص اپلیکیضط ‪ Brain Challenge‬فشاحی اسایه صذى ‪،‬حغاطیش سه ةػذی ‪،‬سصگ های ةکاس سفخه ط‪...‬‬
‫ههه ط ههه ةاغس گیج صذش کاسةش صذى ط دادى ها ‪،‬که نههخشیط غضاعش ایط عفحه هسخضذ اعال ةه چضو صهی آیضذ‪.‬نزال‬
‫دیگش اپلیکیضط ‪ SmartGlance‬اسد که دس پس صنیضه خظد اص یک حاس سصگی اسخفادى کشدى اسد‪.‬‬
‫‪Brain Challenge and SmartGlance‬‬
‫ناژطل گضاسصاج دساپلیکیضط ‪ QlikView‬صانل حػذادی ؽذالگظ نی ةاصذ‪ :‬ؽذ الگظی غذم اصقتاق ‪ Metaphor‬ةشای آیکظش‬
‫فیلخش ‪،‬سطش جذیذی ةشای اصخخاب گضاسش‪ ،‬ط ؽذ الگظی ‪. chart Junk‬صیهی اص عفحه ةشصانه ةه کضخشل چشخضی اصخخاب‬
‫صهظداس حخغیػ دادى صذى اسد‪.‬التاكی عفحه ةه صهظداس های سه ةػذی ةا صظصخه های صا خظاصا حخغیػ دادى صذى اسد‪.‬‬
‫‪www‬‬ ‫‪237‬‬
‫‪QlikView‬‬
‫ایضکه فلك صهظداس های صها صیتا ةاصضذ ‪،‬ةه ایط نػضی صیسد که آصها حاطی افالغاج اسصصهضذ هسخضذ‪ Chart Junk.‬ها ةه‬
‫ظاهش ةسیاس جزاب ط چضو صظاص هسخضذ طلی اص صظش حجشةه کاسةشی ط کیفید افالغاحی که دس اخخیاس کاسةش كشاس نی دهضذ‬
‫نضاسث صهی ةاصضذ‪.‬ةشای نزال دس اپلیکیضط ‪ analytics‬آیا نضحضی اسایه صذى ةیاصگش نیاصگیط یا نلذاس آسخاصه اسد ؟ صخیش !‬
‫ایط نضحضی فلك كسهخی اص پس صنیضه نی ةاصذ‪.‬صیظى اسایه صهظداس سا دس ایط اپلیکیضط ةا اپلیکیضط ‪Gerald Nunn’s‬‬
‫‪ OnTrack‬نلایسه کضیذ !ایط اپلیکیضط ةه سادگی ط ةا اسخفادى اص سصگ ‪،‬نظاسدی سا که ةیضخش یا کهخش اص حذ نػهظل هسخضذ‬
‫سا نخهایض کشدى اسد‪.‬‬
‫‪www‬‬ ‫‪238‬‬
‫)‪Misleading chart background (left) and meaningful chart background (right‬‬
‫اپلیکیضط ‪ weatherPro‬داسای صهظداس های پش صسق ط ةشكی اسد‪،‬اگش نظاسد صیش دس ایط اپلیکیضط حزف نی صذ خظاصایی آش‬
‫ةاالحش نی سفد‪:‬‬
‫‪ ‬گشادیاصد های نخفاطج دس هش سخظش‬
‫‪ ‬صظصخه های صایذ دس نحظس ‪Y‬‬
‫‪ ‬افضایط ساغد‬
‫کظحاى کشدش صام سطصها (‪ )Mon, Tue, Wed,‬نی حظاصذ ةاغس افضایط فؾا ط اسخفادى اص یک فظصد خظاصا حش صظد‪.‬‬
‫‪www‬‬ ‫‪239‬‬
‫‪WeatherPro‬‬
‫سػی کضیذ حضها صناصی اص غضاعش ةغشی اؽافی دس صهظداس ها اسخفادى کضیذ که ةه آصها صیاص داصخه ةاصیذ‪.‬‬
‫‪ - Oceans of Buttons‬اكیاصظسی اص دکهه ها‬

‫نط ط ‪ Bill Scott‬صناصی ةشای اطلیط ةاس ایط ؽذالگظ سا اةذاع کشدیو که دس حال ةشسسی صشم افضاس ‪Sabr Airline Solution‬‬
‫دس سال ‪ 2::2‬ةظدیو‪.‬نا یک حیو حضکیل دادى ةظدیو حا حهانی صیاصنضذی های طاسك کاسةش طب ط ةشصانه ‪ Desktop‬سا ةا هذف‬
‫اصخخاب نهو حشیط نظاسدی که صیاص ةه فشاحی نجذد داصخضذ ‪ ،‬سا کضف کضضذ‪.‬ةسیاسی اص صشم افضاس های نظسد ةشسسی ةا‬
‫اسخفادى اص ‪ java‬ط ‪ Visual Basic‬صظصخه صذى ةظدصذ که داسای یک صظاس دکهه ةظدصذ که اص ةاال حا پاییط دس كسهد ساسد صشم‬
‫افضاس كشاس گشفخه ةظدصذ‪.‬دس ةشخی نظاكؼ ایط دکهه ها آصلذس صیاد ةظدصذ که صیاص ةظد دس دط سدیف صهایط دادى صظصذ‪.‬ههه‬
‫دکهه ها داسای سصگ یکساش ‪،‬اصذاصى یکساش ةظدصذ‪.‬ةضاةشایط خیلی سخد ةظد که ةذطش خظاصذش صظصخه سطی آصها ‪،‬اص آصها‬
‫اسخفادى کشد‪.‬‬
‫‪www‬‬ ‫‪240‬‬
www.DrStartup.ir
Oceans of buttons in Visual Basic and Java desktop applications
‫ایط دسحالی اسد‬.‫ اص ایط ؽذ الگظ ( نضظظس ؽذ الگظی اكیاصظس دکهه هاسد) سصج نی ةشد‬eBay ‫اپلیکیضط صسخه اصذسطیذ‬
‫ اسخفادى کشدى اسد که ساهکاس خظةی ةشای سفؼ نػؾل اكیاصظس دکهه‬dashboard ‫ آصها اص الگظی‬iPhone ‫که صسخه‬
.‫هاسد‬
eBay Android, oceans of buttons; eBay iOS, no ocean
www 241
‫اپلیکیضط ‪ Footfeed‬که حغظیش آش دس صیش اسایه صذى اسد ‪،‬دس هش عفحه ‪،‬ةشای هش آیخو دکهه های فشاطاصی سا اسایه دادى‬
‫اسد‪.‬اپلیکیضط ‪ 1Mobile‬صیض اص یک دکهه یکساش ةشای کلیه آیخو ها اسخفادى نی کضذ‪.‬اسخفادى اص الگظی ‪ Contextual‬دس‬
‫ایط صنیضه نی حظاصذ کاسةشد داصخه ةاصذ‪.‬‬
‫ةشای کسث افالغاج ةیضخش ةه فغل ‪ 5‬نشاجػه کضیذ‪.‬‬
‫‪Footfeed and 1Mobile Market: Replace repeating buttons with contextual tools‬‬
‫دس صگاى اطل ‪،‬ةه صظش نی سسذ که اپلیکیضط ‪ Pushi‬اص یک ‪ Action Bar‬اسخاصذاسد اسخفادى کشدى اسد طلی دس طاكؼ ‪ ،‬ایط یک‬
‫اكیاصظس اص دکهه هاسد‪ .‬دکهه های پیهایط ةا دکهه های غهلیاحی آنیخخه صذى اسد‪( .‬خاصه ‪،‬ةاصگضد ‪،‬صهظداس‪،‬حضظیهاج‬
‫‪،‬ةه اصخشاک گزاسی ط‪)...‬‬
‫اپلیکیضط‪ VisualKPI‬داسای نضکل نضاةهی اسد‪.‬طلی ایط دکهه ها دس ةاالی صهظداس اسایه صذى اصذ‪.‬‬
‫‪www‬‬ ‫‪242‬‬
‫‪Pushbi and VisualKPI‬‬
‫اص الگظ های اسخاصذاسد ةشای صهایط غهلیاج های نظسد صیاص دس هش عفحه اسخفادى صهاییذ‪.‬ةا اسخفادى اص‬
‫الگظی ‪، Contextual‬ةشای هش آیخو عفحه گضیضه های نشحتك ةا آش سا اسایه دهیذ ‪.‬غهلیاج نشةظـ ةا هش‬
‫عفحه سا عشاحخا اص غهلیاج پیهایط هش عفحه جذا کضیذ‪.‬‬
‫‪www‬‬ ‫‪243‬‬

Olgoo Haye Tarahi Vaset Kar Bar PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Olgoo Haye Tarahi Vaset Kar Bar PDF

Uploaded by

Copyright:

Available Formats

www.DrStartup.

‫الگظهای فشاحی طاسك کاسةش‬

‫ةا نلذنه ‪:‬جضیفش حذطل‬

‫حالیف ط حشجهه ‪ :‬نهذی غلیپظس سخاطی‬

‫الگظهای فشاحی طاسك های کاسةش طیژى اةضاسهای نظةایل‬

‫الگظ های فشاحی دس دسخه های صیش اسایه نی صظصذ ‪:‬‬

‫صظشاج دیگشاش دسةاسى کخاب‬

‫ةیل اسکاج ‪ ،‬نذیش اسصذ فشاحی طب دس ‪Pay Pal‬‬

‫اسیط نالظش ‪ ،‬یکی اص ههکاساش ‪Tangible UX‬‬

‫آگاحا جظش ‪،‬فشاح طاسك کاسةش‬

‫نلذنه نخشجو ط نظلف ‪1 ............................................................................................................................‬‬

‫نلذنه جضیفش حذطل ‪3 ...............................................................................................................................‬‬

‫فغل اطل‪:‬پیهایط)‪6 .................................................................................................................. (Navigation‬‬

‫الگظهای اعلی صاطةشی (پیهایط) ‪7 ...............................................................................................................‬‬

‫‪- Springboard‬حخخه ی صیش جه ‪8 ..........................................................................................................‬‬

‫‪ -List menu‬نضظی لیسخی ‪15...............................................................................................................‬‬

‫‪ -Tabs‬صةاصه ها ‪19 ............................................................................................................................‬‬

‫‪- Gallery‬گالشی‪42 ..........................................................................................................................‬‬

‫‪47 ............................................................................................................................. Dashboard‬‬

‫‪ - Metaphor‬اسخػاسى ‪48 ...................................................................................................................‬‬

‫‪ -Mega Menu‬نضظی نیلیظصی ‪34 ...........................................................................................................‬‬

‫پیهایط راصظیه‪32 .................................................................................................. Secondary Navigation -‬‬

‫‪ -Page Carousel‬عفحاج چشخضی ‪36 .....................................................................................................‬‬

‫‪ - Image Carousel‬حغظیش چشخضی ‪2: ......................................................................................................‬‬

‫‪ - Expanding list‬لیسد های حظسػه ای ط ةاصصظصذى ‪23 ...................................................................................‬‬

‫فغل دطم ‪ :‬فشم ها)‪25 .....................................................................................................................(Forms‬‬

‫‪ - Sign In‬طسطد ‪28 ..........................................................................................................................‬‬

‫‪ - Registration‬رتد صام ‪51.................................................................................................................‬‬

‫‪ - Checkout‬صهایی کشدش خشیذ ‪55 ..........................................................................................................‬‬

‫‪ -Calculate‬نحاسته ‪57 .....................................................................................................................‬‬

‫‪- Search Forms‬فشنهای جسخجظ ‪61 ........................................................................................................‬‬

‫‪62 ............................................................................................................................. Multi-Step‬‬

‫‪ - Long Forms‬فشنهای فظالصی ‪68 .........................................................................................................‬‬

‫فغل سظم‪ :‬جذاطل ط لیسد ها ‪71 ...................................................................................................................‬‬

‫‪75 .............................................................................................................................Basic Table‬‬

75 .............................................................................................Header ‫ جذطل ةذطش‬- Headerless Table

76 ........................................................................................................ ‫ سخظش های راةد‬- Fix Column

77 ............................................................................................ ‫صهایه ط خالعه دادى‬-Overview plus Data

8:.......................................................................................... ‫ – سقش های دسخه ةضذی صذى‬Grouped Rows

81 .................................................................................................. ‫ لیسد های آةضاسی‬- Cascading Lists

83 .......................................................................... ‫ جذطل ةا الهاش های ةغشی‬- Table with visual indicators

82 .................................................................................................. ‫ جذطل كاةل طیشایط‬- Editable Table

86 ..................................................................................................... ‫نشحث ساصی ط فیلخش‬، ‫ جسخجظ‬: ‫فغل چهاسم‬

87 ........................................................................................................................... ‫ جسخجظ‬- Search

88 .................................................................................................... ‫ جسخجظی عشیح‬- Explicit Search

9: ........................................................... ‫ جسخجظ ةا اسخفادى اص کانل کضضذى خظدکاس‬-Search with Auto Complete

92...................................................................................................... ‫ جسخجظی پظیا‬- Dynamic Search

92........................................................................................ ‫ جسخجظی نحذطدى ةضذی صذى‬- Scoped Search

98 ........................................................................................................... ‫ فشم جسخجظ‬- Search Form

1:4 ........................................................................................................................ ‫الگظهای نشحث ساصی‬

1:3........................................................................................................................ On Screen Sort

1:2 ................................................................................................................... Sort Order Selector

1:7......................................................................................................... ‫ فشم نشحث ساصی‬- Sort Form

1:8............................................................................................................................... ‫ فیلخش‬- Filter

1:9 ...................................................................................................................... On Screen Filter

114 .......................................................................................................................... Filter Drawer

113 ........................................................................................................................... Filter Dialog

112 ........................................................................................................... ‫ فشم فیلخشیضگ‬- Filter Form

14: .................................................................................................................. (TOOLS) ‫ اةضاسها‬: ‫فغل پضجو‬

145 .................................................................................................................... ‫ صظاس اةضاس‬- Toolbar

134 .............................................................................................................. Call To Action Button

135 ..................................................................................................................... Contextual tools

139 ........................................................................................................................ Inline Actions