تشکیل یک گروه در VKontakte. URL گروه VKontakte

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

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

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

نحوه آپلود جلد
برای دانلود جلد، باید به مدیریت انجمن >> بلوک اطلاعات پایه >> جلد جامعه >> آپلود بروید. اندازه جلد توصیه شده 1590x400 پیکسل است. هیچ دکمه‌ای در هدر وجود ندارد که بتوان روی آن کلیک کرد - در اصل این یک تصویر است و تمام. امروزه پوشش روی دستگاه‌های تلفن همراه قابل مشاهده است و به نظر می‌رسد از قبل در برنامه‌ها و کلاینت‌ها قابل مشاهده است.

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

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

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

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

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

4.1 بنر اطلاعاتی
نوع متداول بنر حاوی اطلاعات کلی در مورد یک شرکت، گروه، خدمات یا رویداد با فهرستی دقیق از مزایا و سایر مواد همراه. اغلب به عنوان یک پست سنجاق شده در یک گروه استفاده می شود. اندازه این بنر 510x307 پیکسل می باشد. در این اندازه، پایین بنر با آواتار منطبق است. اگر ارتباطی با آواتار وجود ندارد، می توانید از هر اندازه ای استفاده کنید. به عنوان مثال، من از اندازه 600x350 پیکسل استفاده می کنم. فرمت مربع 510x510 پیکسل نیز راحت است و اکنون محبوبیت پیدا می کند - با این اندازه، بنر بزرگترین منطقه ممکن را در فید اخبار اشغال می کند.

4.2 بنر برای ورود به منوی داخلی
اگر کتیبه جذاب "منو باز" را به بنر پاراگراف قبلی اضافه کنیم، بنری دریافت می کنیم که وظیفه اصلی آن این است که به عنوان نقطه ورود به منوی داخلی باشد. گاهی اوقات آنها یک فریب به شکل چند دکمه روی یک بنر ایجاد می کنند، اما این یک توهم است؛ وقتی روی آن کلیک می شود، کاربر همچنان به صفحه داخلی می رسد و در آنجا هر دکمه پیوند خاص خود را دارد. اندازه این بنر 510x307 پیکسل می باشد. با این اندازه، پایین بنر با آواتار منطبق است. اگر ورودی منو به آواتار گره خورده باشد، می توانید بنر را در هر اندازه ای، حتی یک دکمه باریک با کتیبه "منو باز" بسازید. نکته اصلی این است که عرض بنر حداقل 510 پیکسل باشد.

4.3 کارت برای ارسال مجدد، تبلیغات
اخیراً، کارت‌هایی برای ارسال مجدد یا تبلیغات به ویژه مرتبط شده‌اند. وظیفه آن فراخوانی برای اقدام خاص است. اساساً "به گروه بپیوندید، بازنشر کنید یا لایک کنید و جایزه بگیرید." چنین بنرهایی به عنوان بخشی از کمپین های تبلیغاتی یا تبلیغاتی هم در گروه های خود و هم برای تبلیغ در گروه های دیگر استفاده می شوند. من معمولا از 600x350 پیکسل استفاده می کنم.

4.4 بنر با انیمیشن گیف
پس از اینکه توسعه دهندگان VK در ابتدای سال اندازه های بزرگ تری برای تصاویر گیف ساختند، گیف ها بلافاصله با بنرهای اطلاعاتی برابری کردند. به عنوان مثال، در یک بنر GIF می توانید تصاویری از چندین محصول یا متن در حال تغییر را نشان دهید - حرکت بلافاصله توجه را به خود جلب می کند. و زمانی که تابع در ژوئن اضافه شد انیمیشن های گیف autorunدر فید اخبار، گیف ها مورد توجه تبلیغ کنندگان و بازاریابان قرار گرفته اند.

5. آواتار + طراحی بنر ثابت
تا همین اواخر، این طرح ماژولار، متشکل از یک آواتار و یک بنر پین شده، محبوب ترین روش برای طراحی گروه ها بود. جزئیات بیشتر در مورد نحوه انجام این طراحی در درس توضیح داده شده است. با آمدن هدر (کاور) ممکن است کمی از محبوبیت این طرح کاسته شود.

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

6. منوی ناوبری داخلی
منو به شکل پیوندهای فعال در صفحه داخلی VKontakte قرار دارد و با استفاده از دستورات نشانه گذاری ویکی نوشته شده است. نحوه ایجاد خود صفحه داخلی در درس توضیح داده شده است. با استفاده از منو، کاربر در گروه حرکت می کند. در زیر انواع منوهای داخلی را مشاهده خواهید کرد، اما در حال حاضر به چند نکته مهم می پردازیم.

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

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

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

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

من سخنان خود توسعه دهندگان VKontakte را نقل می کنم. "یک توصیه ساده از تلاش و اعصاب شما صرفه جویی می کند: فقط در یک حالت کار کنید. یا حالت بصری است یا حالت نشانه گذاری ویکی. جابجایی بین این دو حالت هنگام کار بر روی نشانه گذاری است که بیشتر مشکلات را به همراه دارد: ممکن است تصاویر کوچکتر شوند، پارامترهای مختلف ممکن است ناپدید شوند. این یکی از مواردی است که قطعاً در آینده اصلاح خواهد شد، اما در حال حاضر باید این واقعیت را در نظر داشته باشیم.»

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

