داده های داغ و الگوهای طراحی محتوا برای موبایل:

طراحی مناسب محتوا و اطلاعات نه تنها برای نشریات سنتی یا سایت های محتوای تولید شده توسط کاربر مهم است ، چه این که تجربه عملیاتی باشد یا سیستم های اساسی (مانند: سیستم های مدیریت محتوا) که آنها را عملیاتی نگه می دارد.

از آنجایی که کاربران قادر به تعامل و ویرایش قسمتهای بیشتری از برنامه های خود هستند ، هر بخش اطلاعات (به عنوان مثال داده های مکان ، زمان سنجی ، اطلاعات نمایه ، ارتباطات متقابل و غیره) و محتوا (تصاویر نمایه ، محتوای تولید شده توسط کاربر ، لیست های تجاری و غیره) .) باید با توجه به آن طراحی شود. فراتر از چالش های فنی ، اجازه دادن به چندین کاربر (مصرف کنندگان و / یا مشاغل) - به ویژه کاربران غیرفنی - ویرایش و تعامل با انواع بیشتری از محتوا و اطلاعات ، نیاز به تأمل قابل توجهی در مورد پیاده سازی الگوهای موجود و ایجاد الگوهای جدید دارد.

8 بهترین روش طراحی داده و محتوا:
در هنگام طراحی برای مدیریت محتوا و داده ها ، جزئیات زیادی باید در خاطر داشته باشید و اهمیت هر جزئیات با توجه به کاربرد آنها متفاوت است. در اینجا چند بهترین روش وجود دارد که در طول سالها مفید به نظرم رسیده اند:

آن را ثابت نگه دارید
بلوک های اطلاعات و طول و طول را در نظر بگیرید
طراحی ناوبری را با در نظر گرفتن اطلاعات و محتوا انجام دهید
با اطلاعات و مطالب واقعی تست کنید
فقط موارد مرتبط را نشان دهید
محتوا را پویا کنید
اجازه دهید کاربر مرتب بماند
محتوا و اطلاعات خود را در صورت امکان لایه بندی کنید
مروری بر الگوها

با در نظر گرفتن اهداف طراحی بالا ، در اینجا یک مرور کلی از الگوهای طراحی است که ما در این مقاله به تفصیل شرح داده ایم و حتی در کتاب الکترونیکی ما ، الگوهای طراحی رابط کاربری موبایل 2014 ، با طول بیشتری توضیح داده ایم:

حالت های تمام صفحه
لایه های محتوای تعاملی
مناطق درحال گسترش
حلقه ها
شفافیت
نقشه ها به عنوان پس زمینه
دوستان و مطالب گروهی
تصاویر کامل خونریزی
شبکه ها
کارتها
اطلاعات پنهان
ایالات خالی
دستکاری مستقیم محتوا و داده ها
اشیاg قابل کشیدن
برای تازه کردن بکشید
1. حالت های تمام صفحه:

مسئله
کاربر می خواهد به جای حواس پرتی با رابط کاربر ، روی محتوا تمرکز کند

راه حل
یک حالت تمام صفحه را طراحی کنید که شلوغی رابط کاربر در اطراف محتوا را پنهان یا به حداقل برساند. این به کاربران کمک می کند تا تمرکز خود را بر روی آنچه مهم است متمرکز کنند ، نه اینکه توسط شلوغی رابط کاربر منحرف شود. این الگو علاوه بر اینکه برای پخش کننده های ویدیویی ضروری است ، به ویژه برای برنامه های چندرسانه ای مانند Medium ، Houzz و Kindle به خوبی کار می کند ، که به کاربران امکان می دهد با ضربه زدن روی محتوای اصلی "فریم" رابط کاربر را به حداقل برسانند. با این کار دکمه های ناوبری و سایر دکمه های روی صفحه به حداقل می رسند و در صورت نیاز کاربران به محتوایی ، تجربه ای جذاب تر را تجربه می کنید. Snapchat این را در دوربین خود نیز پیاده سازی می کند ، و از شر "کروم" رابط کاربر خلاص می شود و به یک ناوبری مینیمالیستی کمک می کند ، 1 یا 2 دکمه مهم دیگر را به شما نشان می دهد و این دکمه های اصلی را بسته به نوع دید شما تغییر می دهد. بین نماها قرار بگیرید ، می توانید روی یکی از این دکمه های اصلی کلیک کنید یا انگشت خود را به چپ یا راست بکشید.