در اینجا، دوباره، سخنان توسعه دهندگان در مورد سازگاری است. منوی ویکی در مرورگرهای تلفن همراه ظاهر می‌شود، اما با اندازه صفحه نمایش سازگار نیست، به این معنی که تصاویر ممکن است شبیه به یک رایانه نباشند. می‌توانید راهنماهایی را به صورت آنلاین در مورد نحوه انطباق نشانه‌گذاری ویکی برای دستگاه‌های تلفن همراه پیدا کنید، اما حتی آنها عملکرد ۱۰۰٪ را در همه دستگاه‌ها تضمین نمی‌کنند.»

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

7.2 منوی گرافیکی بزرگ
در این حالت، یک ردیف عمودی از پیوندها روی یک تصویر پس‌زمینه بزرگ قرار دارد و ساختاری کاملاً ثابت دارد. درس اینجاست.

7.3 منو به صورت آیکون، کاشی
این طرح شامل چندین ردیف و ستون به شکل آیکون های گرافیکی و کتیبه برای آنها یا کاشی های گرافیکی چند رنگ یا تک رنگ است.

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

امروز "غوطه وری در گروه های VK" را ادامه خواهم داد. در قسمت سوم «سریال» گفتم و نشان دادم. امروز بیایید در مورد طراحی منوی گروه VKontakte صحبت کنیم!

در اولین مقاله در مورد ایجاد منو، سوالات زیادی در نظرات وجود داشت، بنابراین قبل از شروع یک موضوع جدید، به سوالات متداول پاسخ خواهم داد.

سوال 1:اولین و رایج ترین: "کد در منو کجاست؟"یا "اگر هیچ نشانکی در هنگام ویرایش "کد منبع" وجود نداشته باشد، چگونه یک صفحه داخلی اضافه کنیم؟"یا «هنوز نمی‌فهمم اگر کد ظاهر نشد چه کار کنم!»

پاسخ 1: VK ویرایشگر را تغییر داده است، اکنون می توانید تنها با یک کلیک بین ویرایشگر بصری و کد جابجا شوید (گوشه سمت راست بالای ویرایشگر):

برای بررسی اینکه در کدام ویرایشگر هستید: ماوس خود را روی این دکمه حرکت دهید، متنی بنویسید و آن را با پررنگ برجسته کنید - اگر کاراکترهای غیرعادی ظاهر شدند، این کد است.

سوال 2:دوم، واقعاً مشکل ساز است: چگونه فاصله بین تصاویر را حذف کنیم؟»

پاسخ 2:اعتراف می کنم، زمانی که منوی مشتری برای اولین بار شروع به کار کرد، خودم ترسیدم. الان سریع ویرایشش کردم ولی بعدش جالب نبود. دیدن:

تگ nopadding را اضافه کنید. و همه چیز سر جای خودش قرار خواهد گرفت!

فضا بین عکس‌ها باز می‌شود و منو شکسته به نظر می‌رسد. برای افراد نادان، این ممکن است عادی نباشد، اما برای نادان، حداقل غیرحرفه ای است. خب پس مشکل اصلی چیه؟ آه، خیلی ساده است! در VK دائماً برخی به روز رسانی ها وجود دارد، الگوریتم های جدید معرفی می شوند ... و حتی ویرایشگر نیز کج می شود ... گاهی اوقات بدون هیچ دلیل مشخصی تگ های مهم از کد خارج می شوند و سپس این تصویر را می بینیم. برای رفع این مشکل، باید کد را بررسی کرده و تنظیمات لازم را انجام دهید. فرمت کد باید به صورت زیر باشد:

الگو: [] مثال: []

معمولاً تصاویر منو به دلیل حذف کد گسترش می‌یابند nopadding; - ما آن را در جای خود قرار دادیم و همه چیز هماهنگ است. قبل از ذخیره نتیجه، روی دکمه "پیش نمایش" کلیک کنید تا مطمئن شوید که همه چیز صاف است.

سوال 3:اخبار. در اکتبر 2012، VKontakte به زور آواتارهای گروه ها و صفحات عمومی را قطع کرد. اکنون اندازه آنها دارای استاندارد مشترک 200x500 پیکسل است. بنابراین، اگر آواتار بزرگتری در گروه خود داشتید، آن را به روز کنید (آواتار را به روز کنید).

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

سوووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووووهیم تموم شدیم...حالا بریم سراغ ساخت خود منو!

مرحله 1. نحوه ایجاد یک منو در تماس و ایجاد صفحات تو در تو:

اول از همه، بیایید مطمئن شویم که می دانید چگونه یک منوی گروهی را در تماس ایجاد کنید و چند دستورالعمل را دنبال کنید:

نظر شما در مورد برگه تقلب من چیست؟

این همان برگه تقلبی است که من به دست آوردم! برای وضوح بیشتر، هر عدد را شرح می دهم:

این عملیات را با تمام زیرصفحات انجام دهید و منوی شما آماده خواهد شد.

بخور! ما منو ایجاد کردیم، صفحات داخلی را ایجاد کردیم، آنها را پر کردیم، اکنون به سراغ ایجاد یک منوی گرافیکی زیبا می رویم.

مرحله 2. نحوه ایجاد یک منوی گرافیکی زیبا در Contact و نصب آن:

من کل تئوری را در مورد نحوه عملکرد نشانه گذاری ویکی در تماس به شما ارائه نمی دهم، ما اکنون اهداف دیگری داریم. برای ایجاد یک منوی بصری در یک گروه VK، لازم نیست تمام نشانه گذاری ویکی را بدانید. بیایید به ایجاد یک منوی بصری برویم!

ابتدا کد و نتیجه منو را به شما نشان می دهم:

اعتراف می کنم، من آن را به طور خاص برای نوشتن این مقاله ساخته ام. می‌دانید که همه «نمی‌خواستند»، مانند «یک کفاش بدون چکمه». اما اکنون یک منوی بصری در گروه VK دارم!

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

من یک گزینه نصب منو نسبتاً پیچیده را به شما نشان خواهم داد. تفاوت در تعداد عناصر است. منویی که به سادگی به صورت نوار بریده می شود، ساده ترین پیاده سازی است. هر چه دکمه های قابل کلیک در یک خط بیشتر باشد، اجرای آن پیچیده تر است. اگرچه، با دانستن ویژگی های خاص، همه چیز ساده است! این فقط به زمان بستگی داره. بنابراین، عرض تصویر باید:

370 پیکسل - اگر دو یا چند شی در یک خط دارید، مانند دکمه های رسانه های اجتماعی من

و حداکثر 388 پیکسل - اگر تصویر را به روشی ساده، فقط به خطوط برش دهیم، بدون اینکه آن را به اشیاء کوچک تقسیم کنیم. این ویژگی است که باید هنگام برش منو به دکمه ها بدانید. اندازه تصویر من برای کل منو 370x456 پیکسل بود.

پس از برش عکس به تعداد مورد نیاز اشیاء و ذخیره در یک آلبوم جداگانه، این آلبوم را در VK آپلود می کنیم. ما در نمایه حساب آپلود می کنیم، نه در گروه! از آنجایی که در آلبوم های گروهی دیگر گزینه ای برای مخفی کردن آلبوم ها وجود ندارد. یک آلبوم فنی در یک گروه شرکتی (به عنوان مثال) اصلاً مورد نیاز نیست، بنابراین موارد منو را در آلبوم حساب پنهان می کنیم:

آلبوم فنی VK

هنگامی که حریم خصوصی "فقط من" را تنظیم کردید. بیایید به نصب خود منو برویم. من یک نمونه کد به شما می‌دهم که می‌تواند یک الگو برای شما باشد و بیایید ببینیم از چه چیزی تشکیل شده است:

[]

جایی که، عکس7632142_296911699– این آدرس عکس است! در نوار آدرس تصویر به آن نگاه می کنیم:

از اولین تصویر، اجازه دهید یک منو در گروه VKontakte وارد کنیم

شما به یک آدرس کوتاه از تصویر نیاز دارید، برای انجام این کار به خود آلبوم بروید:

برای دریافت آدرس تصویر مورد نظر به خود آلبوم بروید!

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

اضافه کردن اندازه تصویر به کد منو!

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

یه توضیح کوچولو اینجا! ما پیوندهای خارجی، پیوندهایی به آلبوم های VK و بحث ها را به طور کامل می نویسیم، و پیوندهایی به صفحات داخلی در قالب صفحه-32734125_44298120. در ابتدا و انتهای خط، فراموش نکنید که دو علامت مربع و بدون فاصله قرار دهید.

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

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

پس از اینکه تمام تصاویر را به منو منتقل کردید و آنها را طراحی کردید (اندازه، پیوند)، نتیجه را ذخیره کنید و کار خود را تحسین کنید! همه! آماده!

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

اندازه های فعلی تصاویر VKontakte

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

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

اندازه آواتار VK

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

حداکثر اندازه آواتار 200 در 500 پیکسل است. اما، در اصل، شما می توانید تصاویر بزرگتر را آپلود کنید - حداکثر 7000 پیکسل در هر طرف. نکته اصلی این است که نسبت تصویر از 2 به 5 تجاوز نمی کند.

من با یک مثال به شما نشان می دهم.

من یک تصویر دارم. اندازه آن: 200 در 800 پیکسل (نسبت 2 به 8). هنگام بارگذاری هیچ خطایی وجود ندارد. با این حال، من هنوز نمی توانم از این تصویر استفاده کنم، زیرا "Contact" به من اجازه نمی دهد آن را به طور کامل انتخاب کنم.

پوشش

اندازه جلد برای نسخه کامل سایت 1590 در 400 پیکسل است.

توجه داشته باشید: در نسخه موبایل و اپلیکیشن ها، نسخه کامل کاور نمایش داده نمی شود، بلکه تنها بخشی از آن در ابعاد 1196 در 400 پیکسل نمایش داده می شود. نحوه برش آن در برنامه موبایل را ببینید:

برای جلوگیری از این اتفاق، عناصر اصلی پوشش خود را در 1196 در 400 پیکسل قرار دهید.

تصاویر پیوست شده

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

کمی گیج کننده به نظر می رسد :) بنابراین من با یک مثال به شما نشان خواهم داد.

فرض کنید یک تصویر مربع شکل با اضلاع 510 پیکسل داریم. اگر آن را به پست خود ضمیمه کنیم، در فید خبری همه دستگاه ها بسیار خوب به نظر می رسد:

و این همان چیزی است که یک تصویر افقی در جهت افقی به نظر می رسد (عرض 510 پیکسل):

همانطور که می بینید، هرچه تصویر باریکتر (از نظر ارتفاع) در فید گوشی هوشمند کوچکتر به نظر می رسد. برای مشاهده این موضوع به تصویر زیر نگاه کنید:

واضح است که تفاوت در اینجا بسیار مهم نیست و کاربران گوشی های هوشمند همچنان به تصویر شما نگاه می کنند، فقط در مورد دوم کمی راحت تر خواهند بود.

تصاویر برای پست های دارای پیوند

همه این داده ها از کد نشانه گذاری Open Graph می آیند:

اگر Open Graph مشخص نشده باشد، عنوان از متا تگ Title و تصویر از مقاله گرفته می شود. در همان زمان، می توانید به راحتی آن را تغییر دهید - یا با استفاده از فلش های ویژه، تصویر دیگری را از مقاله انتخاب کنید:

یا مال خودتون رو آپلود کنید:

حداقل اندازه تصویری که می توانید به عنوان اعلامیه مقاله خود استفاده کنید 537 در 240 پیکسل است. با این حال، تا زمانی که نسبت ها حفظ شود، می توانید تصاویر بزرگتر را آپلود کنید.

تصویر برای مقاله ایجاد شده در ویرایشگر

اندازه تصویر برای جلد مقاله ایجاد شده در ویرایشگر 510 در 286 پیکسل است. بهتر است رنگ آن تیره و کم و بیش تک رنگ باشد، زیرا نام مقاله و انجمن در زمینه روشن گم شده است.

مثال خوب:

مثال خیلی خوبی نیست:

اندازه عکس و ویدیو برای داستان ها

اندازه عکس ها 1080 در 1920 پیکسل است. اندازه ویدیو 720 در 1280 پیکسل است.

مشخصات فنی فیلمبرداری:

• حداکثر 15 ثانیه؛
• حداکثر 5 مگابایت؛
• کدک h.264;
• صدای AAC.

داستان‌ها باید از عکس‌ها و ویدیوها با فرمت عمودی استفاده کنند.

لطفاً توجه داشته باشید: داستان ها از طرف جوامع در حال حاضر فقط توسط جوامع بزرگی که توسعه دهندگان VKontakte این عملکرد را برای آنها باز کرده اند، می توانند اضافه شوند. و این با استفاده از برنامه رسمی انجام می شود. این کار را نمی توان از طریق کامپیوتر انجام داد.

اندازه جلد آلبوم عکس

اندازه تصویر ویدیویی

1280 در 720 پیکسل.

صفحه ویکی

عرض ناحیه محتوای یک صفحه ویکی 607 پیکسل است. اگر یک تصویر بزرگتر آپلود کنید، به طور خودکار با عرض 400 پیکسل آپلود می شود. مثال: من یک تصویر با ابعاد 1366 در 768 دارم. اگر آن را به صفحه ویکی اضافه کنم، این شکلی است:

برای تغییر اندازه یک عکس، باید روی آن کلیک کرده و مقادیر مورد نظر را تنظیم کنید:

در زیر به طور مفصل در مورد نحوه کار با صفحات ویکی صحبت خواهم کرد. بنابراین در اینجا به این موضوع نمی پردازیم.

چگونه مطمئن شویم که تصاویر VKontakte کوچک نمی شوند؟ تاثیر پس زمینه و اندازه بر کیفیت تصویر.

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

چگونه مطمئن شویم که کیفیت تصاویر افت نمی کند؟

برای جلوگیری از کوچک شدن تصویر (یا بهتر است بگوییم کوچک شدن، اما به میزان بسیار کمتر)، لازم است آن را 2-3 برابر بزرگتر از اندازه مورد نظر کنید. به عنوان مثال، اگر بخواهیم یک آواتار با ابعاد 200 در 500 پیکسل بسازیم، عکسی با ابعاد 400 در 1000 پیکسل می گیریم. اگر می خواهید منویی با اندازه 510 در 400 پیکسل ایجاد کنید، 1020 در 800 را انتخاب کنید.

تصویر روی پس زمینه آبی تیره که درست در بالا نشان دادم دارای سایز 510 در 350 است که آن را دو برابر بزرگتر کردم (1020 در 700) و ذخیره کردم. این چیزی است که از آن بیرون آمد:

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