2. لایه های محتوای تعاملی:

مسئله
کاربران می خواهند بدانند که با کدام یک از موارد موجود در نمای محتوا می توانند با جزئیات بیشتر ارتباط برقرار کنند.

راه حل
موارد تعاملی را برای ارائه رویکرد "واقعیت افزوده" به محتوای خود لایه بندی کنید. برنامه هایی مانند Houzz با قرار دادن یک نماد برچسب قیمت روی موارد جداگانه در تصاویر فروخته شده ، و ضربه زدن روی آنها این کار را به خوبی انجام می دهند. این نه تنها یک روش عالی برای برجسته سازی محتوای درون تصویر است که کاربر می تواند با آن ارتباط برقرار کند ، بلکه با چرخش برچسب ها بر اساس حرکت و جهت گیری دستگاه ، عنصری از بازی را نیز اضافه می کند.

3. مناطق درحال گسترش:

مسئله
کاربر می خواهد بدون بهم ریختن رابط کاربری اصلی ، به جزئیات ثانویه مربوطه دسترسی پیدا کند.

راه حل
فراداده را نامرئی کنید مگر اینکه کاربر به صراحت بخواهد آن را ببیند. به عنوان مثال مسنجر فیس بوک مهر زمانهای زمانی و داده های مکان را پنهان می کند و فقط در صورت ضربه زدن کاربر روی پیام خاص ، آن را قابل مشاهده می کند. برنامه های دیگر

4. حلقه ها:

مسئله
کاربر می خواهد به سرعت بین دکمه ها و رسانه تفاوت قائل شود.

راه حل
در حالی که تصویر کوچک عکس سنتی هم در وب و هم در تلفن همراه همیشه مستطیل شکل بوده است ، ما شاهد بسیاری از برنامه ها هستیم که این قالب را می شکند و به جای آن حلقه ها را انتخاب می کنند. هر دو به دلیل اینکه هدف ضربه بهینه برای صفحه لمسی است اما با فضای سفید اضافی بین محتوای مجاور ، UI را کمی تمیز می کند. برخی از برنامه ها مانند LinkedIn از اشکال مختلفی برای تشخیص بصری بین دکمه های عملکرد و سایر رسانه ها استفاده می کنند. برخی از برنامه ها مانند Tinder و Swarm به طور انحصاری از حلقه ها استفاده می کنند. فیس بوک مسنجر و اینستاگرام کلیه تصاویر کوچک کاربر را در محافل نشان می دهد. این الگوی طراحی UI با محبوبیت بیشتر توسط Google+ و بهبود Path از برخی جنبه ها ، محبوبیت بیشتری پیدا می کند ، اگرچه مزیت آن به دلیل استفاده از تصویر کوچک مربع شکل ، به جز افزودن تنوع ، "ادویه زندگی" بدون شک مشخص نیست.

5. شفافیت:

مسئله
کاربر می خواهد بداند که آیا محتوایی در پشت هم پوشانی وجود دارد یا خیر.

راه حل
برای نشان دادن وجود محتوای لایه لایه در زیر ، از شیب ها و پوشش های محو استفاده کنید. Yelp اجازه می دهد هنگام کشیدن به سمت پایین بین جزئیات لیست و گالری عکس بروید تا عکس پنهان شده در پشت سرصفحه لیست نیمه شفاف را بیشتر نشان دهید. استفاده از نیمه شفافیت و محتوای پاسخگو تجربه فوق العاده ای را در اینجا ایجاد می کند. Rdio و Gogobot برای دستیابی به همان اثرات از شفافیت و تاری استفاده می کنند ، نه تنها زمینه را در مورد کاربر در اختیار کاربر قرار می دهند بلکه منوهای تعامل را نیز جذاب نشان می دهند.

6. نقشه ها به عنوان پس زمینه:

مسئله
کاربران می خواهند محتوا را بر روی نقشه قرار دهند تا ببینند در اطراف آنها چه می گذرد.

راه حل
Lyft و Yelp نقشه هایی را به عنوان پس زمینه تهیه می کنند که با توجه به ماهیت محلی آنها منطقی است. با برجسته شدن برنامه های محلی و قرار گرفتن اطلاعات بیشتر بر روی نمای نقشه ، این روند رو به افزایش خواهد بود و باعث می شود نقشه ها نه تنها برای راهنمایی های یک باره در وب یا تلفن همراه ، به یک تجربه کامل تبدیل شوند. همچنین الگوهای طراحی UI بسیار بیشتری مشاهده خواهید کرد که از فیلم ها ، تصاویر و سایر رسانه ها به عنوان پس زمینه شکوفا می شوند.

7. دوستان و محتوای گروهی:

مسئله
کاربر می خواهد محتوا را بر اساس گروه بندی خود سازماندهی کند

راه حل
به کاربران اجازه دهید دوستان و دنبال کنندگان خود را در داخل برنامه مرتب و مرتب کنند. یوتیوب و فیس بوک مسنجر به شما امکان می دهند دوستان و مشاوران خود را در یک گروه قرار دهید. با ادامه تکثیر محتوای همه اشکال - از جمله پروفایل های دوستانه ، توانایی کاربران برای نظافت و سازماندهی موارد به گونه ای که برای آنها مهم باشد اهمیت بیشتری پیدا می کند.

8. تصاویر کامل خونریزی:

مسئله
کاربر می خواهد با حداقل حواس پرتی ، روی محتوا تمرکز کند.

راه حل
کرک را از UI حذف کنید ، فقط موارد ضروری را ترک کنید. برنامه هایی مانند Secret هیچ فضای خالی را مسلم نمی دانند و تصاویر پر خون را روی هم و کنار هم قرار می دهند در حالی که برخی از اطلاعات مهم را در بالای خود قرار می دهند تا بهترین استفاده را از فضا داشته باشند. این تصاویر به عنوان پس زمینه با اطلاعات مربوط به آنها در یک همپوشانی عمل می کنند. این الگوی طراحی UI کاربر را با فضای سفید کمتر و جزئیات منحرف کننده طراحی نسبت به Pinterest بسیار سرگرم می کند.

9. شبکه ها:

مسئله
کاربر می خواهد محتوا مرتب شود.

راه حل
تکه های محتوا را در یک شبکه نمایش دهید. برنامه هایی مانند OKCupid و Spotify تمام محتوای خود را در یک شبکه ارائه می دهند ، در حالی که ساختار را حفظ می کنند به طور موثر هر مورد را از مورد دیگر جدا می کنند. شبکه ها یک جایگزین عالی برای نمایش لیست ساده هستند و برای محتوایی که می تواند بصری نمایش داده شود بسیار خوب عمل می کند و باعث می شود کاربران بتوانند از طریق بسیاری از مطالب پیمایش کنند.

10. کارتها:

مسئله
کاربر می خواهد سریع محتوا را مرور کند و با آن ارتباط برقرار کند ، بدون اینکه جزئیات بازدید کننده باعث به هم ریختن رابط کاربری شود.

راه حل
تکه هایی از اطلاعات را در کارتهای اندازه لقمه ارائه دهید که می توان با دستکاری آنها اطلاعات بیشتری را در صورت تمایل کاربر نشان داد. با استفاده از Pinterest برای نشان دادن تصاویر کوچک تصویر بزرگ در یک طرح جمع و جور رایج ، ما شاهد نمایش "کارت" هستیم که اکنون در برنامه های مختلف فراتر از گالری های فیلم و عکس در وب اجرا می شود. این الگو برای "ماژول" های داده ای که می توانند به صورت جداگانه مشاهده یا دستکاری شوند ، مانند پست در Tumblr یا Facebook بهترین عملکرد را دارد. کارت ها روشی است که به کاربران امکان می دهد انواع مطالب را به طرز جذاب تری مرور کرده و همزمان با روندهای پاسخگو طراحی و همچنین الگوهای خوراک اجتماعی مطابقت دهند.

11. اطلاعات پنهان:

مسئله
کاربر می خواهد به اطلاعات ثانویه دسترسی سریع داشته باشد که معمولاً نمایش آن ضروری نیست.