نحوه طراحی هدر صفحه

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

پوشش

چندی پیش، VKontakte یک به روز رسانی را معرفی کرد - اکنون می توانید جلدهای بزرگ و زیبا (1590 در 400 پیکسل) را در صفحات آپلود کنید. برای انجام این کار، به تنظیمات بروید و روی دکمه "دانلود" کلیک کنید.

روی جلد می توانید هر چیزی را که می خواهید قرار دهید: از نام و شعار شرکت خود گرفته تا انواع تبلیغات، پیشنهادات و حتی مسابقات.

توصیه می کنم به امکانات پوشش پویا توجه ویژه ای داشته باشید. مقاله ما را در مورد اینکه چگونه کار می کند، برای چه اهدافی می توان از آن استفاده کرد و با چه خدماتی می توان آن را نصب کرد، بخوانید.

نمونه هایی از پوشش های پویا:

جلد + توضیحات انجمن + لینک وب سایت

برخی از شرکت ها به طور خاص هیچ پستی را در هدر پین نمی کنند تا کاربران این فرصت را داشته باشند که اطلاعات اولیه صفحه را بخوانند و بلافاصله به سایت مراجعه کنند.

توضیحات با هشتگ

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

پست پین شده که نشان می دهد صفحه درباره چه چیزی است

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

و این چیزی است که کاربر پس از کلیک بر روی پیوند می بیند:

منوی گروه باز است

من یک منوی باز را منویی می نامم که بلافاصله نشان می دهد که از چه مواردی تشکیل شده است. یعنی تصویر اعلام پست ویکی محتوای آن را کاملا کپی می کند. بنابراین، کاربران بلافاصله می بینند که در داخل چه چیزی در انتظار آنها است. من با یک مثال به شما نشان می دهم.

این چیزی است که یک پست پین شده در هدر صفحه Flatro به نظر می رسد:

منوی گروه بسته است

منوی بسته همان پست ویکی در پاراگراف قبلی است، فقط اعلامیه حاوی یک تصویر بدون آیتم های منو است. معمولاً روی آن می نویسند: "منو"، "منوی ناوبری" یا "ناوبری از طریق مواد عمومی".

و این چیزی است که وقتی روی آن کلیک می کنیم می بینیم:

به هر حال، شایان ذکر است که اینها از تنها گزینه ها فاصله دارند. در اصل، شما می توانید هر چیزی که می خواهید روی این تصویر بنویسید. نکته اصلی این است که کاربر می خواهد روی آن کلیک کند و می فهمد که پس از آن چه چیزی در انتظار او است. مثال:

منوی ادغام شده برای یک گروه

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

GIF و آواتار در یک تصویر

اما این گزینه طراحی برای کلاه واقعاً من را خوشحال کرد. GIF پخش شده به طور خودکار با آواتار در یک ترکیب واحد ادغام می شود و توجه کاربران را به خود جلب می کند، حتی اگر اصلاً اطلاعاتی در مورد آن وجود نداشته باشد.

به هر حال، من این نمونه را در گروه بازاریاب SMM سرگئی شماکوف مشاهده کردم. بنابراین، من از او برای یافتن تشکر می کنم :)

منوی مخفی

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

پخش خودکار ویدیو

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

چگونه می توان چنین ویدئویی را به سربرگ صفحه خود اضافه کرد؟

برای این کار سه شرط باید رعایت شود:

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

پستی که به اشتراک گذاری زیادی دارد

راه دیگر برای استفاده مؤثر از فضا در هدر صفحه، پین کردن یکی از موفق‌ترین پست‌های خود در آن است - پستی که قبلاً تعداد زیادی لایک و اشتراک‌گذاری دریافت کرده و همچنان ادامه دارد. فکر می‌کنم چرا این کار را می‌کنید، فکر می‌کنم همه می‌دانند - هرچه ارسال مجدد بیشتر، دسترسی بیشتر باشد، اشتراک‌های بیشتری را صفحه دریافت می‌کند.

اطلاعیه های ویدیوها، آلبوم ها، رویدادهای جدید

ارائه محصولات/خدمات جدید

تخفیف و تبلیغات

موارد، نظرات مشتریان

تبلیغات اپلیکیشن

جوک های کاربردی

قوانین جامعه

پیوند به سایر شبکه های اجتماعی

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

آواتار باید چگونه باشد؟

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

تصویر کوچک آواتار

1. متن روی تصویر کوچک آواتار شما باید به اندازه کافی بزرگ باشد که خوانده شود.







2. متن نباید فراتر از تصویر کوچک باشد.







3. کاربران باید آنچه را که در آواتار نشان داده شده است درک کنند.







4. در صورت امکان، بهتر است از تصاویر استوک استفاده نکنید، زیرا اغلب اعتبار شرکت را کاهش می دهند.




5. نامطلوب است که تصویر کوچک آواتار بیش از حد محو و خسته کننده باشد، در غیر این صورت در پس زمینه آواتارهای روشن تر رقبا از بین می رود.



6. اگر می‌خواهید آواتارتان مدرن به نظر برسد، آن را به سبک مینیمالیستی بسازید: کمتر متن، سایه‌ها، گرادیان‌ها و عناصری که بار معنایی ندارند. آواتار شما باید تا حد امکان ساده و مرتب باشد. این سبک در حال حاضر مرسوم است.







7. اگر هدف شما جلب توجه کاربران و متمایز شدن از دیگر آواتارها در فید است، باید از تخیل خود استفاده کنید. به این فکر کنید که وقتی به دنبال جوامع جالب می گردید به چه چیزی توجه می کنید؟ به عنوان مثال، بیش از یک بار توسط آواتارهایی با نور سوزان جذب شده ام، که معمولاً نشان دهنده ورود پیام جدید است. این یک تکنیک بسیار قدیمی است، اما به دلایلی هنوز روی من تأثیر می گذارد - وقتی چنین نوری را می بینم، قطعاً نگاهم را به آن نگاه خواهم کرد.

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

آواتار یک دایره سیاه است: بزرگ و کوچک. به نظر می رسد، اصلاً چرا این کار را انجام دهید؟ اما هنگامی که در لیست جوامع حرکت می کنید، چنین آواتارهایی توجه را به خود جلب می کنند زیرا با بقیه تفاوت های زیادی دارند.

چه اطلاعاتی را می توان در تصویر کوچک آواتار قرار داد؟

حتی اگر تصویر کوچک آواتار بسیار کوچک است، می‌تواند (و باید) برای جذب فالوور به جامعه‌تان استفاده شود. چگونه انجامش بدهیم؟ بیایید به چند گزینه نگاه کنیم:

اعلام یک محصول/خدمات/رویداد جدید

مزایای شرکت/خدمات/صفحه

شماره تلفن شرکت

قیمت های مناسب

ارسال رایگان

ضمناً اغلب اوقات اطلاعاتی که شرکت ارسال رایگان ارائه می دهد به نام گروه اضافه می شود تا کاربران حتماً به آن توجه کنند.

موجودی

مسابقات

جای خالی

خود آواتار باید چگونه باشد؟

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

1. آواتار باید از کیفیت بالایی برخوردار باشد. من در مورد چگونگی رسیدن به این کمی بالاتر نوشتم. برای کسانی که این قسمت را از دست داده اند، به طور خلاصه به شما می گویم - اندازه آواتار باید 2-3 برابر بزرگتر از آنچه شما برنامه ریزی کرده اید باشد.
2. توصیه می شود که آواتار با منو ترکیب شود: طرح رنگی یکسان باشد، فونت ها، عناصر و غیره یکسان باشد. به همین دلیل، هدر صفحه شما مرتب تر و حرفه ای تر به نظر می رسد. مثال:
3. خود آواتار و تصویر کوچک آواتار ممکن است متفاوت باشند. به عنوان مثال، می توانید یک دایره روی آواتار خود بکشید، آن را به شکلی که دوست دارید طراحی کنید، آن قسمت را به عنوان تصویر کوچک انتخاب کنید و بقیه آواتار را به سبک دیگری طراحی کنید.




گزینه دیگر این است که آواتار را به دو قسمت تقسیم کنید. یکی برای مینیاتور و دومی برای بقیه آواتار.




4. به منظور تشویق کاربران به عضویت در صفحه شما یا ارسال پیام به نماینده شرکت، می توانید یک فراخوان برای اقدام مربوطه را در پایین آواتار قرار دهید و آن را با فلشی که به دکمه اشاره دارد همراه کنید.




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

چه اطلاعاتی را می توان روی آواتار قرار داد؟

در اصل، شما می توانید هر چیزی را که می خواهید روی آواتار خود قرار دهید. برخلاف مینیاتور، اینجا واقعاً جا برای پرسه زدن وجود دارد. نکته اصلی این است که از آن سوء استفاده نکنید :)

دامنه سایت

تلفن/آدرس/ساعت کاری

مسابقات/تبلیغات

بیشترین محصولات خریداری شده/اقلام جدید

اطلاعات در مورد تحویل

تبلیغات اپلیکیشن موبایل

مزایای اصلی شرکت/صفحه/محصول و غیره

به روز رسانی مجموعه / خلاقیت جدید و غیره

اطلاعاتی که جامعه شما رسمی است

اطلاعات در مورد رویدادهای آینده

آدرس اکانت ها در سایر شبکه های اجتماعی

توضیحات صفحه گسترده

لاف می زند

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

نحوه ایجاد یک آواتار و منوی بدون درز

برای ایجاد یک آواتار و منو ادغام شده، به Adobe Photoshop یا معادل آن نیاز دارید. من کل فرآیند را با استفاده از فتوشاپ به عنوان مثال توضیح خواهم داد. پس بزن بریم.

1. قالب فتوشاپی را که مخصوص این مطلب آماده کردم دانلود کنید. در اندازه معمولی (عرض منو - 510 پیکسل، آواتار - 200) یا بزرگ شده (منو - عرض 1020 پیکسل، آواتار - 400).
2. تصویری را که می خواهید به عنوان پایه استفاده کنید باز کنید.
3. آن را کپی کنید، آن را در قالب بچسبانید و آن را طوری قرار دهید که می خواهید برش دهید.

1. افکت، متن، گرافیک و غیره اضافه کنید.

1. اگر نمی خواهید بخشی از تصویر را از دست بدهید (در آن شکاف 50 پیکسلی)، آن را همانطور که در GIF زیر نشان داده شده است به سمت راست حرکت دهید:

1. ابزار "برش" را انتخاب کنید و روی دکمه "Fragments along Guides" کلیک کنید.

1. قطعات غیر ضروری را حذف کنید (کلیک راست ماوس - "حذف قطعه") و موارد موجود را ویرایش کنید (کلیک راست ماوس - در فضای خالی کلیک کنید - ناحیه مورد نظر را بردارید و آن را به اندازه دلخواه بکشید).

1. به بخش "فایل" بروید و دستور "ذخیره برای وب" را انتخاب کنید.

1. به محلی که تصاویر را در آن ذخیره کرده اید (دسکتاپ یا دایرکتوری خاص) بروید و پوشه ای به نام "تصاویر" را پیدا کنید. این جایی است که تصاویر شما خواهند رفت. اکنون تنها چیزی که باقی می ماند این است که آنها را در صفحه پر کنید.

P.S.ارتفاع آواتار به صلاحدید شما قابل تغییر است. من حداکثر اندازه را گرفتم - 500 پیکسل، اما مقدار شما ممکن است کمتر باشد. به عنوان مثال، مانند صفحه "ویکی نشانه گذاری":

نحوه استفاده از ویجت ها

ویجت ها نیز بخشی از طراحی جامعه VK هستند. با استفاده از آنها، کاربر می تواند: سفارش دهد، در خبرنامه شما مشترک شود، در یک مسابقه شرکت کند، نظرات را بخواند و بگذارد، جستجویی را در جامعه باز کند، هدیه دریافت کند، کوپن تخفیف و غیره.

در اینجا چند نمونه از ظاهر ویجت ها در صفحه VKontakte آورده شده است:

نحوه طراحی تصاویر برای پست ها

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

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

از کجا می توانم تصاویر خوب تهیه کنم؟

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

کسانی که کار در فتوشاپ بلد نیستند چه کار کنند؟

اگر هرگز در فتوشاپ (یا هر ویرایشگر گرافیکی دیگری) کار نکرده‌اید و هنوز آماده نیستید تا زمانی را برای تسلط بر آن اختصاص دهید، می‌توانید از خدماتی استفاده کنید که قبلاً قالب‌های تصویری آماده برای شبکه‌های اجتماعی مختلف دارند:

1. Fotor.com

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

ما آن را در قالب قرار می دهیم، با دکمه سمت چپ ماوس آن را انتخاب می کنیم، دستور Layer (آیکون ساندویچ) را انتخاب می کنیم و روی Move to bottom کلیک می کنیم. به این ترتیب تصویر ما در پس‌زمینه خواهد رفت و تمام کتیبه‌ها در بالای آن قرار می‌گیرند.

پس از آن، متن، فونت، اندازه فونت، موقعیت کتیبه و غیره را تغییر می دهیم.

سپس بر روی آیکون فلاپی دیسک کلیک کنید، نام، فرمت تصویر، کیفیت را انتخاب کنید و روی دکمه ورود برای دانلود کلیک کنید.

2. Canva.com

سرویس دیگری که به شما کمک می کند تا تصویر خود را به زیبایی طراحی کنید. بر اساس همان اصل قبلی کار می کند. در این سرویس ثبت نام کنید (می توانید از حساب یا ایمیل +Google خود استفاده کنید).

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

یک الگو را انتخاب کنید (اگر الگو با علامت "رایگان" مشخص شده است، به این معنی است که رایگان است)، متن را تغییر دهید.

در صورت لزوم، تصویر خود را آپلود کنید، ابعاد را تنظیم کنید، متن، فونت و موقعیت کتیبه را تغییر دهید. پس از آن، روی دکمه «دانلود» کلیک کنید، فرمت تصویر را انتخاب کنید و آن را در رایانه یا هر دستگاه دیگری ذخیره کنید.

نحوه قالب بندی مقالات در ویرایشگر

اخیراً VKontakte امکان تایپ مقالات را در یک ویرایشگر ویژه فراهم کرده است. برای ایجاد یک مقاله، باید روی حرف "T" کلیک کنید:

نحوه استفاده از نشانه گذاری ویکی

خوب، در اینجا به جالب ترین و در عین حال سخت ترین بخش می رسیم. شاید در بین خوانندگان افرادی باشند که نمی دانند ویکی نشانه گذاری چیست و برای اولین بار است که این اصطلاح را می شنوند. بنابراین، به خصوص برای شما، من تعریفی را که خود "Contact" ارائه می دهد، ارائه می کنم.

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

درست مانند وردپرس (یا هر CMS دیگری) یک ویرایشگر HTML دارد که با آن مقاله ایجاد می کنید، Contact نیز ویرایشگر خود را برای ایجاد و ویرایش صفحات ویکی دارد. به نظر می رسد این است:

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

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

برای اینکه بفهمیم چگونه یک گروه را به درستی در تماس تشکیل دهیم، بیایید ساختار آن را با توجه به عناصر اصلی آن بررسی کنیم.
یک نمودار تصویری ویژه با توضیحات آماده کرده ام.

نمودار نحوه سازماندهی زیبا و صحیح یک گروه در VK.

شما می توانید نمودار را به صورت زنده مشاهده کنید ارتباط دادن.

1. آواتار.
عنصر گرافیکی اصلی گروه. ساختار آن ممکن است بسته به موضوع گروه متفاوت باشد. یک مثال مناسب برای یک گروه فروش در نمودار نشان داده شده است. توصیه های کلیدی برای طراحی آواتار:
آ) انتقال اصل مطلب.هدف اصلی آواتار این است که ویژگی های کلیدی گروه را منتقل کند، بگوید درباره چیست و برای چه کسی است. نه تنها خود تصویر، بلکه کتیبه های متنی نیز در این امر به شما کمک می کند. با این حال، توصیه می شود که متن را تا حد امکان کوچک نگه دارید.
ب) تصویر با کیفیت بالا.گرافیک باید با کیفیت و زیبا باشد، اما نه بیشتر. آواتار نباید بیش از حد از محتوای اصلی منحرف شود.
که در) از هر فضای ممکن استفاده کنید.حداکثر اندازه خروجی یک آواتار 200 در 449 است، کوچکتر کردن آن توصیه نمی شود. اگر بیشتر انجام می دهید، نسبت ها را حفظ کنید.

2. وضعیت گروه.
با وجود این واقعیت که این یک عنصر صفحه نسبتاً کوچک است، بسیار مهم است. وضعیت باید به طور خلاصه مهمترین اطلاعات را در مورد گروه شما نشان دهد. حداکثر طول یک وضعیت 140 کاراکتر است.
سعی کنید وضعیت را تا حد امکان واضح و محلی کنید. از آیکون ها استفاده کنید کدهای نماد برای درج را می توان یافت، به عنوان مثال، .
نمونه هایی از کدهای نماد برای فروش گروه:
تلفن - کد: _9742;
آیکون کد ارسال پیام: _9993;
اشاره گر - کد: _128073; یا کد: _10145;

3. توضیحات گروه با منو یا پست پین شده.
در زیر وضعیت در مرکز صفحه، محتوای اصلی قرار دارد. 2 گزینه اصلی برای آنچه می تواند در محتوا باشد وجود دارد. این توضیحات گروه با منو و یک پست سنجاق شده از دیوار است.
منو از نظر ناوبری بسیار راحت است، اما برای گسترش نیاز به یک کلیک اضافی دارد، بنابراین ما در مورد ایجاد یک منو برای یک گروه در جزئیات صحبت نمی کنیم. مطالب زیادی در مورد موضوع نشانه گذاری ویکی در اینترنت وجود دارد.
برای نسخه کامپیوتری گروه، به نظر ما، بهتر است یک پست پین شده را محتوای اصلی قرار دهیم، زیرا می تواند کل فضای قابل استفاده را اشغال کند، کاملا راحت است و نیازی به کلیک اضافی از کاربر ندارد.
دستورالعمل های کلی برای ایجاد یک پست پین شده:
الف. متن اصلی باید تا حد امکان آسان باشد. از نمادها و نشان ها به شدت استفاده کنید.
ب. ارتفاع کل پست سنجاق شده نباید از مرز پایین آواتار فراتر رود. به صورت آزمایشی، می توانید مقدار بهینه محتوای متن را انتخاب کنید.
ب- اندازه پیشنهادی تصویر پیوست شده 395 در 289 است. این اندازه ها برای قرار دادن اطلاعات کلیدی در آن بهینه هستند.

علاوه بر عناصر اصلی، موارد دیگری نیز وجود دارد که اهمیت کمتری ندارند، یعنی: دیوار گروه، بحث ها، آلبوم ها، فیلم ها، اسناد و مخاطبین.
این عناصر اساسا هستند محتوای گروهی. محتوا- این دلیل اصلی عضویت یک بازدیدکننده در گروه است. محتوا باید بر اساس سبک اصلی گروه قالب بندی شود. اما طراحی به اندازه محتوای خود محتوا مهم نیست.
اگر گروه خالی باشد و به غیر از طرح، چیز با ارزشی نداشته باشد، بعید است که کسی مشترک آن شود. ما در این مقاله به طور مفصل در مورد محتوا نمی نویسیم. مقاله ای در مورد نحوه طراحی زیبا و صحیح یک گروه VKontakte. اگر برای نوشتن محتوا به کمک نیاز دارید، می توانید به عنوان بخشی از سرویس “ ” با ما تماس بگیرید
این همه برای امروز در مورد طراحی گروهی است. سوالات خود را در مورد مقاله در نظرات زیر بنویسید.
برای سوال در مورد سفارش خدمات، به icq 275129 مکاتبه کنید،

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

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