راه حل
اطلاعات متنی را که در پشت رابط کاربر ضروری نیست پنهان کنید اما آنها را برای کاربران قدرت قابل دسترسی می کند. Snapchat با کلیک بر روی سرصفحه Snapchat به شما اجازه می دهیم اطلاعات پنهان - تعداد پیام های دریافتی و خوانده نشده - را مشاهده کنید. Tinder به شما اجازه می دهد با کشیدن متن ها به سمت چپ ، که همچنین نحوه کار برنامه پیام های بومی Apple است ، زمان سنجی را مشاهده کنید.

12. حالت های خالی:

مسئله
کاربر باید بداند که چرا بخشی از برنامه خالی است و چه کاری باید انجام دهد.

راه حل
اطمینان حاصل کنید که رابط کاربری شما با طراحی "حالت خالی" ، اولین شرایط خوبی را ایجاد می کند ، این شرایط در صورت عدم وجود داده های کاربر است. این حالت طبیعی رابط کاربری شما است و اولین چیزی است که کاربر می بیند. همچنین این نقطه ای است که بسیاری از کاربران تصمیم می گیرند که ارزش ادامه کار را داشته باشد ، بنابراین طراحی حالت خالی بسیار مهم است. این مکان عالی برای نشان دادن برخی از مثالها است که به کاربران کمک می کند تا شروع به کار کنند یا به راحتی دستورالعمل های مربوط به نحوه کار را به آنها نشان دهند.

13. دستکاری مستقیم محتوا و داده ها:

مسئله
کاربر می خواهد با محتوای یا داده های وارد شده به روشی مستقیم و شهودی ارتباط برقرار کند.

راه حل
اجازه دهید محتوا مستقیماً ویرایش شود بدون اینکه نیازی به تغییر بین حالتهای ویرایش یا حذف باشد. اجازه دادن به کاربران برای کار مستقیم با داده ها روی صفحه می تواند با حذف لایه تعاملی اضافی ارائه شده توسط یک دکمه یا منوی زمینه ، رابط کاربری شما را جذاب تر کند. به عنوان مثال کاربران Wunderlist به جای انتخاب مورد و سپس جابجایی بین حالت های CRUD (ایجاد ، خواندن ، به روزرسانی ، حذف) ، می توانند مستقیماً روی نام کارها ضربه بزنند تا آنها را ویرایش یا حذف کنند. برنامه های ویرایش عکس مانند اینستاگرام و فتوشاپ اکسپرس نیز از این الگو پیروی می کنند و به کاربران امکان می دهند به جای انتخاب از لیست و امید به بهترین نتیجه ، نتایج فیلتر را بر روی عکس انتخاب شده مستقیماً مشاهده کنند. در بیشتر برنامه های نقشه ، هیچ دکمه ای برای بزرگنمایی یا چرخاندن وجود ندارد ، شما فقط این کار را انجام می دهید!

14. اشیا قابل کشیدن:

مسئله
کاربر می خواهد موارد را به گونه ای مرتب و مرتب کند که در نمای کنونی برای آنها منطقی باشد بدون اینکه بین مشخصات اصلی و دقیق مطالب چسبیده باشد.

راه حل
می توان محتوا را برداشت و دوباره مرتب کرد ، یا برای انجام عملی به سادگی آن را در سراسر کشور کشید. یک مثال عالی برای این الگو این است که وقتی وسایل را روی صفحه اصلی مرتب می کنید ، اما ما شاهد اجرای این مورد در بسیاری از برنامه ها نیز هستیم.

به عنوان مثال آسانا به شما اجازه می دهیم با فشار دادن و نگه داشتن و سپس کشیدن و رها کردن آنها کارها را به هر کجا که می خواهید حرکت دهید. ممکن است بخواهید یک مورد را به دسته ها یا روزهای مختلف منتقل کنید ، و این توانایی کشیدن و رها کردن آن را در یک intuiti قرار می دهد. به همین ترتیب ، موسیقی Google Play به شما امکان می دهد آهنگ ها را در لیست پخش بکشید و رها کنید تا ترتیب پخش آنها را از نو تنظیم کنید. از آنجا که این یک اقدام بسیار تعاملی است ، باید مطمئن شوید که رابط کاربر بازخورد دیداری را به صورت انیمیشن یا تغییر رنگ ارائه می دهد تا به وضوح نشان دهد که چیزی اتفاق می افتد. به عنوان مثال ، مواردی که در آسانا کشیده می شوند با سایه برجسته می شوند و آی هایی که در صفحه اصلی آیفون مرتب می شوند ، رقص معروف بدنامی را انجام می دهند. نشانه بصری دیگر برجسته کردن هدف رها کردن است ، یعنی مکانی که در آن کاربر اجازه می دهد تا مورد سقوط کند.

15. برای تازه کردن بکشید:

مسئله
کاربر می خواهد بتواند به صورت دستی مطالب را تازه کند.

راه حل
به جای تکیه بر فقط یک دکمه تازه کردن ، اجازه دهید تا پنجره محتوای اصلی برای تازه کردن به پایین کشیده شود. این یک الگوی بسیار تعاملی دیگر است و میزان و نوع بازخورد تصویری رابط کاربر ارائه می دهد در حین و بعد از عمل مهم است که به کاربران اطلاع دهید که چیزی اتفاق می افتد. به عنوان مثال ، کشش برای تازه کردن اجرای در Gmail با یک نشانگر فعالیت رنگی افقی همراه است ، در حالی که اجرای توییتر یک انیمیشن بارگذاری دایره ای را نشان می دهد. Snapchat یک انیمیشن رقصنده را نشان می دهد. این الگو برای لیست هایی با محتوایی که نیاز به به روزرسانی دارند ، به عنوان مثال جدول زمانی یا خبرمایه فعالیت ، بسیار مناسب است. این یک حرکت بصری است که باید همراه با یک دکمه استاندارد برای تازه سازی دستی حرکت کنید ، اما به طور کلی جایگزین رابط های تازه کننده خودکار نمی شود.

کاربر خود را سازمان یافته نگه دارید
کاربر می خواهد بتواند به صورت دستی مطالب را تازه کند.

راه حل:
به جای تکیه بر فقط یک دکمه تازه کردن ، اجازه دهید تا پنجره محتوای اصلی برای تازه کردن به پایین کشیده شود. این یک الگوی بسیار تعاملی دیگر است و میزان و نوع بازخورد تصویری رابط کاربر ارائه می دهد در حین و بعد از عمل مهم است که به کاربران اطلاع دهید که چیزی اتفاق می افتد. به عنوان مثال ، کشش برای تازه کردن اجرای در Gmail با یک نشانگر فعالیت رنگی افقی همراه است ، در حالی که اجرای توییتر یک انیمیشن بارگذاری دایره ای را نشان می دهد. Snapchat یک انیمیشن رقصنده را نشان می دهد. این الگو برای لیست هایی با محتوایی که نیاز به به روزرسانی دارند ، به عنوان مثال جدول زمانی یا خبرمایه فعالیت ، بسیار مناسب است. این یک حرکت بصری است که باید همراه با یک دکمه استاندارد برای تازه سازی دستی حرکت کنید ، اما به طور کلی جایگزین رابط های تازه کننده خودکار نمی شود.

کاربر خود را مرتب نگه دارید:

از جایی که قرار است کاربران شما با داده ها و محتوا تعامل داشته باشند پیگیری کنید ، آیا آنها هرگز آن بخش های برنامه را مشاهده می کنند ، چند بار با آنها ارتباط برقرار می کنند ، از کجا وارد برنامه می شوند (یعنی جریان کاربر ) و غیره مرتب سازی مجدد ، تعیین توالی مجدد ، اندازه گیری مجدد و تغییر تنظیمات کنترل ها را ادامه دهید تا اقدامات بیشتری انجام دهید. و البته ، در مورد نحوه استفاده کاربر از برنامه تلفن همراه شما هنگام مشاهده و تعامل با داده ها و محتوا عمیقاً فکر کنید - اطمینان حاصل کنید که هنگام طراحی برنامه خود چیز واضحی را از دست نداده اید.

چگونه می توان سایت خود را با «طراحی سازگار با موبایل»آسانتر کرد:

نکات طراحی برای صفحه های پرداخت موبایل:

داده های داغ و الگوهای طراحی محتوا برای موبایل: